cdd-cli 2.0.3 → 3.0.0

package/PLAN_KEYBINDINGS_Y_REALTIME.md

@@ -0,0 +1,260 @@
+# Plan de Implementación: Keybindings y Funcionalidades Avanzadas para CDD
+
+Este documento te guiará paso a paso para agregar keybindings y la integración de logs y estadísticas en tiempo real a tu proyecto CLI/CDD. Además, incluye recomendaciones de investigación para que puedas aprender y experimentar por ti mismo.
+
+---
+
+## 1. Keybindings (Atajos de Teclado)
+
+### Objetivo
+Permitir la navegación y control de contenedores Docker usando el teclado.
+
+### Acciones y Sugerencias
+- **↑ / ↓**: Navegar entre contenedores
+- **Enter**: Seleccionar contenedor
+- **L**: Mostrar logs en vivo
+- **S**: Mostrar estadísticas
+- **R**: Reiniciar contenedor
+- **I**: Iniciar contenedor
+- **P**: Pausar/Detener contenedor
+- **Q**: Salir
+
+### ¿Cómo hacerlo?
+
+### Usando Ink para Keybindings y UI CLI React
+
+Si ya tienes Ink instalado, es la mejor opción para construir tu CLI interactiva con React. Ink te permite crear componentes reutilizables, manejar el estado y capturar eventos de teclado de forma reactiva, todo en la terminal.
+
+#### Funciones y hooks clave de Ink:
+
+- **`<Text>` y `<Box>`**: Componentes básicos para mostrar texto y organizar la UI en la terminal.
+  - **Por qué:** Permiten estructurar y dar formato a la salida, igual que en React web.
+
+- **`useInput`**: Hook para capturar cualquier tecla presionada por el usuario.
+  - **Cómo:**
+    ```js
+    import { useInput } from 'ink';
+    useInput((input, key) => {
+      if (key.upArrow) { /* lógica para ↑ */ }
+      if (key.downArrow) { /* lógica para ↓ */ }
+      if (input === 'q') { /* salir */ }
+      // ...otros keybindings
+
+    ### ¿Cómo hacerlo?
+
+    #### Usando Ink para Keybindings y UI CLI React
+
+    Si ya tienes Ink instalado, es la mejor opción para construir tu CLI interactiva con React. Ink te permite crear componentes reutilizables, manejar el estado y capturar eventos de teclado de forma reactiva, todo en la terminal.
+
+    ##### Funciones y hooks clave de Ink:
+
+    - **`<Text>` y `<Box>`**: Componentes básicos para mostrar texto y organizar la UI en la terminal.
+      - **Por qué:** Permiten estructurar y dar formato a la salida, igual que en React web.
+
+    - **`useInput`**: Hook para capturar cualquier tecla presionada por el usuario.
+      - **Cómo:**
+        ```js
+        import { useInput } from 'ink';
+        useInput((input, key) => {
+          if (key.upArrow) { /* lógica para ↑ */ }
+          if (key.downArrow) { /* lógica para ↓ */ }
+          if (input === 'q') { /* salir */ }
+          // ...otros keybindings
+        });
+        ```
+      - **Por qué:** Es la forma más sencilla y reactiva de manejar atajos de teclado en la terminal con Ink.
+
+    - **Estado React**: Usa `useState` y `useEffect` igual que en React web para manejar selección, logs, stats, etc.
+      - **Por qué:** Permite que la UI se actualice automáticamente cuando cambian los datos o el estado.
+
+    ##### Ejemplo básico de navegación con Ink:
+
+    ```js
+    import React, { useState } from 'react';
+    import { render, Box, Text, useInput } from 'ink';
+
+    const containers = ['web', 'db', 'cache'];
+
+    const App = () => {
+      const [selected, setSelected] = useState(0);
+
+      useInput((input, key) => {
+        if (key.upArrow) setSelected(i => (i === 0 ? containers.length - 1 : i - 1));
+        if (key.downArrow) setSelected(i => (i === containers.length - 1 ? 0 : i + 1));
+        if (input === 'q') process.exit();
+        // ...otros keybindings
+      });
+
+      return (
+        <Box flexDirection="column">
+          {containers.map((name, i) => (
+            <Text key={name} color={i === selected ? 'green' : undefined}>
+              {i === selected ? '>' : ' '} {name}
+            </Text>
+          ))}
+          <Text>Usa ↑/↓ para navegar, Q para salir</Text>
+        </Box>
+      );
+    };
+
+    render(<App />);
+    ```
+
+    ##### ¿Por qué Ink?
+    - Permite una experiencia de desarrollo y mantenimiento muy similar a React web.
+    - Facilita la captura de teclas y el renderizado dinámico sin dependencias extra.
+    - Es ideal para CLIs interactivas, menús, dashboards y visualización en tiempo real.
+
+    Consulta la [documentación oficial de Ink](https://github.com/vadimdemedes/ink) para más ejemplos y detalles.
+#### Ejemplo básico de navegación con Ink:
+
+```js
+import React, { useState } from 'react';
+import { render, Box, Text, useInput } from 'ink';
+
+const containers = ['web', 'db', 'cache'];
+
+const App = () => {
+  const [selected, setSelected] = useState(0);
+
+  useInput((input, key) => {
+    if (key.upArrow) setSelected(i => (i === 0 ? containers.length - 1 : i - 1));
+    if (key.downArrow) setSelected(i => (i === containers.length - 1 ? 0 : i + 1));
+    if (input === 'q') process.exit();
+    // ...otros keybindings
+  });
+
+  return (
+    <Box flexDirection="column">
+      {containers.map((name, i) => (
+        <Text key={name} color={i === selected ? 'green' : undefined}>
+          {i === selected ? '>' : ' '} {name}
+        </Text>
+      ))}
+      <Text>Usa ↑/↓ para navegar, Q para salir</Text>
+    </Box>
+  );
+};
+
+render(<App />);
+```
+
+#### ¿Por qué Ink?
+- Permite una experiencia de desarrollo y mantenimiento muy similar a React web.
+- Facilita la captura de teclas y el renderizado dinámico sin dependencias extra.
+- Es ideal para CLIs interactivas, menús, dashboards y visualización en tiempo real.
+
+Consulta la [documentación oficial de Ink](https://github.com/vadimdemedes/ink) para más ejemplos y detalles.
+
+---
+
+## 2. Integración de Logs y Stats en Tiempo Real
+
+### Logs en Vivo
+- Utiliza el comando `docker logs -f <container>` para obtener logs en streaming.
+- Investiga cómo manejar streams en Node.js con `child_process.spawn`.
+- Si quieres mostrar los logs en la UI, revisa cómo actualizar el estado en tiempo real.
+
+### Estadísticas en Tiempo Real
+- Usa el comando `docker stats <container> --no-stream` para obtener stats puntuales, o sin `--no-stream` para flujo continuo.
+- Investiga cómo parsear la salida de estos comandos y mostrarla en la UI.
+- Considera usar la librería [dockerode](https://github.com/apocas/dockerode) para interactuar con Docker desde Node.js de forma programática.
+
+---
+
+## 3. Recomendaciones de Investigación
+
+- **Node.js y Streams**: Aprende sobre el módulo `stream` y cómo manejar datos en tiempo real.
+- **Captura de Teclas en Terminal**: Explora cómo funcionan los eventos de teclado en aplicaciones CLI.
+- **Dockerode**: Investiga esta librería para controlar Docker desde Node.js.
+- **React y Eventos Globales**: Si tu UI es React, revisa cómo manejar eventos globales de teclado.
+- **Websockets**: Si decides separar backend y frontend, aprende sobre websockets para comunicación en tiempo real.
+- **UX en CLI**: Investiga buenas prácticas para interfaces de usuario en la terminal (ejemplo: [blessed](https://github.com/chjj/blessed)).
+
+
+## 4. Siguiente Paso Sugerido
+
+
+## 5. Recursos Útiles
+
+
+---
+
+## 6. Planificación Detallada Paso a Paso
+
+### Paso 1: Definir el tipo de interfaz
+- Si tu aplicación es CLI y ya tienes Ink, úsalo como framework principal para toda la UI y keybindings.
+- Ink te permite crear componentes, manejar el estado y capturar teclas de forma reactiva, todo en la terminal.
+- Si necesitas algo que Ink no cubre, evalúa otras librerías, pero prioriza Ink para evitar dependencias innecesarias.
+
+### Paso 2: Investigar y elegir librerías para keybindings
+- Para CLI con Ink, usa el hook `useInput` para capturar teclas y manejar la navegación y acciones.
+- Haz pruebas simples con `useInput` para capturar teclas y mostrar la tecla presionada o cambiar el estado.
+
+### Paso 3: Implementar navegación entre contenedores (↑/↓)
+- Usa `useState` para el índice seleccionado.
+- Renderiza la lista de contenedores con `<Text>` y `<Box>`, resaltando el seleccionado.
+- Usa `useInput` para capturar las flechas y actualizar el índice.
+- Haz que la navegación sea cíclica para mejor UX.
+
+### Paso 4: Implementar selección de contenedor (Enter)
+- Al presionar Enter, guarda el contenedor seleccionado en el estado.
+- Muestra un menú de acciones o detalles usando componentes condicionales de Ink.
+
+### Paso 5: Implementar acciones sobre el contenedor
+- L: Mostrar logs en vivo
+- S: Mostrar estadísticas en tiempo real
+- R: Reiniciar contenedor
+- I: Iniciar contenedor
+- P: Pausar/Detener contenedor
+- Q: Salir
+- Para cada acción:
+  - Usa `useInput` para detectar la tecla y cambiar el estado de la vista.
+  - Crea una función que ejecute el comando Docker correspondiente usando `child_process` o `dockerode`.
+  - Muestra el resultado en la UI usando componentes Ink.
+
+### Paso 6: Integrar logs en tiempo real
+- Usa `docker logs -f <container>` con `child_process.spawn` para obtener logs en streaming.
+- Lee los datos del stream y actualiza el estado con los logs recibidos.
+- Renderiza los logs en tiempo real usando `<Text>` y el estado de React.
+- Permite salir de la vista de logs con una tecla usando `useInput`.
+
+### Paso 7: Integrar estadísticas en tiempo real
+- Usa `docker stats <container>` o la API de `dockerode` para obtener stats.
+- Actualiza el estado periódicamente (con `setInterval` o un efecto) y renderiza los stats en la UI.
+- Permite salir de la vista de stats con una tecla usando `useInput`.
+
+### Paso 8: Mejorar la experiencia de usuario
+- Agrega mensajes de ayuda o leyenda de teclas usando `<Text>`.
+- Maneja errores de Docker y muestra mensajes claros en la UI.
+- Permite refrescar la lista de contenedores con una tecla usando `useInput`.
+
+### Paso 9: Refactorizar y documentar
+- Organiza el código en componentes Ink y hooks reutilizables.
+- Documenta cada función y componente.
+- Escribe un README con ejemplos de uso y keybindings.
+
+### Paso 10: Pruebas y mejoras
+- Prueba todos los keybindings y flujos en la terminal.
+- Pide feedback a otros usuarios.
+- Agrega nuevas funcionalidades según necesidades.
+
+---
+
+## 7. Consejos para Aprender y Disfrutar el Proceso
+- Investiga cada librería antes de usarla.
+- Haz pruebas pequeñas y ve integrando poco a poco.
+- Lee la documentación oficial de Docker y Node.js.
+- No dudes en romper cosas: ¡así se aprende!
+- Si te atoras, busca ejemplos en GitHub o StackOverflow.
+
+---
+- [Node.js Child Process](https://nodejs.org/api/child_process.html)
+- [Docker CLI Reference](https://docs.docker.com/engine/reference/commandline/cli/)
+- [Inquirer.js](https://www.npmjs.com/package/inquirer)
+- [dockerode](https://github.com/apocas/dockerode)
+- [blessed](https://github.com/chjj/blessed)
+
+---
+
+¡Diviértete programando y aprendiendo! Si tienes dudas sobre algún punto, investiga primero y luego pregunta para profundizar.

package/dist/App.js

@@ -1,28 +1,42 @@
 import React from "react";
 import { Box, Text, Spacer } from "ink";
 import { useContainers } from "./hooks/useContainers.js";
-import ContainerRow from "./components/ContainerRow.js";
+import { useControls } from "./hooks/useControls.js";
+import ContainerList from "./components/ContainerList.js";
+import MessageFeedback from "./components/MessageFeedback.js";
 import Header from "./components/Header.js";
+import LogViewer from "./components/LogViewer.js";
 export default function App() {
   var _useContainers = useContainers(),
     containers = _useContainers.containers;
-  return /*#__PURE__*/React.createElement(Box, {
+  var _useControls = useControls(containers),
+    selected = _useControls.selected,
+    message = _useControls.message,
+    messageColor = _useControls.messageColor,
+    showLogs = _useControls.showLogs,
+    logs = _useControls.logs,
+    exitLogs = _useControls.exitLogs;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
     flexDirection: "column",
     borderStyle: "round",
     borderColor: "cyan",
     padding: 1
   }, /*#__PURE__*/React.createElement(Header, {
     count: containers.length
-  }), /*#__PURE__*/React.createElement(Text, null, " "), containers.length === 0 ? /*#__PURE__*/React.createElement(Text, null, "No containers found") : containers.map(function (container) {
-    return /*#__PURE__*/React.createElement(ContainerRow, {
-      key: container.id,
-      container: container
-    });
-  }), /*#__PURE__*/React.createElement(Spacer, null), /*#__PURE__*/React.createElement(Box, {
-    marginTop: 1
+  }), /*#__PURE__*/React.createElement(Text, null, " "), containers.length === 0 ? /*#__PURE__*/React.createElement(Text, null, "No containers found") : /*#__PURE__*/React.createElement(ContainerList, {
+    containers: containers,
+    selected: selected
+  }), /*#__PURE__*/React.createElement(Spacer, null), /*#__PURE__*/React.createElement(MessageFeedback, {
+    message: message,
+    color: messageColor
+  }), /*#__PURE__*/React.createElement(Text, null, "Use \u2191/\u2193 for navigation"), /*#__PURE__*/React.createElement(Text, null, "\u2022I to initiate selected container"), /*#__PURE__*/React.createElement(Text, null, "\u2022P to stop selected container"), /*#__PURE__*/React.createElement(Text, null, "\u2022L to view logs of selected container"), /*#__PURE__*/React.createElement(Text, null, "\u2022Q to quit"), /*#__PURE__*/React.createElement(Box, {
+    justifyContent: "flex-end",
+    width: "100%"
   }, /*#__PURE__*/React.createElement(Text, {
     dimColor: true
-  }, "Press Ctrl+C to exit")), /*#__PURE__*/React.createElement(Text, {
-    dimColor: true
-  }, "Crafted by Carlos Cochero \u2022 2025"));
+  }, "Crafted by Carlos Cochero \u2022 2025"))), showLogs && /*#__PURE__*/React.createElement(LogViewer, {
+    logs: logs,
+    onExit: exitLogs,
+    container: containers[selected]
+  }));
 }

package/dist/components/ContainerList.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Box, Text } from "ink";
+import ContainerRow from "./ContainerRow.js";
+export default function ContainerList(_ref) {
+  var containers = _ref.containers,
+    selected = _ref.selected;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, containers.map(function (container, i) {
+    return /*#__PURE__*/React.createElement(Box, {
+      key: container.id,
+      flexDirection: "row",
+      alignItems: "center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      color: i === selected ? "green" : undefined
+    }, i === selected ? "➤" : "  "), /*#__PURE__*/React.createElement(ContainerRow, {
+      container: container,
+      isSelected: i === selected
+    }));
+  }));
+}

package/dist/components/ContainerRow.js

@@ -11,7 +11,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React, { useState, useEffect } from "react";
 import { Box, Text } from "ink";
 import chalk from "chalk";
-import { getStats } from "../dockerService.js";
+import { getStats } from "../helpers/dockerService.js";
 import StatsBar from "./StatsBar.js";
 var colorByState = function colorByState(state) {
   if (state === "running") return chalk.greenBright("🟢 RUNNING");
@@ -67,8 +67,8 @@ export default function ContainerRow(_ref) {
   return /*#__PURE__*/React.createElement(Box, {
     flexDirection: "column",
     marginBottom: 1
-  }, /*#__PURE__*/React.createElement(Text, null, chalk.cyan(name.padEnd(20)), " ", chalk.gray(image.padEnd(20)), " ", state === "running" ? chalk.greenBright("🟢 RUNNING") : chalk.redBright("\uD83D\uDD34 ".concat(state.toUpperCase()))), state === "running" && /*#__PURE__*/React.createElement(StatsBar, {
+  }, /*#__PURE__*/React.createElement(Text, null, chalk.cyan(name.padEnd(20)), " ", chalk.gray(image.padEnd(20)), " ", state === "running" ? chalk.greenBright("🟢 RUNNING") : chalk.redBright("\uD83D\uDD34 ".concat(state.toUpperCase())), "  ", chalk.yellow(container.ports), "  ", state === "running" && /*#__PURE__*/React.createElement(StatsBar, {
     cpu: parseFloat(stats.cpuPercent),
     mem: parseFloat(stats.memPercent)
-  }));
+  })));
 }

package/dist/components/LogViewer.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Text, useInput } from "ink";
+export default function LogViewer(_ref) {
+  var logs = _ref.logs,
+    onExit = _ref.onExit,
+    container = _ref.container;
+  useInput(function (input, key) {
+    if (key.escape) {
+      onExit();
+    }
+  });
+  var visibleLogs = logs.slice(-15);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    color: "green"
+  }, (container === null || container === void 0 ? void 0 : container.name) || "Container", " logs, press ESC to exit"), visibleLogs.length === 0 ? /*#__PURE__*/React.createElement(Text, {
+    dimColor: true
+  }, "No logs...") : visibleLogs.map(function (line, idx) {
+    return /*#__PURE__*/React.createElement(Text, {
+      key: idx
+    }, line);
+  }));
+}

package/dist/components/MessageFeedback.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { Box, Text } from "ink";
+export default function MessageFeedback(_ref) {
+  var message = _ref.message,
+    color = _ref.color;
+  if (!message) return null;
+  return /*#__PURE__*/React.createElement(Box, {
+    marginBottom: 1
+  }, /*#__PURE__*/React.createElement(Text, {
+    color: color
+  }, message));
+}

package/dist/helpers/actionHelpers.js

@@ -0,0 +1,61 @@
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+// Helper para manejar acciones docker con feedback visual y validación
+export function handleAction(_x) {
+  return _handleAction.apply(this, arguments);
+}
+function _handleAction() {
+  _handleAction = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(_ref) {
+    var containers, selected, actionFn, actionLabel, setMessage, setMessageColor, stateCheck, c, _t;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.p = _context.n) {
+        case 0:
+          containers = _ref.containers, selected = _ref.selected, actionFn = _ref.actionFn, actionLabel = _ref.actionLabel, setMessage = _ref.setMessage, setMessageColor = _ref.setMessageColor, stateCheck = _ref.stateCheck;
+          c = containers[selected];
+          if (c) {
+            _context.n = 1;
+            break;
+          }
+          return _context.a(2);
+        case 1:
+          if (!(stateCheck && stateCheck(c))) {
+            _context.n = 2;
+            break;
+          }
+          setMessage(stateCheck(c));
+          setMessageColor("red");
+          setTimeout(function () {
+            return setMessage("");
+          }, 2000);
+          return _context.a(2);
+        case 2:
+          setMessage("".concat(actionLabel, " container..."));
+          setMessageColor("green");
+          _context.p = 3;
+          _context.n = 4;
+          return actionFn(c.id);
+        case 4:
+          setMessage("".concat(actionLabel, " container..."));
+          setMessageColor("green");
+          setTimeout(function () {
+            return setMessage("");
+          }, 3000);
+          _context.n = 6;
+          break;
+        case 5:
+          _context.p = 5;
+          _t = _context.v;
+          setMessage("Failed to ".concat(actionLabel.toLowerCase(), " container."));
+          setMessageColor("red");
+          setTimeout(function () {
+            return setMessage("");
+          }, 3000);
+        case 6:
+          return _context.a(2);
+      }
+    }, _callee, null, [[3, 5]]);
+  }));
+  return _handleAction.apply(this, arguments);
+}

package/dist/helpers/dockerActions.js

@@ -0,0 +1,51 @@
+import { spawn } from "child_process";
+
+/**
+ * Ejecuta una acción de Docker sobre un contenedor y maneja feedback visual.
+ * @param {Object} params
+ * @param {Array} params.containers - Lista de contenedores.
+ * @param {number} params.selected - Índice del contenedor seleccionado.
+ * @param {string} params.action - Acción docker (start, stop, restart).
+ * @param {string} params.actionLabel - Texto para feedback (Starting, Stopping, etc).
+ * @param {Function} params.setMessage - Setter de mensaje visual.
+ * @param {Function} params.setMessageColor - Setter de color del mensaje.
+ */
+export function handleDockerAction(_ref) {
+  var containers = _ref.containers,
+    selected = _ref.selected,
+    action = _ref.action,
+    actionLabel = _ref.actionLabel,
+    setMessage = _ref.setMessage,
+    setMessageColor = _ref.setMessageColor;
+  if (containers[selected]) {
+    var c = containers[selected];
+    var id = c.id || c.name;
+    // Validación de estado
+    if (action === "start" && (c.state === "running" || c.status === "running")) {
+      setMessage("Container is already running.");
+      setMessageColor("red");
+      setTimeout(function () {
+        return setMessage("");
+      }, 2000);
+      return;
+    }
+    if (action === "stop" && (c.state === "exited" || c.status === "exited" || c.state === "stopped" || c.status === "stopped")) {
+      setMessage("Container is already stopped.");
+      setMessageColor("red");
+      setTimeout(function () {
+        return setMessage("");
+      }, 2000);
+      return;
+    }
+    setMessage("".concat(actionLabel, " container..."));
+    setMessageColor("green");
+    var child = spawn("docker", [action, id]);
+    child.on("close", function () {
+      setMessage("".concat(actionLabel, " container..."));
+      setMessageColor("green");
+      setTimeout(function () {
+        return setMessage("");
+      }, 3000);
+    });
+  }
+}