cdd-cli 3.1.7 → 3.2.0

package/src/components/ContainerRow.jsx

@@ -1,9 +1,8 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { Box, Text } from "ink";
-import { getStats } from "../helpers/dockerService/serviceComponents/containerStats";
-import { REFRESH_INTERVALS } from "../helpers/constants.js";
 import StatsBar from "./StatsBar.jsx";
 import PropTypes from 'prop-types';
+import { useContainerStats } from '../hooks/useContainerStats.js';
 
 const stateText = (state) => {
   if (state === "running") return { text: "🟢 RUNNING", color: "green" };
@@ -21,11 +20,7 @@ const stateText = (state) => {
  */
 export default function ContainerRow({ container, isSelected = false }) {
   const { id, name, image, state } = container;
-  const [stats, setStats] = useState({
-    cpuPercent: 0,
-    memPercent: 0,
-    netIO: { rx: 0, tx: 0 },
-  });
+  const { stats, statsError } = useContainerStats(id, state);
 
   // Format ports for display (no leading space to avoid layout shifts)
   const formatPorts = (ports) => {
@@ -42,36 +37,6 @@ export default function ContainerRow({ container, isSelected = false }) {
     return s.length > max ? s.slice(0, max - 1) + "…" : s;
   };
 
-  const [statsError, setStatsError] = useState("");
-  useEffect(() => {
-    if (state !== "running") return;
-    
-    let isMounted = true;
-    
-    const fetchStats = async () => {
-      try {
-        const s = await getStats(id);
-        if (isMounted) {
-          setStats(s);
-          setStatsError("");
-        }
-      } catch (err) {
-        if (isMounted) {
-          setStats({ cpuPercent: 0, memPercent: 0, netIO: { rx: 0, tx: 0 } });
-          setStatsError("Error fetching stats");
-        }
-      }
-    };
-    
-    fetchStats();
-  const timer = setInterval(fetchStats, REFRESH_INTERVALS.CONTAINER_STATS);
-    
-    return () => {
-      isMounted = false;
-      clearInterval(timer);
-    };
-  }, [id, state]);
-
   const stateInfo = stateText(state);
   return (
     <Box flexDirection="column" marginBottom={1}>

package/src/components/LogViewer.jsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { Text, useInput } from "ink";
-import { safeCall } from "../helpers/safeCall";
+import { Text } from "ink";
 import PropTypes from 'prop-types';
 
 /**
- * Log viewer overlay component. Shows the most recent lines and closes on ESC.
+ * Log viewer overlay component. Shows the most recent lines.
+ * Purely presentational — keyboard handling is centralized in useControls.
  *
  * @param {Object} props
  * @param {Array<string>} props.logs - Array of log lines
@@ -12,13 +12,7 @@ import PropTypes from 'prop-types';
  * @param {Object} [props.container] - Optional container metadata (used for title)
  * @returns {JSX.Element}
  */
-export default function LogViewer({ logs, onExit, container }) {
-  useInput((input, key) => {
-    if (key.escape) {
-      safeCall(onExit);
-    }
-  });
-
+export default function LogViewer({ logs, onExit: _onExit, container }) {
   const visibleLogs = logs.slice(-15);
 
   return (

package/src/helpers/constants.js

@@ -28,3 +28,23 @@ export const TIMEOUTS = {
   CONTAINER_OP: 30000,
   PULL_IMAGE: 300000,
 };
+
+/**
+ * List of well-known database image names (without tags or registry prefixes).
+ */
+export const DB_IMAGES = ["mysql", "mariadb", "postgres", "mongo", "mssql", "redis"];
+
+/**
+ * Per-image profiles with required env vars and default exposed port.
+ * Keys are normalized image names (no tag, no registry prefix).
+ *
+ * @type {Record<string, { requiredEnv: string[], defaultPort: string }>}
+ */
+export const IMAGE_PROFILES = {
+  mysql:    { requiredEnv: ["MYSQL_ROOT_PASSWORD"], defaultPort: "3306" },
+  mariadb:  { requiredEnv: ["MARIADB_ROOT_PASSWORD"], defaultPort: "3306" },
+  postgres: { requiredEnv: ["POSTGRES_PASSWORD"], defaultPort: "5432" },
+  mongo:    { requiredEnv: [], defaultPort: "27017" },
+  mssql:    { requiredEnv: ["ACCEPT_EULA", "SA_PASSWORD"], defaultPort: "1433" },
+  redis:    { requiredEnv: [], defaultPort: "6379" },
+};

package/src/helpers/containerOptionsBuilder.js

@@ -0,0 +1,42 @@
+/**
+ * Builds Docker container creation options from raw user inputs.
+ *
+ * This is a pure function — it has no side effects and calls no services.
+ * It mirrors exactly the option-building logic in useControls.js onCreate callback.
+ *
+ * @param {object} params
+ * @param {string} params.imageName          - Docker image name (e.g. "nginx:alpine")
+ * @param {string} [params.containerName]    - Optional container name
+ * @param {string} [params.portInput]        - Comma-separated host:container port pairs
+ *                                            (e.g. "8080:80,3000:3000")
+ * @param {string} [params.envInput]         - Comma-separated KEY=VALUE pairs
+ *                                            (e.g. "NODE_ENV=production,PORT=3000")
+ * @returns {object} Docker container options ready to pass to createContainer
+ */
+export function buildContainerOptions({ imageName: _imageName, containerName, portInput, envInput }) {
+  const env = (envInput || "").split(",").map(s => s.trim()).filter(Boolean);
+  const ports = (portInput || "").split(",").map(s => s.trim()).filter(Boolean);
+
+  const ExposedPorts = {};
+  const PortBindings = {};
+
+  ports.forEach(pair => {
+    const [host, cont] = pair.split(":");
+    if (!host || !cont) return;
+    const key = `${cont}/tcp`;
+    ExposedPorts[key] = {};
+    PortBindings[key] = PortBindings[key] || [];
+    PortBindings[key].push({ HostPort: `${host}` });
+  });
+
+  const options = {
+    Tty: true,
+  };
+
+  if (Object.keys(ExposedPorts).length) options.ExposedPorts = ExposedPorts;
+  if (Object.keys(PortBindings).length) options.HostConfig = { PortBindings };
+  if (env.length) options.Env = env;
+  if (containerName) options.name = containerName;
+
+  return options;
+}

package/src/helpers/dockerService/serviceComponents/containerActions.js

@@ -1,6 +1,6 @@
 import { docker } from "../dockerService.js";
 import { imageExists, pullImage } from "./imageUtils.js";
-import { TIMEOUTS } from "../../constants.js";
+import { TIMEOUTS, IMAGE_PROFILES } from "../../constants.js";
 import { logger } from "../../logger.js";
 
 /**
@@ -40,15 +40,33 @@ export async function removeContainer(containerId) {
   }
 }
 
+/**
+ * Normalize image name to base name (strips registry prefix and tag).
+ * e.g. "docker.io/library/postgres:16" → "postgres"
+ *
+ * @param {string} imageName - Raw image name
+ * @returns {string} Base name (lowercase)
+ */
+function normalizeImageName(imageName) {
+  if (!imageName) return "";
+  let name = imageName;
+  const slashIdx = name.lastIndexOf("/");
+  if (slashIdx !== -1) name = name.slice(slashIdx + 1);
+  const colonIdx = name.indexOf(":");
+  if (colonIdx !== -1) name = name.slice(0, colonIdx);
+  return name.toLowerCase();
+}
+
 /**
  * Create a new container from an image. If the image is missing locally, it will be pulled.
  *
  * @param {string} imageName - Image name (e.g. 'nginx:alpine')
  * @param {Object} [options] - Docker create options (Env, ExposedPorts, HostConfig, name, etc.)
- * @returns {Promise<string>} The created container id
+ * @param {Object} [imageProfiles] - Image profiles map for defaultPort fallback
+ * @returns {Promise<{id: string, ports: Array<{containerPort: string, hostPort: string, protocol: string, source: string}>}>}
  * @throws {Error} If image listing/pull or creation fails
  */
-export async function createContainer(imageName, options = {}) {
+export async function createContainer(imageName, options = {}, imageProfiles = IMAGE_PROFILES) {
   logger.info("Creating container from image %s", imageName);
   let exists;
   try {
@@ -75,6 +93,9 @@ export async function createContainer(imageName, options = {}) {
 
   const hasUserDefinedPorts = Boolean(createOpts.ExposedPorts && Object.keys(createOpts.ExposedPorts).length);
 
+  /** @type {Array<{containerPort: string, hostPort: string, protocol: string, source: string}>} */
+  const assignedPorts = [];
+
   if (!hasUserDefinedPorts) {
     try {
       const image = docker.getImage(imageName);
@@ -101,7 +122,6 @@ export async function createContainer(imageName, options = {}) {
         const pickNextAvailablePort = (base) => {
           const numericBase = Number.parseInt(base, 10);
           if (Number.isNaN(numericBase)) {
-            // If the base port is non-numeric, just return the base.
             if (!usedHostPorts.has(base)) {
               usedHostPorts.add(base);
               return base;
@@ -124,8 +144,20 @@ export async function createContainer(imageName, options = {}) {
         };
 
         const inspectData = await withTimeout(image.inspect(), TIMEOUTS.CONTAINER_OP);
-        const exposed = inspectData?.Config?.ExposedPorts || inspectData?.ContainerConfig?.ExposedPorts || {};
-        const exposedKeys = Object.keys(exposed || {});
+        let exposed = inspectData?.Config?.ExposedPorts || inspectData?.ContainerConfig?.ExposedPorts || {};
+        let exposedKeys = Object.keys(exposed || {});
+
+        // If no ExposedPorts in image, fall back to IMAGE_PROFILES defaultPort
+        if (!exposedKeys.length) {
+          const baseName = normalizeImageName(imageName);
+          const profile = imageProfiles[baseName];
+          if (profile && profile.defaultPort) {
+            const fallbackKey = `${profile.defaultPort}/tcp`;
+            exposed = { [fallbackKey]: {} };
+            exposedKeys = [fallbackKey];
+          }
+        }
+
         if (exposedKeys.length) {
           createOpts.ExposedPorts = createOpts.ExposedPorts || {};
           createOpts.HostConfig = { ...(createOpts.HostConfig || {}) };
@@ -135,9 +167,12 @@ export async function createContainer(imageName, options = {}) {
               createOpts.ExposedPorts[portKey] = exposed[portKey] || {};
             }
             if (!createOpts.HostConfig.PortBindings[portKey] || !createOpts.HostConfig.PortBindings[portKey].length) {
-              const containerPort = portKey.split("/")[0];
+              const parts = portKey.split("/");
+              const containerPort = parts[0];
+              const protocol = parts[1] || "tcp";
               const hostPort = pickNextAvailablePort(containerPort);
               createOpts.HostConfig.PortBindings[portKey] = [{ HostPort: hostPort }];
+              assignedPorts.push({ containerPort, hostPort, protocol, source: "auto" });
             }
           });
         }
@@ -145,12 +180,24 @@ export async function createContainer(imageName, options = {}) {
     } catch (err) {
       logger.warn("Could not inspect image %s for default ports", imageName, err);
     }
+  } else {
+    // User-defined ports: collect them with source: "user"
+    const portBindings = createOpts.HostConfig?.PortBindings || {};
+    Object.entries(portBindings).forEach(([portKey, bindings]) => {
+      const parts = portKey.split("/");
+      const containerPort = parts[0];
+      const protocol = parts[1] || "tcp";
+      (bindings || []).forEach((b) => {
+        assignedPorts.push({ containerPort, hostPort: b.HostPort, protocol, source: "user" });
+      });
+    });
   }
+
   try {
     const container = await withTimeout(docker.createContainer(createOpts), TIMEOUTS.CONTAINER_OP);
     const containerId = container.id || container.Id;
     logger.info("Created container %s from image %s", containerId, imageName);
-    return container.id || container.Id;
+    return { id: containerId, ports: assignedPorts };
   } catch (err) {
     logger.error("Failed to create container from image %s", imageName, err);
     throw new Error('Error creating container: ' + err.message);

package/src/helpers/validationHelpers.js

@@ -19,28 +19,85 @@ export function validatePorts(portInput) {
   return !invalid;
 }
 
+/**
+ * Normalize an image name to its base name (strips registry prefix and tag).
+ * e.g. "docker.io/library/postgres:16-alpine" → "postgres"
+ *
+ * @param {string} imageName - Raw image name from user
+ * @returns {string} Base image name (lowercase)
+ */
+function normalizeImageName(imageName) {
+  if (!imageName) return "";
+  // Remove registry prefix (anything before the last / when it contains a dot or colon before the /)
+  let name = imageName;
+  const slashIdx = name.lastIndexOf("/");
+  if (slashIdx !== -1) {
+    name = name.slice(slashIdx + 1);
+  }
+  // Remove tag
+  const colonIdx = name.indexOf(":");
+  if (colonIdx !== -1) {
+    name = name.slice(0, colonIdx);
+  }
+  return name.toLowerCase();
+}
+
 /**
  * Validate environment variable input as comma-separated VAR=value pairs.
- * Empty or whitespace-only input is considered valid (no env vars).
- * Variable names must start with a letter or underscore and contain only
- * alphanumeric characters and underscores.
+ *
+ * When called with 3 arguments (envInput, imageName, imageProfiles), performs
+ * contextual validation: checks that all required env vars for the given image
+ * are present and non-empty. Returns an object { valid, errors, parsedEnv }.
+ *
+ * When called with 1 argument (legacy), returns a boolean for backward compatibility.
  *
  * @param {string} envInput - Comma-separated environment variable assignments
- * @returns {boolean} True when all env var assignments are valid, false otherwise
+ * @param {string} [imageName] - Optional Docker image name for contextual validation
+ * @param {Object} [imageProfiles] - Optional map of image profiles (from constants.js)
+ * @returns {boolean|{valid: boolean, errors: string[], parsedEnv: Record<string,string>}}
  */
-export function validateEnvVars(envInput) {
-  if (!envInput || !envInput.trim()) return true; // Empty is valid
-
-  const vars = envInput.split(",").map(v => v.trim()).filter(Boolean);
-  const invalid = vars.find(v => {
-    const parts = v.split("=");
-    // Must have at least VAR=value format
-    if (parts.length < 2) return true;
-    const varName = parts[0].trim();
-    // Variable names should be alphanumeric with underscores
-    if (!/^[A-Z_][A-Z0-9_]*$/i.test(varName)) return true;
-    return false;
-  });
+export function validateEnvVars(envInput, imageName, imageProfiles) {
+  const contextual = imageName !== undefined && imageProfiles !== undefined;
 
-  return !invalid;
+  // Parse: split on FIRST '=' only
+  const parsedEnv = {};
+  const syntaxErrors = [];
+
+  if (envInput && envInput.trim()) {
+    const vars = envInput.split(",").map(v => v.trim()).filter(Boolean);
+    for (const v of vars) {
+      const eqIdx = v.indexOf("=");
+      if (eqIdx === -1) {
+        syntaxErrors.push(`"${v}" is missing an '=' sign`);
+        continue;
+      }
+      const varName = v.slice(0, eqIdx).trim();
+      const varValue = v.slice(eqIdx + 1);
+      if (!/^[A-Z_][A-Z0-9_]*$/i.test(varName)) {
+        syntaxErrors.push(`"${varName}" is not a valid variable name`);
+        continue;
+      }
+      parsedEnv[varName] = varValue;
+    }
+  }
+
+  if (!contextual) {
+    // Legacy: return boolean
+    return syntaxErrors.length === 0;
+  }
+
+  // Contextual: also check required env vars from the profile
+  const errors = [...syntaxErrors];
+  const baseName = normalizeImageName(imageName);
+  const profile = imageProfiles[baseName];
+
+  if (profile && profile.requiredEnv && profile.requiredEnv.length) {
+    for (const required of profile.requiredEnv) {
+      if (!parsedEnv[required] || parsedEnv[required].trim() === "") {
+        errors.push(`Missing required env var: ${required}`);
+      }
+    }
+  }
+
+  return { valid: errors.length === 0, errors, parsedEnv };
 }

package/src/hooks/creation/useContainerCreation.js

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { validatePorts } from "../../helpers/validationHelpers.js";
+import { validatePorts, validateEnvVars } from "../../helpers/validationHelpers.js";
+import { IMAGE_PROFILES } from "../../helpers/constants.js";
 import { safeCall } from "../../helpers/safeCall.js";
 
 /**
@@ -9,10 +10,11 @@ import { safeCall } from "../../helpers/safeCall.js";
  * @param {Object} params
  * @param {Function} params.onCreate - Callback when creation is confirmed
  * @param {Function} params.onCancel - Callback when creation is cancelled
- * @param {Array<string>} params.dbImages - List of DB image names for env var warning
+ * @param {Array<string>} params.dbImages - List of DB image names for env var warning (legacy)
+ * @param {Object} [params.imageProfiles] - Image profiles map for contextual validation
  * @returns {Object} Creation state, setters, and helpers
  */
-export function useContainerCreation({ onCreate, onCancel, dbImages = [] }) {
+export function useContainerCreation({ onCreate, onCancel, dbImages = [], imageProfiles = IMAGE_PROFILES }) {
   const [step, setStep] = useState(0); // 0: image, 1: name, 2: ports, 3: env
   const [imageName, setImageName] = useState("");
   const [containerName, setContainerName] = useState("");
@@ -51,7 +53,13 @@ export function useContainerCreation({ onCreate, onCancel, dbImages = [] }) {
       }
       setStep(3);
       const isDb = dbImages.some(db => imageName.trim().toLowerCase().includes(db));
-      if (isDb) {
+      // Check if the image has a profile with required env vars
+      const baseName = imageName.trim().toLowerCase().split(":")[0].split("/").pop();
+      const profile = imageProfiles[baseName];
+      if (profile && profile.requiredEnv && profile.requiredEnv.length) {
+        setMessage(`Required env vars for ${baseName}: ${profile.requiredEnv.join(", ")}. Enter as VAR=val,VAR2=val2`);
+        setMessageColor("yellow");
+      } else if (isDb) {
         setMessage("Warning: This image usually requires environment variables (e.g. MYSQL_ROOT_PASSWORD=my-secret-pw for MySQL, POSTGRES_PASSWORD=yourpassword for Postgres). Enter them as VAR=val,VAR2=val2 or leave empty and press Enter.");
         setMessageColor("yellow");
       } else {
@@ -61,6 +69,13 @@ export function useContainerCreation({ onCreate, onCancel, dbImages = [] }) {
       return;
     }
     if (step === 3) {
+      // Contextual env validation using image profiles
+      const result = validateEnvVars(envInput, imageName, imageProfiles);
+      if (!result.valid) {
+        setMessage(result.errors.join(" | "));
+        setMessageColor("red");
+        return;
+      }
       // Final step: call onCreate with all data (safely)
       safeCall(onCreate, { imageName, containerName, portInput, envInput });
     }
@@ -80,6 +95,20 @@ export function useContainerCreation({ onCreate, onCancel, dbImages = [] }) {
     safeCall(onCancel);
   }
 
+  /**
+   * Resets all creation state to initial values without triggering onCancel.
+   * Used by the command router when the user presses 'c' to open the creation wizard.
+   */
+  function resetCreation() {
+    setStep(0);
+    setImageName("");
+    setContainerName("");
+    setPortInput("");
+    setEnvInput("");
+    setMessage("Insert the name of the image to create: ");
+    setMessageColor("yellow");
+  }
+
   return {
     step,
     setStep,
@@ -97,5 +126,6 @@ export function useContainerCreation({ onCreate, onCancel, dbImages = [] }) {
     setMessageColor,
     nextStep,
     cancelCreation,
+    resetCreation,
   };
 }

package/src/hooks/debug/useDebugLogs.js

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { logger } from '../../helpers/logger.js';
+
+export function useDebugLogs() {
+  const [showDebugLogs, setShowDebugLogs] = useState(false);
+  const [debugLogs, setDebugLogs] = useState([]);
+
+  useEffect(() => {
+    const unsubscribe = logger.subscribe((entry) => {
+      setDebugLogs((prev) => {
+        const extras = (entry.args || []).map((arg) => {
+          if (typeof arg === "string") return arg;
+          if (typeof arg === "number" || typeof arg === "boolean") return String(arg);
+          try {
+            return JSON.stringify(arg);
+          } catch (err) {
+            return "[unserializable]";
+          }
+        }).filter(Boolean);
+        const line = extras.length ? `${entry.formatted} ${extras.join(" ")}` : entry.formatted;
+        const next = [...prev, line];
+        return next.slice(-200);
+      });
+    });
+    return unsubscribe;
+  }, []);
+
+  return { showDebugLogs, setShowDebugLogs, debugLogs };
+}

package/src/hooks/navigation/useContainerSelection.js

@@ -0,0 +1,25 @@
+import { useState, useCallback } from 'react';
+
+export function useContainerSelection(total) {
+  const [selected, setSelected] = useState(0);
+
+  const handleNavigation = useCallback((input, key) => {
+    if (total === 0) {
+      return false;
+    }
+
+    if (key.upArrow) {
+      setSelected((i) => (i === 0 ? total - 1 : i - 1));
+      return true;
+    }
+
+    if (key.downArrow) {
+      setSelected((i) => (i === total - 1 ? 0 : i + 1));
+      return true;
+    }
+
+    return false;
+  }, [total]);
+
+  return { selected, setSelected, handleNavigation };
+}

package/src/hooks/useContainerCommandRouter.js

@@ -0,0 +1,110 @@
+import { useCallback } from "react";
+
+/**
+ * Hook responsible solely for routing Docker action keystrokes to the correct handler.
+ * Has no domain state of its own — it delegates every side-effect to its dependencies.
+ *
+ * Handled keys:
+ *   i  — start container
+ *   p  — stop container
+ *   r  — restart container
+ *   e  — request erase confirmation
+ *   l  — open logs viewer and start log stream
+ *   c  — open container creation wizard (reset + activate)
+ *   d  — toggle debug log panel
+ *
+ * @param {Object} params
+ * @param {Object} params.actions       - API from useContainerActions
+ * @param {Array<Object>} params.containers - Current list of Docker containers
+ * @param {number} params.selected      - Index of the currently selected container
+ * @param {Object} params.creation      - API from useContainerCreation (must expose resetCreation)
+ * @param {Object} params.logsViewer    - API from useLogsViewer
+ * @param {Function} params.startLogsStream - Starts the log stream for a container id
+ * @param {Function} params.onStartErase    - Callback: activates confirmErase state
+ * @param {Function} params.onToggleDebug   - Callback: toggles showDebugLogs state
+ * @param {Function} params.onStartCreate   - Callback: sets creatingContainer = true
+ * @returns {{ handleDockerCommands: Function }}
+ */
+export function useContainerCommandRouter({
+  actions,
+  containers,
+  selected,
+  creation,
+  logsViewer,
+  startLogsStream,
+  onStartErase,
+  onToggleDebug,
+  onStartCreate,
+}) {
+  const handleDockerCommands = useCallback((input) => {
+    const container = containers[selected];
+
+    if (input === "i") {
+      actions.handleAction({
+        actionFn: async (id) => await actions.startContainer(id),
+        actionLabel: "Starting",
+        selected,
+        stateCheck: (c) =>
+          (c.state === "running" || c.status === "running") &&
+          "Container is already running.",
+      });
+      return true;
+    }
+
+    if (input === "p") {
+      actions.handleAction({
+        actionFn: async (id) => await actions.stopContainer(id),
+        actionLabel: "Stopping",
+        selected,
+        stateCheck: (c) =>
+          (c.state === "exited" ||
+            c.status === "exited" ||
+            c.state === "stopped" ||
+            c.status === "stopped") &&
+          "Container is already stopped.",
+      });
+      return true;
+    }
+
+    if (input === "r") {
+      actions.handleAction({
+        actionFn: async (id) => await actions.restartContainer(id),
+        actionLabel: "Restarting",
+        selected,
+      });
+      return true;
+    }
+
+    if (input === "e") {
+      if (!container) {
+        return true;
+      }
+      onStartErase();
+      return true;
+    }
+
+    if (input === "l") {
+      if (!container) {
+        return true;
+      }
+      logsViewer.openLogs();
+      startLogsStream(container.id);
+      return true;
+    }
+
+    if (input === "c") {
+      onStartCreate();
+      creation.resetCreation();
+      return true;
+    }
+
+    if (input === "d") {
+      onToggleDebug();
+      return true;
+    }
+
+    return false;
+  }, [actions, containers, creation, logsViewer, onStartCreate, onStartErase, onToggleDebug, selected, startLogsStream]);
+
+  return { handleDockerCommands };
+}

package/src/hooks/useContainerStats.js

@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react';
+import { getStats } from '../helpers/dockerService/serviceComponents/containerStats.js';
+import { REFRESH_INTERVALS } from '../helpers/constants.js';
+
+const DEFAULT_STATS = { cpuPercent: 0, memPercent: 0, netIO: { rx: 0, tx: 0 } };
+
+export function useContainerStats(id, state) {
+  const [stats, setStats] = useState(DEFAULT_STATS);
+  const [statsError, setStatsError] = useState('');
+
+  useEffect(() => {
+    if (state !== 'running') {
+      setStats(DEFAULT_STATS);
+      setStatsError('');
+      return;
+    }
+
+    let isMounted = true;
+
+    const fetchStats = async () => {
+      try {
+        const s = await getStats(id);
+        if (isMounted) {
+          setStats(s);
+          setStatsError('');
+        }
+      } catch (err) {
+        if (isMounted) {
+          setStats(DEFAULT_STATS);
+          setStatsError('Error fetching stats');
+        }
+      }
+    };
+
+    fetchStats();
+    const timer = setInterval(fetchStats, REFRESH_INTERVALS.CONTAINER_STATS);
+    return () => {
+      isMounted = false;
+      clearInterval(timer);
+    };
+  }, [id, state]);
+
+  return { stats, statsError };
+}