@kwirthmagnify/kwirth-plugin-status 0.1.0 → 0.2.0

package/back.js

@@ -45,6 +45,18 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 var import_kwirth_common_back = __toESM(require_kwirth_common_back(), 1);
+var statsOf = (p) => {
+  if (!p.getStats) return void 0;
+  try {
+    const s = p.getStats();
+    return {
+      subscribers: typeof s?.subscribers === "number" ? s.subscribers : void 0,
+      events: typeof s?.events === "number" ? s.events : void 0
+    };
+  } catch {
+    return void 0;
+  }
+};
 var StatusChannel = class {
   constructor(clusterInfo, backChannelObject) {
     this.channelId = "status";
@@ -146,7 +158,15 @@ var StatusChannel = class {
             cuántos suscriptores tiene, y ese contrato todavía no existe (llega en S2). Inventar el dato sería
             peor que no darlo — un administrador que lea "ocioso" va a ir a desinstalar algo.
         */
-    this.healthOfProvider = (p) => {
+    /**
+     * Cuántos consumidores tiene, o undefined si no lo dice.
+     *
+     * Se protege con try/catch porque esto es código de una extensión de terceros: un provider que
+     * reviente al preguntarle no puede llevarse por delante la pantalla entera. Si falla, no informa.
+     */
+    this.subscribersOf = (p) => statsOf(p)?.subscribers;
+    this.eventsOf = (p) => statsOf(p)?.events;
+    this.healthOfProvider = (p, subscribers) => {
       if (p.started !== true) {
         return {
           health: "not-instantiated" /* NOT_INSTANTIATED */,
@@ -160,20 +180,43 @@ var StatusChannel = class {
           reason: "Its configuration endpoint is not mounted \u2014 the server has not been restarted since it was installed"
         };
       }
-      return { health: "instantiated" /* INSTANTIATED */ };
+      if (subscribers === void 0) return { health: "instantiated" /* INSTANTIATED */ };
+      if (subscribers > 0) return { health: "active" /* ACTIVE */ };
+      return {
+        health: "idle" /* IDLE */,
+        reason: "Running, but nothing is consuming it right now"
+      };
     };
     this.buildInventory = () => {
       const components = [];
+      const edges = this.subscriptionsOf();
+      const conocidos = /* @__PURE__ */ new Map();
+      for (const e of edges) conocidos.set(e.providerId, (conocidos.get(e.providerId) ?? 0) + 1);
       for (const p of this.clusterInfo.providers ?? []) {
-        const { health, reason } = this.healthOfProvider(p);
-        components.push({ kind: "provider" /* PROVIDER */, id: p.id, displayName: p.id, health, ...reason ? { reason } : {} });
+        const subscribers = this.subscribersOf(p);
+        const eventos = this.eventsOf(p);
+        const { health, reason } = this.healthOfProvider(p, subscribers);
+        components.push({
+          kind: "provider" /* PROVIDER */,
+          id: p.id,
+          displayName: p.id,
+          health,
+          ...reason ? { reason } : {},
+          ...subscribers === void 0 ? {} : { subscribers },
+          ...eventos === void 0 ? {} : { events: eventos },
+          knownConsumers: conocidos.get(p.id) ?? 0
+        });
       }
       for (const pluviderId of (this.clusterInfo.pluviders ?? /* @__PURE__ */ new Map()).keys()) {
+        const suyas = conocidos.get(pluviderId) ?? 0;
         components.push({
           kind: "pluvider" /* PLUVIDER */,
           id: pluviderId,
           displayName: pluviderId,
-          health: "instantiated" /* INSTANTIATED */
+          health: suyas > 0 ? "active" /* ACTIVE */ : "idle" /* IDLE */,
+          ...suyas > 0 ? {} : { reason: "Running, but nothing is consuming it right now" },
+          subscribers: suyas,
+          knownConsumers: suyas
         });
       }
       for (const s of this.clusterInfo.senders?.listSenders() ?? []) {
@@ -197,9 +240,22 @@ var StatusChannel = class {
       return {
         cluster: this.clusterInfo.name ?? "",
         takenAt: Date.now(),
-        components
+        components,
+        edges
       };
     };
+    /**
+     * Las aristas que el core conoce. Protegido igual que getStats: si el core es anterior a esto o
+     * revienta, se devuelve vacío y la pantalla enseña el inventario sin grafo.
+     */
+    this.subscriptionsOf = () => {
+      if (!this.clusterInfo.getSubscriptions) return [];
+      try {
+        return this.clusterInfo.getSubscriptions() ?? [];
+      } catch {
+        return [];
+      }
+    };
     this.sendInventory = (socket, instanceId) => {
       const msg = {
         msgtype: "statusmessageresponse",

package/front.js

@@ -76,8 +76,18 @@
     }
   });
 
+  // kwirth-globals:@xyflow/react
+  var require_react2 = __commonJS({
+    "kwirth-globals:@xyflow/react"(exports, module) {
+      var _m = window.__kwirth__.reactFlow;
+      var _d = _m != null && "default" in Object(_m) ? _m.default : _m;
+      if (typeof _d !== "function" && _d != null && typeof _d.default !== "undefined") _d = _d.default;
+      module.exports = Object.assign({}, typeof _m === "object" && _m !== null ? _m : {}, { default: _d, __esModule: true });
+    }
+  });
+
   // src/front/StatusChannel.ts
-  var import_react3 = __toESM(require_react(), 1);
+  var import_react5 = __toESM(require_react(), 1);
   var import_kwirth_common2 = __toESM(require_kwirth_common(), 1);
   var import_kwirth_common_front = __toESM(require_kwirth_common_front(), 1);
 
@@ -89,6 +99,9 @@
   // src/front/StatusData.ts
   var StatusData = class {
     constructor() {
+      this.view = "table";
+      this.filter = "";
+      this.autoRefresh = 0;
       this.signals = [];
       this.configAccepted = false;
       this.started = false;
@@ -96,11 +109,231 @@
   };
 
   // src/front/StatusTabContent.tsx
-  var import_react2 = __toESM(require_react(), 1);
-  var import_material2 = __toESM(require_material(), 1);
+  var import_react4 = __toESM(require_react(), 1);
+  var import_material3 = __toESM(require_material(), 1);
   var import_icons = __toESM(require_icons(), 1);
   var import_kwirth_common = __toESM(require_kwirth_common(), 1);
+
+  // src/front/StatusDiagram.tsx
+  var import_react2 = __toESM(require_react(), 1);
+  var import_material2 = __toESM(require_material(), 1);
+  var import_react3 = __toESM(require_react2(), 1);
+  var COLOR = {
+    ["active" /* ACTIVE */]: "#2e7d32",
+    ["idle" /* IDLE */]: "#616161",
+    ["instantiated" /* INSTANTIATED */]: "#2e7d32",
+    ["not-instantiated" /* NOT_INSTANTIATED */]: "#ed6c02",
+    ["pending-restart" /* PENDING_RESTART */]: "#ed6c02",
+    ["failed" /* FAILED */]: "#d32f2f",
+    ["unknown" /* UNKNOWN */]: "#616161"
+  };
+  var colocar = async (nodos, aristas) => {
+    const filas = () => {
+      const pos = {};
+      const productores = nodos.filter((n) => n.data.esProductor);
+      const consumidores = nodos.filter((n) => !n.data.esProductor);
+      productores.forEach((n, i) => {
+        pos[n.id] = { x: i * 260, y: 0 };
+      });
+      consumidores.forEach((n, i) => {
+        pos[n.id] = { x: i * 260, y: 220 };
+      });
+      return pos;
+    };
+    const loadElk = window.__kwirth__?.loadElk;
+    if (!loadElk) return filas();
+    try {
+      const ELK = await loadElk();
+      const elk = new ELK();
+      const g = await elk.layout({
+        id: "root",
+        layoutOptions: {
+          "elk.algorithm": "layered",
+          /*
+              De arriba abajo: los productores en la capa de arriba y los consumidores debajo.
+              Se lee como un diagrama de flujo —el dato cae— y aprovecha el ancho de la pantalla,
+              que es donde sobra sitio cuando hay muchos nodos.
+          */
+          "elk.direction": "DOWN",
+          "elk.spacing.nodeNode": "40",
+          "elk.layered.spacing.nodeNodeBetweenLayers": "110"
+        },
+        children: nodos.map((n) => ({ id: n.id, width: 230, height: 56 })),
+        edges: aristas.map((e) => ({ id: e.id, sources: [e.source], targets: [e.target] }))
+      });
+      const pos = {};
+      for (const c of g.children ?? []) pos[c.id] = { x: c.x, y: c.y };
+      return Object.keys(pos).length === nodos.length ? pos : filas();
+    } catch {
+      return filas();
+    }
+  };
+  var StatusDiagram = ({ inventory, active }) => {
+    const theme = (0, import_material2.useTheme)();
+    const [posiciones, setPosiciones] = import_react2.default.useState(void 0);
+    const [seleccionado, setSeleccionado] = import_react2.default.useState(void 0);
+    const colores = {
+      fondoNodo: theme.palette.background.paper,
+      fondoCanal: theme.palette.mode === "dark" ? "#12233a" : "#e8f0fb",
+      texto: theme.palette.text.primary,
+      bordeCanal: theme.palette.primary.main
+    };
+    const { nodos, aristas, canalesSueltos } = import_react2.default.useMemo(() => {
+      const productores = inventory.components.filter((c) => c.kind === "provider" /* PROVIDER */ || c.kind === "pluvider" /* PLUVIDER */);
+      const idsProductores = new Set(productores.map((p) => p.id));
+      const canales = [...new Set(inventory.edges.map((e) => e.channelId))];
+      const vecinos = /* @__PURE__ */ new Set();
+      if (seleccionado) {
+        vecinos.add(seleccionado);
+        for (const e of inventory.edges) {
+          const origen = e.providerId;
+          const destino = `channel:${e.channelId}`;
+          if (origen === seleccionado) vecinos.add(destino);
+          if (destino === seleccionado) vecinos.add(origen);
+        }
+      }
+      const apagado = (id) => !seleccionado || vecinos.has(id) ? 1 : 0.25;
+      const nodos2 = [
+        ...productores.map((p) => ({
+          id: p.id,
+          position: { x: 0, y: 0 },
+          data: { label: p.displayName, esProductor: true, health: p.health, subscribers: p.subscribers, known: p.knownConsumers },
+          // Con el grafo en vertical, la arista tiene que salir por ABAJO y entrar por ARRIBA; si
+          // no, React Flow las saca por los lados y los cables dan un rodeo absurdo.
+          sourcePosition: import_react3.Position.Bottom,
+          targetPosition: import_react3.Position.Top,
+          style: {
+            background: colores.fondoNodo,
+            color: colores.texto,
+            border: `${seleccionado === p.id ? 3 : 2}px solid ${COLOR[p.health]}`,
+            borderRadius: 8,
+            width: 230,
+            fontSize: 12,
+            padding: 8,
+            opacity: apagado(p.id),
+            boxShadow: seleccionado === p.id ? `0 0 10px ${COLOR[p.health]}` : void 0
+          }
+        })),
+        ...canales.map((id) => ({
+          id: `channel:${id}`,
+          position: { x: 0, y: 0 },
+          data: { label: id, esProductor: false },
+          sourcePosition: import_react3.Position.Bottom,
+          targetPosition: import_react3.Position.Top,
+          style: {
+            background: colores.fondoCanal,
+            color: colores.texto,
+            border: `${seleccionado === `channel:${id}` ? 3 : 2}px solid ${colores.bordeCanal}`,
+            borderRadius: 8,
+            width: 230,
+            fontSize: 12,
+            padding: 8,
+            opacity: apagado(`channel:${id}`),
+            boxShadow: seleccionado === `channel:${id}` ? `0 0 10px ${colores.bordeCanal}` : void 0
+          }
+        }))
+      ];
+      const aristas2 = inventory.edges.map((e) => ({
+        id: `${e.providerId}->${e.channelId}`,
+        source: e.providerId,
+        target: `channel:${e.channelId}`,
+        /*
+                        QUIETA a propósito, aunque React Flow sepa animarlas.
+        
+                        Una línea en movimiento se lee como "por aquí está pasando algo ahora mismo", y eso no
+                        se sabe: lo único que dice esta arista es que la suscripción existe. Animarla sería el
+                        mismo error que poner un 0 donde no hay dato — parecería información y sería decoración.
+        
+                        Cuando los contadores de S4 midan caudal de verdad, el movimiento (o el grosor) podrá
+                        significar algo, y entonces se pone.
+                    */
+        ...(() => {
+          const tocaAlSeleccionado = Boolean(seleccionado) && (e.providerId === seleccionado || `channel:${e.channelId}` === seleccionado);
+          const viva = active.has(e.providerId);
+          const color = tocaAlSeleccionado ? "#7fd8b0" : viva ? "#5fc79a" : "#4a8";
+          const ancho = tocaAlSeleccionado ? 3 : viva ? 2 : 1;
+          const punta = 16 / ancho;
+          return {
+            // Mismo realce que el mapa de Iter: mas grosor, sombra y por delante de las demás.
+            style: tocaAlSeleccionado ? { stroke: color, strokeWidth: ancho, filter: `drop-shadow(0 0 3px ${color})`, opacity: 1 } : { stroke: color, strokeWidth: ancho, opacity: seleccionado ? 0.2 : 1 },
+            animated: viva,
+            zIndex: tocaAlSeleccionado ? 1e3 : viva ? 500 : 0,
+            markerEnd: { type: import_react3.MarkerType.ArrowClosed, color, width: punta, height: punta }
+          };
+        })()
+      })).filter((e) => idsProductores.has(e.source));
+      const canalesSueltos2 = inventory.edges.length - aristas2.length;
+      return { nodos: nodos2, aristas: aristas2, canalesSueltos: canalesSueltos2 };
+    }, [inventory, active, seleccionado, colores.fondoNodo, colores.fondoCanal, colores.texto, colores.bordeCanal]);
+    const firmaGrafo = nodos.map((n) => n.id).join("|") + "#" + aristas.map((a) => a.id).join("|");
+    import_react2.default.useEffect(() => {
+      let vigente = true;
+      colocar(nodos, aristas).then((pos) => {
+        if (vigente) setPosiciones(pos);
+      });
+      return () => {
+        vigente = false;
+      };
+    }, [firmaGrafo]);
+    if (inventory.edges.length === 0) {
+      return /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { sx: { p: 3 } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "body2", color: "text.secondary" }, "Nothing is subscribed to anything right now, so there is no graph to draw."));
+    }
+    if (!posiciones) {
+      return /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { sx: { p: 3 } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "body2", color: "text.secondary" }, "Laying out the graph\u2026"));
+    }
+    const colocados = nodos.map((n) => ({ ...n, position: posiciones[n.id] ?? { x: 0, y: 0 } }));
+    const anonimos = inventory.components.reduce((n, c) => {
+      if (c.subscribers === void 0 || c.knownConsumers === void 0) return n;
+      return n + Math.max(0, c.subscribers - c.knownConsumers);
+    }, 0);
+    return /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { sx: { height: "100%", display: "flex", flexDirection: "column", minHeight: 0 } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "row", spacing: 1, alignItems: "center", sx: { mb: 1 } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "caption", color: "text.secondary" }, "A line means ", /* @__PURE__ */ import_react2.default.createElement("b", null, "an active subscription"), ". A ", /* @__PURE__ */ import_react2.default.createElement("b", null, "moving line"), " means its producer is delivering right now \u2014 but not how much goes to each consumer: that is measured per component, not per line.", " ", "Click a node to highlight what it is connected to; click the background to clear.")), (anonimos > 0 || canalesSueltos > 0) && /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "row", spacing: 1, sx: { mb: 1 } }, anonimos > 0 && /* @__PURE__ */ import_react2.default.createElement(
+      import_material2.Chip,
+      {
+        size: "small",
+        variant: "outlined",
+        color: "default",
+        label: `${anonimos} consumer${anonimos > 1 ? "s" : ""} not shown \u2014 they subscribed without going through the core`
+      }
+    ), canalesSueltos > 0 && /* @__PURE__ */ import_react2.default.createElement(import_material2.Chip, { size: "small", variant: "outlined", label: `${canalesSueltos} subscription${canalesSueltos > 1 ? "s" : ""} to something no longer installed` })), /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { sx: {
+      flex: 1,
+      minHeight: 0,
+      border: 1,
+      borderColor: "divider",
+      borderRadius: 1,
+      "& .react-flow__controls": { boxShadow: "none" },
+      "& .react-flow__controls-button": {
+        background: theme.palette.background.paper,
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        fill: theme.palette.text.primary
+      },
+      "& .react-flow__controls-button:hover": { background: theme.palette.action.hover },
+      "& .react-flow__controls-button svg": { fill: theme.palette.text.primary },
+      "& .react-flow__attribution": { display: "none" }
+    } }, /* @__PURE__ */ import_react2.default.createElement(
+      import_react3.ReactFlow,
+      {
+        nodes: colocados,
+        edges: aristas,
+        fitView: true,
+        proOptions: { hideAttribution: true },
+        nodesConnectable: false,
+        edgesReconnectable: false,
+        connectOnClick: false,
+        deleteKeyCode: null,
+        onNodeClick: (_e, nodo) => setSeleccionado(nodo.id),
+        onPaneClick: () => setSeleccionado(void 0)
+      },
+      /* @__PURE__ */ import_react2.default.createElement(import_react3.Background, null),
+      /* @__PURE__ */ import_react2.default.createElement(import_react3.Controls, { showInteractive: false })
+    )));
+  };
+
+  // src/front/StatusTabContent.tsx
   var HEALTH_LABEL = {
+    ["active" /* ACTIVE */]: { label: "Active", color: "success" },
+    // Ocioso NO es un error, es información: funciona, pero no le sirve a nadie. De ahí 'default' y no
+    // 'warning' — quien mire tiene que poder distinguir "hay que arreglar esto" de "esto sobra".
+    ["idle" /* IDLE */]: { label: "Idle", color: "default" },
     ["instantiated" /* INSTANTIATED */]: { label: "Running", color: "success" },
     ["not-instantiated" /* NOT_INSTANTIATED */]: { label: "Not started", color: "warning" },
     ["pending-restart" /* PENDING_RESTART */]: { label: "Needs restart", color: "warning" },
@@ -114,12 +347,42 @@
     ["webhook" /* WEBHOOK */]: "Webhook",
     ["channel" /* CHANNEL */]: "Channel"
   };
+  var EmptyState = ({ title, detail }) => {
+    const ref = import_react4.default.useRef(null);
+    const [top, setTop] = import_react4.default.useState(0);
+    import_react4.default.useEffect(() => {
+      if (ref.current) setTop(ref.current.getBoundingClientRect().top);
+    });
+    return /* @__PURE__ */ import_react4.default.createElement(
+      import_material3.Stack,
+      {
+        ref,
+        alignItems: "center",
+        justifyContent: "center",
+        spacing: 1,
+        sx: { flex: 1, width: "100%", minHeight: `calc(100vh - ${top}px - 8px)`, px: 4, textAlign: "center" }
+      },
+      /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { variant: "h6", color: "text.secondary" }, title),
+      /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { variant: "body2", color: "text.secondary" }, detail)
+    );
+  };
   var StatusTabContent = (props) => {
     const data = props.channelObject.data;
-    const [filter, setFilter] = import_react2.default.useState("");
-    const boxRef = import_react2.default.useRef(null);
-    const [boxTop, setBoxTop] = import_react2.default.useState(0);
-    import_react2.default.useEffect(() => {
+    const [, forzarRender] = import_react4.default.useState(0);
+    const repintar = () => forzarRender((n) => n + 1);
+    const filter = data.filter;
+    const setFilter = (v) => {
+      data.filter = v;
+      repintar();
+    };
+    const vista = data.view;
+    const setVista = (v) => {
+      data.view = v;
+      repintar();
+    };
+    const boxRef = import_react4.default.useRef(null);
+    const [boxTop, setBoxTop] = import_react4.default.useState(0);
+    import_react4.default.useEffect(() => {
       if (boxRef.current) setBoxTop(boxRef.current.getBoundingClientRect().top);
     });
     const refresh = () => {
@@ -134,36 +397,93 @@
         command: "refresh" /* REFRESH */
       }));
     };
+    import_react4.default.useEffect(() => {
+      if (!data.autoRefresh) return;
+      const id = setInterval(() => refresh(), data.autoRefresh * 1e3);
+      return () => clearInterval(id);
+    }, [data.autoRefresh, props.channelObject.instanceId]);
     const inventory = data.inventory;
+    const tasaDe = (id, ahora) => {
+      if (ahora === void 0 || !data.previous || !inventory) return void 0;
+      const antes = data.previous.components.find((c) => c.id === id)?.events;
+      if (antes === void 0 || ahora < antes) return void 0;
+      const segundos = (inventory.takenAt - data.previous.takenAt) / 1e3;
+      if (segundos <= 0) return void 0;
+      return (ahora - antes) / segundos;
+    };
     const componentes = (inventory?.components ?? []).filter((c) => {
       if (!filter) return true;
       const f = filter.toLowerCase();
       return c.id.toLowerCase().includes(f) || KIND_LABEL[c.kind].toLowerCase().includes(f);
     });
-    const ORDEN = [
-      "failed" /* FAILED */,
-      "pending-restart" /* PENDING_RESTART */,
-      "not-instantiated" /* NOT_INSTANTIATED */,
-      "unknown" /* UNKNOWN */,
-      "instantiated" /* INSTANTIATED */
-    ];
+    const activos = /* @__PURE__ */ new Set();
+    for (const c of inventory?.components ?? []) {
+      if (c.events === void 0 || !data.previous) continue;
+      const antes = data.previous.components.find((p) => p.id === c.id)?.events;
+      if (antes !== void 0 && c.events !== antes) activos.add(c.id);
+    }
+    const ORDEN = {
+      ["failed" /* FAILED */]: 0,
+      ["pending-restart" /* PENDING_RESTART */]: 1,
+      ["not-instantiated" /* NOT_INSTANTIATED */]: 2,
+      ["idle" /* IDLE */]: 3,
+      ["unknown" /* UNKNOWN */]: 4,
+      ["instantiated" /* INSTANTIATED */]: 5,
+      ["active" /* ACTIVE */]: 6
+    };
     componentes.sort((a, b) => {
-      const d = ORDEN.indexOf(a.health) - ORDEN.indexOf(b.health);
+      const d = ORDEN[a.health] - ORDEN[b.health];
       if (d !== 0) return d;
       return a.kind === b.kind ? a.id.localeCompare(b.id) : a.kind.localeCompare(b.kind);
     });
     const fila = (c) => {
       const estado = HEALTH_LABEL[c.health];
-      return /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, { key: `${c.kind}-${c.id}` }, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { sx: { whiteSpace: "nowrap" } }, KIND_LABEL[c.kind]), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "body2", sx: { fontWeight: 500 } }, c.displayName)), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Chip, { size: "small", label: estado.label, color: estado.color, variant: c.health === "instantiated" /* INSTANTIATED */ ? "outlined" : "filled" })), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "body2", color: "text.secondary" }, c.reason ?? "")));
+      return /* @__PURE__ */ import_react4.default.createElement(import_material3.TableRow, { key: `${c.kind}-${c.id}` }, /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, { sx: { whiteSpace: "nowrap" } }, KIND_LABEL[c.kind]), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, null, /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { variant: "body2", sx: { fontWeight: 500 } }, c.displayName)), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, null, /* @__PURE__ */ import_react4.default.createElement(import_material3.Chip, { size: "small", label: estado.label, color: estado.color, variant: c.health === "active" /* ACTIVE */ ? "outlined" : "filled" })), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, { align: "right" }, /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" }, color: c.subscribers === void 0 ? "text.disabled" : "text.primary" }, c.subscribers === void 0 ? "\u2014" : c.subscribers)), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, { align: "right" }, /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" }, color: c.events === void 0 ? "text.disabled" : "text.primary" }, c.events === void 0 ? "\u2014" : c.events.toLocaleString()), (() => {
+        const t = tasaDe(c.id, c.events);
+        if (t === void 0) return null;
+        return /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { variant: "caption", color: "text.secondary", display: "block" }, t < 1 && t > 0 ? t.toFixed(2) : Math.round(t), "/s");
+      })()), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, null, /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { variant: "body2", color: "text.secondary" }, c.reason ?? "")));
     };
+    if (!data.started) {
+      return /* @__PURE__ */ import_react4.default.createElement(
+        EmptyState,
+        {
+          title: "Kwirth Status not started",
+          detail: "Start the channel (tab settings \u2699 \u2192 Start) to see what this Kwirth has inside."
+        }
+      );
+    }
     if (!inventory) {
-      return /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { sx: { p: 2 } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "body2", color: "text.secondary" }, "Waiting for the inventory\u2026"));
+      return /* @__PURE__ */ import_react4.default.createElement(
+        EmptyState,
+        {
+          title: "Waiting for the first snapshot",
+          detail: "The channel is running; the inventory should appear in a moment."
+        }
+      );
     }
-    return /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { sx: { p: 2, display: "flex", flexDirection: "column", minHeight: 0 } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 1 } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "subtitle2" }, "What this Kwirth has inside"), /* @__PURE__ */ import_react2.default.createElement(import_material2.Chip, { size: "small", variant: "outlined", label: `${inventory.components.length} components` }), /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { sx: { flexGrow: 1 } }), /* @__PURE__ */ import_react2.default.createElement(import_material2.TextField, { size: "small", placeholder: "Filter\u2026", value: filter, onChange: (e) => setFilter(e.target.value), sx: { width: 220 } }), /* @__PURE__ */ import_react2.default.createElement(import_material2.Tooltip, { title: "Take a new snapshot" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.IconButton, { size: "small", onClick: refresh }, /* @__PURE__ */ import_react2.default.createElement(import_icons.Refresh, { fontSize: "small" })))), /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1 } }, "Snapshot taken at ", new Date(inventory.takenAt).toLocaleTimeString(), " \u2014 it does not refresh on its own"), /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { ref: boxRef, sx: { display: "flex", flexDirection: "column", overflowY: "auto", overflowX: "hidden", width: "100%", flexGrow: 1, height: `calc(100vh - ${boxTop}px - 35px)` } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Table, { size: "small", stickyHeader: true }, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableHead, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Kind"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Name"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "State"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Why"))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableBody, null, componentes.map(fila)))), data.signals.length > 0 && /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { sx: { mt: 1 } }, data.signals.map((s, i) => /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { key: i, variant: "caption", color: "error", display: "block" }, s))));
+    return /* @__PURE__ */ import_react4.default.createElement(import_material3.Box, { sx: { p: 2, display: "flex", flexDirection: "column", minHeight: 0 } }, /* @__PURE__ */ import_react4.default.createElement(import_material3.Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 1 } }, /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { variant: "subtitle2" }, "What this Kwirth has inside"), /* @__PURE__ */ import_react4.default.createElement(import_material3.Chip, { size: "small", variant: "outlined", label: `${inventory.components.length} components` }), /* @__PURE__ */ import_react4.default.createElement(import_material3.Box, { sx: { flexGrow: 1 } }), /* @__PURE__ */ import_react4.default.createElement(import_material3.TextField, { size: "small", placeholder: "Filter\u2026", value: filter, onChange: (e) => setFilter(e.target.value), sx: { width: 220 } }), /* @__PURE__ */ import_react4.default.createElement(import_material3.Tooltip, { title: "Table view" }, /* @__PURE__ */ import_react4.default.createElement(import_material3.IconButton, { size: "small", color: vista === "table" ? "primary" : "default", "aria-label": "Table view", onClick: () => setVista("table") }, /* @__PURE__ */ import_react4.default.createElement(import_icons.ViewList, { fontSize: "small" }))), /* @__PURE__ */ import_react4.default.createElement(import_material3.Tooltip, { title: "Graph view" }, /* @__PURE__ */ import_react4.default.createElement(import_material3.IconButton, { size: "small", color: vista === "graph" ? "primary" : "default", "aria-label": "Graph view", onClick: () => setVista("graph") }, /* @__PURE__ */ import_react4.default.createElement(import_icons.Hub, { fontSize: "small" }))), /* @__PURE__ */ import_react4.default.createElement(
+      import_material3.Select,
+      {
+        size: "small",
+        value: data.autoRefresh,
+        "aria-label": "Auto refresh",
+        onChange: (e) => {
+          data.autoRefresh = Number(e.target.value);
+          repintar();
+        },
+        sx: { minWidth: 104, "& .MuiSelect-select": { py: 0.5, fontSize: "0.8rem" } }
+      },
+      /* @__PURE__ */ import_react4.default.createElement(import_material3.MenuItem, { value: 0 }, "Manual"),
+      /* @__PURE__ */ import_react4.default.createElement(import_material3.MenuItem, { value: 5 }, "Every 5s"),
+      /* @__PURE__ */ import_react4.default.createElement(import_material3.MenuItem, { value: 15 }, "Every 15s"),
+      /* @__PURE__ */ import_react4.default.createElement(import_material3.MenuItem, { value: 30 }, "Every 30s"),
+      /* @__PURE__ */ import_react4.default.createElement(import_material3.MenuItem, { value: 60 }, "Every minute")
+    ), /* @__PURE__ */ import_react4.default.createElement(import_material3.Tooltip, { title: "Take a new snapshot" }, /* @__PURE__ */ import_react4.default.createElement(import_material3.IconButton, { size: "small", onClick: refresh }, /* @__PURE__ */ import_react4.default.createElement(import_icons.Refresh, { fontSize: "small" })))), /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1 } }, "Snapshot taken at ", new Date(inventory.takenAt).toLocaleTimeString(), data.autoRefresh ? ` \u2014 refreshing every ${data.autoRefresh}s while this tab is open` : " \u2014 it does not refresh on its own", ".", " ", "Delivered counts since each component started; the rate is measured against your previous snapshot."), /* @__PURE__ */ import_react4.default.createElement(import_material3.Box, { ref: boxRef, sx: { display: "flex", flexDirection: "column", overflowY: vista === "table" ? "auto" : "hidden", overflowX: "hidden", width: "100%", flexGrow: 1, height: `calc(100vh - ${boxTop}px - 35px)` } }, vista === "graph" && /* @__PURE__ */ import_react4.default.createElement(StatusDiagram, { inventory, active: activos }), vista === "table" && /* @__PURE__ */ import_react4.default.createElement(import_material3.Table, { size: "small", stickyHeader: true }, /* @__PURE__ */ import_react4.default.createElement(import_material3.TableHead, null, /* @__PURE__ */ import_react4.default.createElement(import_material3.TableRow, null, /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, null, "Kind"), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, null, "Name"), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, null, "State"), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, { align: "right" }, "Consumers"), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, { align: "right" }, "Delivered"), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, null, "Why"))), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableBody, null, componentes.map(fila)))), data.signals.length > 0 && /* @__PURE__ */ import_react4.default.createElement(import_material3.Box, { sx: { mt: 1 } }, data.signals.map((s, i) => /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { key: i, variant: "caption", color: "error", display: "block" }, s))));
   };
 
   // src/front/StatusChannel.ts
-  var StatusSetup = () => import_react3.default.createElement("div", null, "Kwirth Status has nothing to configure: open it and it shows what this Kwirth has inside.");
+  var StatusSetup = () => import_react5.default.createElement("div", null, "Kwirth Status has nothing to configure: open it and it shows what this Kwirth has inside.");
   var StatusChannel = class {
     constructor() {
       this.setupVisible = false;
@@ -194,7 +514,7 @@
       return import_kwirth_common2.EInstanceConfigScope.NONE;
     }
     getChannelIcon() {
-      return import_react3.default.createElement(StatusIcon);
+      return import_react5.default.createElement(StatusIcon);
     }
     getSetupVisibility() {
       return this.setupVisible;
@@ -208,6 +528,7 @@
       switch (msg.type) {
         case import_kwirth_common2.EInstanceMessageType.DATA:
           if (msg.payloadType === "inventory" /* INVENTORY */ && msg.inventory) {
+            data.previous = data.inventory;
             data.inventory = msg.inventory;
           }
           return { action: import_kwirth_common_front.EChannelRefreshAction.REFRESH };
@@ -232,7 +553,21 @@
     startChannel(_channelObject) {
       return true;
     }
-    stopChannel(_channelObject) {
+    /*
+            Al parar hay que DECIRLO, y ademas tirar la foto.
+    
+            'started' lo ponia a true la respuesta del arranque y no lo bajaba nadie, asi que al parar el
+            canal la pestaña se quedaba enseñando el inventario como si nada. Y esa foto ya no vale: es de
+            un momento anterior y nada la va a refrescar mientras el canal este parado — dejarla puesta es
+            justo el tipo de dato viejo con pinta de actual que este plugin existe para evitar.
+        */
+    stopChannel(channelObject) {
+      const data = channelObject.data;
+      if (data) {
+        data.started = false;
+        data.inventory = void 0;
+        data.previous = void 0;
+      }
       return true;
     }
     pauseChannel(_channelObject) {
@@ -241,7 +576,13 @@
     continueChannel(_channelObject) {
       return true;
     }
-    socketDisconnected(_channelObject) {
+    /*
+        Si se cae el socket, el canal deja de recibir y la foto se queda congelada sin avisar. Se trata
+        igual que una parada: mejor decir que hay que arrancar que enseñar algo que ya no se actualiza.
+    */
+    socketDisconnected(channelObject) {
+      const data = channelObject.data;
+      if (data) data.started = false;
       return true;
     }
     /*

package/package.json

@@ -4,7 +4,7 @@
   "id": "status",
   "name": "@kwirthmagnify/kwirth-plugin-status",
   "displayName": "Kwirth Status",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A look inside Kwirth: what is installed, how it is doing and who consumes what",
   "icon": "<svg viewBox='0 0 24 24'><g fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.6' y='4.6' width='18.8' height='14.8' rx='2.2'/><path d='M6 12h2.6l1.5-3.4 2.6 6.8 1.5-3.4H18'/></g></svg>",
   "requiresRestart": false,