cdd-cli 3.0.1 → 3.1.1

package/dist/hooks/useControls.js

@@ -2,78 +2,231 @@ function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArra
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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); }); }; }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import React, { useState, useRef } from "react";
+import React from "react";
+import { useContainerActions } from "./creation/useContainerActions.js";
+import { useContainerCreation } from "./creation/useContainerCreation.js";
+import { useLogsViewer } from "./creation/useLogsViewer.js";
 import { useInput } from "ink";
-import { startContainer, stopContainer, restartContainer, getLogsStream } from "../helpers/dockerService.js";
-import { handleAction } from "../helpers/actionHelpers.js";
-import { exitWithMessage } from "../helpers/exitWithMessage.js";
+import { getLogsStream } from "../helpers/dockerService/serviceComponents/containerLogs.js";
+import { createContainer as svcCreateContainer } from "../helpers/dockerService/serviceComponents/containerActions.js";
+
+// Principal hook to manage user inputs and control the app state
 export function useControls() {
   var containers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
-  var _useState3 = useState(""),
-    _useState4 = _slicedToArray(_useState3, 2),
-    message = _useState4[0],
-    setMessage = _useState4[1];
-  var _useState5 = useState("yellow"),
-    _useState6 = _slicedToArray(_useState5, 2),
-    messageColor = _useState6[0],
-    setMessageColor = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    showLogs = _useState8[0],
-    setShowLogs = _useState8[1];
-  var _useState9 = useState([]),
-    _useState0 = _slicedToArray(_useState9, 2),
-    logs = _useState0[0],
-    setLogs = _useState0[1];
-  var logsStreamRef = useRef(null);
+  var _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selected = _React$useState2[0],
+    setSelected = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    creatingContainer = _React$useState4[0],
+    setCreatingContainer = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    confirmErase = _React$useState6[0],
+    setConfirmErase = _React$useState6[1];
   var total = containers.length;
 
-  // Handler para salir de la vista de logs
-  var exitLogs = function exitLogs() {
-    setShowLogs(false);
-    setLogs([]);
-    if (logsStreamRef.current) {
-      var _logsStreamRef$curren, _logsStreamRef$curren2;
-      (_logsStreamRef$curren = (_logsStreamRef$curren2 = logsStreamRef.current).destroy) === null || _logsStreamRef$curren === void 0 || _logsStreamRef$curren.call(_logsStreamRef$curren2);
-      logsStreamRef.current = null;
-    }
-  };
+  // Modular hooks
+  var actions = useContainerActions({
+    containers: containers
+  });
+  var creation = useContainerCreation({
+    onCreate: function () {
+      var _onCreate = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(_ref) {
+        var imageName, containerName, portInput, envInput, env, ports, ExposedPorts, PortBindings, options, id, _t;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.p = _context.n) {
+            case 0:
+              imageName = _ref.imageName, containerName = _ref.containerName, portInput = _ref.portInput, envInput = _ref.envInput;
+              // Build Docker options
+              env = (envInput || "").split(",").map(function (s) {
+                return s.trim();
+              }).filter(Boolean);
+              ports = (portInput || "").split(",").map(function (s) {
+                return s.trim();
+              }).filter(Boolean);
+              ExposedPorts = {};
+              PortBindings = {};
+              ports.forEach(function (pair) {
+                var _pair$split = pair.split(":"),
+                  _pair$split2 = _slicedToArray(_pair$split, 2),
+                  host = _pair$split2[0],
+                  cont = _pair$split2[1];
+                if (!host || !cont) return;
+                var key = "".concat(cont, "/tcp");
+                ExposedPorts[key] = {};
+                PortBindings[key] = PortBindings[key] || [];
+                PortBindings[key].push({
+                  HostPort: "".concat(host)
+                });
+              });
+              options = {
+                Tty: true
+              };
+              if (Object.keys(ExposedPorts).length) options.ExposedPorts = ExposedPorts;
+              if (Object.keys(PortBindings).length) options.HostConfig = {
+                PortBindings: PortBindings
+              };
+              if (env.length) options.Env = env;
+              if (containerName) options.name = containerName;
+              actions.setMessage("Creating container ".concat(imageName, "..."));
+              actions.setMessageColor("yellow");
+              _context.p = 1;
+              _context.n = 2;
+              return svcCreateContainer(imageName, options);
+            case 2:
+              id = _context.v;
+              actions.setMessage("Created container ".concat(id));
+              actions.setMessageColor("green");
+              _context.n = 4;
+              break;
+            case 3:
+              _context.p = 3;
+              _t = _context.v;
+              actions.setMessage("Error creating container: ".concat(_t.message));
+              actions.setMessageColor("red");
+            case 4:
+              _context.p = 4;
+              setCreatingContainer(false);
+              return _context.f(4);
+            case 5:
+              return _context.a(2);
+          }
+        }, _callee, null, [[1, 3, 4, 5]]);
+      }));
+      function onCreate(_x) {
+        return _onCreate.apply(this, arguments);
+      }
+      return onCreate;
+    }(),
+    onCancel: function onCancel() {
+      return setCreatingContainer(false);
+    },
+    dbImages: ["mysql", "mariadb", "postgres", "mongo", "mssql", "redis"]
+  });
+  var logsViewer = useLogsViewer();
+
+  // Handler to exit logs (delegated to logsViewer)
+  var exitLogs = logsViewer.closeLogs;
   useInput(function (input, key) {
-    if (showLogs) {
+    // Confirmación de borrado
+    if (confirmErase) {
+      if (input === "y" || input === "Y") {
+        actions.handleAction({
+          actionFn: function () {
+            var _actionFn = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(id) {
+              return _regenerator().w(function (_context2) {
+                while (1) switch (_context2.n) {
+                  case 0:
+                    _context2.n = 1;
+                    return actions.removeContainer(id);
+                  case 1:
+                    return _context2.a(2, _context2.v);
+                }
+              }, _callee2);
+            }));
+            function actionFn(_x2) {
+              return _actionFn.apply(this, arguments);
+            }
+            return actionFn;
+          }(),
+          actionLabel: "Erasing",
+          selected: selected
+        });
+        setConfirmErase(false);
+        actions.setMessageColor("yellow");
+        return;
+      } else if (input === "n" || input === "N" || key.escape) {
+        setConfirmErase(false);
+        actions.setMessage("");
+        actions.setMessageColor("");
+        return;
+      } else {
+        actions.setMessage("Are you sure you want to erase this container? (y/n)");
+        actions.setMessageColor("yellow");
+        return;
+      }
+    }
+
+    // Logs viewer
+    if (logsViewer.showLogs) {
       if (input === "q" || key.escape) {
-        exitLogs();
+        logsViewer.closeLogs();
+      }
+      return;
+    }
+
+    // Container creation flow: delegate input to creation hook
+    if (creatingContainer) {
+      var step = creation.step;
+      var appendCharToField = function appendCharToField(setter, value, ch) {
+        setter((value || "") + ch);
+      };
+      // Escape -> cancel
+      if (key.escape) {
+        creation.cancelCreation();
+        setCreatingContainer(false);
+        return;
+      }
+      // Enter -> next step
+      if (input === "\r" || input === "\n") {
+        creation.nextStep();
+        return;
+      }
+      // Backspace/Delete support
+      if (key.backspace || key["delete"]) {
+        if (step === 0) creation.setImageName(function (v) {
+          return (v || "").slice(0, -1);
+        });
+        if (step === 1) creation.setContainerName(function (v) {
+          return (v || "").slice(0, -1);
+        });
+        if (step === 2) creation.setPortInput(function (v) {
+          return (v || "").slice(0, -1);
+        });
+        if (step === 3) creation.setEnvInput(function (v) {
+          return (v || "").slice(0, -1);
+        });
+        return;
       }
+      // Printable character input (append)
+      if (input && input.length === 1 && !key.ctrl && !key.meta) {
+        if (step === 0) appendCharToField(creation.setImageName, creation.imageName, input);
+        if (step === 1) appendCharToField(creation.setContainerName, creation.containerName, input);
+        if (step === 2) appendCharToField(creation.setPortInput, creation.portInput, input);
+        if (step === 3) appendCharToField(creation.setEnvInput, creation.envInput, input);
+        return;
+      }
+      // Otherwise ignore
       return;
     }
 
     //==========================================================
     // Menu Navigation
     //==========================================================
-    if (key.upArrow && total > 0) {
-      setSelected(function (i) {
-        return i === 0 ? total - 1 : i - 1;
-      });
-    }
-    if (key.downArrow && total > 0) {
-      setSelected(function (i) {
-        return i === total - 1 ? 0 : i + 1;
-      });
-    }
+    if (key.upArrow && total > 0) setSelected(function (i) {
+      return i === 0 ? total - 1 : i - 1;
+    });
+    if (key.downArrow && total > 0) setSelected(function (i) {
+      return i === total - 1 ? 0 : i + 1;
+    });
     if (input === "q") {
-      exitWithMessage({
-        setMessage: setMessage,
-        setMessageColor: setMessageColor
-      });
+      actions.setMessage("Exiting...");
+      actions.setMessageColor("yellow");
+      setTimeout(function () {
+        return process.exit(0);
+      }, 500);
       return;
     }
 
@@ -81,62 +234,129 @@ export function useControls() {
     // Docker commands
     //==========================================================
     if (input === "i") {
-      handleAction({
-        containers: containers,
-        selected: selected,
-        actionFn: startContainer,
+      actions.handleAction({
+        actionFn: function () {
+          var _actionFn2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(id) {
+            return _regenerator().w(function (_context3) {
+              while (1) switch (_context3.n) {
+                case 0:
+                  _context3.n = 1;
+                  return actions.startContainer(id);
+                case 1:
+                  return _context3.a(2, _context3.v);
+              }
+            }, _callee3);
+          }));
+          function actionFn(_x3) {
+            return _actionFn2.apply(this, arguments);
+          }
+          return actionFn;
+        }(),
         actionLabel: "Starting",
-        setMessage: setMessage,
-        setMessageColor: setMessageColor,
+        selected: selected,
         stateCheck: function stateCheck(c) {
           return (c.state === "running" || c.status === "running") && "Container is already running.";
         }
       });
     }
     if (input === "p") {
-      handleAction({
-        containers: containers,
-        selected: selected,
-        actionFn: stopContainer,
+      actions.handleAction({
+        actionFn: function () {
+          var _actionFn3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(id) {
+            return _regenerator().w(function (_context4) {
+              while (1) switch (_context4.n) {
+                case 0:
+                  _context4.n = 1;
+                  return actions.stopContainer(id);
+                case 1:
+                  return _context4.a(2, _context4.v);
+              }
+            }, _callee4);
+          }));
+          function actionFn(_x4) {
+            return _actionFn3.apply(this, arguments);
+          }
+          return actionFn;
+        }(),
         actionLabel: "Stopping",
-        setMessage: setMessage,
-        setMessageColor: setMessageColor,
+        selected: selected,
         stateCheck: function stateCheck(c) {
           return (c.state === "exited" || c.status === "exited" || c.state === "stopped" || c.status === "stopped") && "Container is already stopped.";
         }
       });
     }
     if (input === "r") {
-      handleAction({
-        containers: containers,
-        selected: selected,
-        actionFn: restartContainer,
+      actions.handleAction({
+        actionFn: function () {
+          var _actionFn4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(id) {
+            return _regenerator().w(function (_context5) {
+              while (1) switch (_context5.n) {
+                case 0:
+                  _context5.n = 1;
+                  return actions.restartContainer(id);
+                case 1:
+                  return _context5.a(2, _context5.v);
+              }
+            }, _callee5);
+          }));
+          function actionFn(_x5) {
+            return _actionFn4.apply(this, arguments);
+          }
+          return actionFn;
+        }(),
         actionLabel: "Restarting",
-        setMessage: setMessage,
-        setMessageColor: setMessageColor
+        selected: selected
       });
     }
+    if (input === "e" && containers[selected]) {
+      setConfirmErase(true);
+      actions.setMessage("Are you sure you want to erase this container? (y/n)");
+      actions.setMessageColor("yellow");
+      return;
+    }
     if (input === "l" && containers[selected]) {
-      setShowLogs(true);
-      setLogs([]);
+      logsViewer.openLogs();
       getLogsStream(containers[selected].id, function (data) {
-        return setLogs(function (prev) {
+        return logsViewer.setLogs(function (prev) {
           return [].concat(_toConsumableArray(prev), _toConsumableArray(data.split("\n").filter(Boolean)));
         });
       }, function () {}, function (err) {
-        return setLogs(function (prev) {
+        return logsViewer.setLogs(function (prev) {
           return [].concat(_toConsumableArray(prev), ["Error: ".concat(err.message)]);
         });
       });
+      return;
+    }
+    if (input === "c") {
+      setCreatingContainer(true);
+      creation.setStep(0);
+      creation.setImageName("");
+      creation.setContainerName("");
+      creation.setPortInput("");
+      creation.setEnvInput("");
+      creation.setMessage("Insert the name of the image to create: ");
+      creation.setMessageColor("yellow");
     }
   });
   return {
     selected: selected,
     setSelected: setSelected,
-    message: message,
-    messageColor: messageColor,
-    showLogs: showLogs,
-    logs: logs,
-    exitLogs: exitLogs
+    // Map messaging to creation when creating, otherwise to actions
+    message: creatingContainer ? creation.message : actions.message,
+    messageColor: creatingContainer ? creation.messageColor : actions.messageColor,
+    showLogs: logsViewer.showLogs,
+    logs: logsViewer.logs,
+    exitLogs: exitLogs,
+    creatingContainer: creatingContainer,
+    // Expose creation fields in the shape App expects
+    creationStep: creation.step,
+    imageNameInput: creation.imageName,
+    containerNameInput: creation.containerName,
+    portInput: creation.portInput,
+    envInput: creation.envInput,
+    creation: creation,
+    actions: actions,
+    logsViewer: logsViewer,
+    confirmErase: confirmErase
   };
 }

package/dist/hooks/useLogsStream.js

@@ -5,7 +5,7 @@ function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Sym
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import React, { useRef, useCallback } from "react";
-import { getLogsStream } from "../helpers/dockerService.js";
+import { getLogsStream } from "../helpers/dockerService/serviceComponents/containerLogs.js";
 export function useLogsStream() {
   var logsStreamRef = useRef(null);
   var openLogs = useCallback(function (containerId, setLogs) {

package/dist/index.js

@@ -1,4 +1,15 @@
 #!/usr/bin/env node
+
+/**
+ * Entry point for the CDD CLI application.
+ * Punto de entrada para la aplicación CLI de CDD.
+ *
+ * @module index
+ * @example
+ * // EN: Run the CLI
+ * // ES: Ejecutar el CLI
+ * node index.js
+ */
 import React from "react";
 import { render } from "ink";
 import App from './App.js';

package/esbuild.config.cjs

@@ -0,0 +1,11 @@
+const { build } = require('esbuild');
+
+build({
+  entryPoints: ['src/index.js'],
+  bundle: true,
+  minify: true,
+  platform: 'node',
+  outfile: 'dist/cdd.bundle.js',
+  sourcemap: true,
+  external: ['dockerode', 'ink'], 
+}).catch(() => process.exit(1));

package/jest.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]sx?$': 'babel-jest'
+  }
+};

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "cdd-cli",
-  "version": "3.0.1",
+  "version": "3.1.1",
   "description": "CLI Docker Dashboard",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "babel src --out-dir dist --extensions .js,.jsx && node fix-imports.cjs"
+  "test": "node --experimental-vm-modules ./node_modules/.bin/jest --runInBand",
+  "build": "babel src --out-dir dist --extensions .js,.jsx && node fix-imports.cjs",
+  "changes": "npm run build && node dist/index.js"
   },
   "keywords": [],
   "author": "",
@@ -23,8 +24,11 @@
   "devDependencies": {
     "@babel/cli": "^7.28.3",
     "@babel/core": "^7.28.4",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
-    "babel-plugin-module-resolver": "^5.0.2"
+    "babel-plugin-module-resolver": "^5.0.2",
+    "esbuild": "^0.25.11",
+    "jest": "^29.6.1",
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.22.5",
+    "babel-jest": "^29.6.1"
   }
 }

package/src/App.jsx

@@ -11,17 +11,33 @@
  */
 import React from "react";
 import { Box, Text, Spacer } from "ink";
-import { useContainers } from "./hooks/useContainers";
-import { useControls } from "./hooks/useControls";
-import ContainerList from "./components/ContainerList";
-import MessageFeedback from "./components/MessageFeedback";
-import Header from "./components/Header";
-import LogViewer from "./components/LogViewer";
+import { useContainers } from "./hooks/useContainers.js";
+import { useControls } from "./hooks/useControls.js";
+import ContainerSection from "./components/ContainerSection.jsx";
+import MessageFeedback from "./components/MessageFeedback.jsx";
+import Header from "./components/Header.jsx";
+import LogViewer from "./components/LogViewer.jsx";
+import ContainerCreationPrompt from "./components/ContainerCreationPrompt.jsx";
+import UsageMenu from "./components/UsageMenu.jsx";
+import Footer from "./components/Footer.jsx";
 
 export default function App() {
   const { containers } = useContainers();
-  const { selected, message, messageColor, showLogs, logs, exitLogs } =
-    useControls(containers);
+  const controls = useControls(containers);
+
+  if (controls.creatingContainer) {
+    return (
+      <ContainerCreationPrompt
+        step={controls.creationStep}
+        imageName={controls.imageNameInput}
+        containerName={controls.containerNameInput}
+        portInput={controls.portInput}
+        envInput={controls.envInput}
+        message={controls.message}
+        messageColor={controls.messageColor}
+      />
+    );
+  }
 
   return (
     <>
@@ -33,27 +49,17 @@ export default function App() {
       >
         <Header count={containers.length} />
         <Text> </Text>
-        {containers.length === 0 ? (
-          <Text>No containers found</Text>
-        ) : (
-          <ContainerList containers={containers} selected={selected} />
-        )}
+        <ContainerSection containers={containers} selected={controls.selected} />
         <Spacer />
-        <MessageFeedback message={message} color={messageColor} />
-        <Text>Use ↑/↓ for navigation</Text>
-        <Text>•I to initiate selected container</Text>
-        <Text>•P to stop selected container</Text>
-        <Text>•L to view logs of selected container</Text>
-        <Text>•Q to quit</Text>
-        <Box justifyContent="flex-end" width="100%">
-          <Text dimColor>Crafted by Carlos Cochero • 2025</Text>
-        </Box>
+        <MessageFeedback message={controls.message} color={controls.messageColor} />
+        <UsageMenu />
+        <Footer />
       </Box>
-      {showLogs && (
+      {controls.showLogs && (
         <LogViewer
-          logs={logs}
-          onExit={exitLogs}
-          container={containers[selected]}
+          logs={controls.logs}
+          onExit={controls.exitLogs}
+          container={containers[controls.selected]}
         />
       )}
     </>

package/src/components/ContainerCreationPrompt.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { PromptField, PromptMessage } from "./PromptField.jsx";
+
+export default function ContainerCreationPrompt(props) {
+  const { step, imageName, containerName, portInput, envInput, message, messageColor } = props;
+  const prompts = [
+    {
+      label: "Name of the image to create (e.g., nginx:latest):",
+      value: imageName,
+      required: true,
+    },
+    {
+      label: "Name of the container (optional):",
+      value: containerName,
+      required: false,
+    },
+    {
+      label: "Ports (optional, format 8080:80,443:443):",
+      value: portInput,
+      required: false,
+    },
+    {
+      label: "Environment variables (optional, format VAR1=val1,VAR2=val2):",
+      value: envInput,
+      required: false,
+    },
+  ];
+  const { label, value, required } = prompts[step] || {};
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="yellow" padding={1}>
+      <PromptField label={label} value={value} required={required} />
+      <PromptMessage message={message} color={messageColor} />
+      <Text dimColor>Press Enter to continue, Escape to cancel</Text>
+    </Box>
+  );
+}