cdd-cli 3.2.0 → 3.2.2

package/src/hooks/creation/useContainerCreation.js

@@ -1,7 +1,12 @@
-import { useState } from "react";
-import { validatePorts, validateEnvVars } from "../../helpers/validationHelpers.js";
-import { IMAGE_PROFILES } from "../../helpers/constants.js";
-import { safeCall } from "../../helpers/safeCall.js";
+import { useState } from 'react';
+import {
+  validatePorts,
+  validateEnvVars,
+} from '../../helpers/validationHelpers.js';
+import { IMAGE_PROFILES } from '../../helpers/constants.js';
+import { safeCall } from '../../helpers/safeCall.js';
+
+const MAX_VISIBLE = 6;
 
 /**
  * Custom hook to manage the container creation flow, step by step.
@@ -14,14 +19,78 @@ import { safeCall } from "../../helpers/safeCall.js";
  * @param {Object} [params.imageProfiles] - Image profiles map for contextual validation
  * @returns {Object} Creation state, setters, and helpers
  */
-export function useContainerCreation({ onCreate, onCancel, dbImages = [], imageProfiles = IMAGE_PROFILES }) {
+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("");
-  const [portInput, setPortInput] = useState("");
-  const [envInput, setEnvInput] = useState("");
-  const [message, setMessage] = useState("");
-  const [messageColor, setMessageColor] = useState("yellow");
+  const [imageName, setImageName] = useState('');
+  const [containerName, setContainerName] = useState('');
+  const [portInput, setPortInput] = useState('');
+  const [envInput, setEnvInput] = useState('');
+  const [message, setMessage] = useState('');
+  const [messageColor, setMessageColor] = useState('yellow');
+
+  // Autocomplete state
+  const [suggestions, setSuggestions] = useState([]);
+  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
+  const [visibleOffset, setVisibleOffset] = useState(0);
+
+  /**
+   * Updates the image name input and recalculates autocomplete suggestions.
+   * Resets selectedSuggestionIndex to -1 on every keystroke.
+   *
+   * @param {string} value - New raw image name typed by user
+   */
+  function updateImageInput(value) {
+    setImageName(value);
+    setSelectedSuggestionIndex(-1);
+    setVisibleOffset(0);
+    if (!value.trim()) {
+      setSuggestions([]);
+      return;
+    }
+    const lower = value.toLowerCase();
+    const matches = Object.keys(imageProfiles).filter((key) =>
+      key.includes(lower)
+    );
+    setSuggestions(matches);
+  }
+
+  /**
+   * Moves the suggestion selection up (-1) or down (+1).
+   * Clamps index to [-1, suggestions.length - 1].
+   * Adjusts visibleOffset to keep selected item in the visible window.
+   *
+   * @param {number} direction - -1 (up) or 1 (down)
+   */
+  function moveSuggestionSelection(direction) {
+    setSelectedSuggestionIndex((prev) => {
+      const next = Math.max(-1, Math.min(suggestions.length - 1, prev + direction));
+      // Adjust visibleOffset to keep selected in view
+      setVisibleOffset((offset) => {
+        if (next < offset) return Math.max(0, next);
+        if (next >= offset + MAX_VISIBLE) return next - MAX_VISIBLE + 1;
+        return offset;
+      });
+      return next;
+    });
+  }
+
+  /**
+   * Applies the currently focused suggestion to imageName.
+   * Does NOT advance the step. Clears suggestions after applying.
+   */
+  function applyFocusedSuggestion() {
+    if (selectedSuggestionIndex < 0 || selectedSuggestionIndex >= suggestions.length) return;
+    const chosen = suggestions[selectedSuggestionIndex];
+    setImageName(chosen);
+    setSuggestions([]);
+    setSelectedSuggestionIndex(-1);
+    setVisibleOffset(0);
+  }
 
   /**
    * Advances to the next step, with validation and feedback.
@@ -29,42 +98,70 @@ export function useContainerCreation({ onCreate, onCancel, dbImages = [], imageP
   function nextStep() {
     if (step === 0) {
       if (!imageName.trim()) {
-        setMessage("Image name cannot be empty.");
-        setMessageColor("red");
+        setMessage('Image name cannot be empty.');
+        setMessageColor('red');
         return;
       }
       setStep(1);
-      setMessage("Optional: Enter container name or leave empty and press Enter");
-      setMessageColor("yellow");
+      setMessage(
+        'Optional: Enter container name or leave empty and press Enter'
+      );
+      setMessageColor('yellow');
       return;
     }
     if (step === 1) {
       setStep(2);
-      setMessage("Optional: Enter ports (format 8080:80,443:443) or leave empty and press Enter");
-      setMessageColor("yellow");
+      setMessage(
+        'Optional: Enter ports (format 8080:80,443:443) or leave empty and press Enter'
+      );
+      setMessageColor('yellow');
       return;
     }
     if (step === 2) {
       // Ports are now optional - only validate if provided
       if (portInput.trim() && !validatePorts(portInput)) {
-        setMessage("Port format must be host:container and both must be numbers (e.g. 8080:80)");
-        setMessageColor("red");
+        setMessage(
+          'Port format must be host:container and both must be numbers (e.g. 8080:80)'
+        );
+        setMessageColor('red');
         return;
       }
       setStep(3);
-      const isDb = dbImages.some(db => imageName.trim().toLowerCase().includes(db));
+      const isDb = dbImages.some((db) =>
+        imageName.trim().toLowerCase().includes(db)
+      );
       // Check if the image has a profile with required env vars
-      const baseName = imageName.trim().toLowerCase().split(":")[0].split("/").pop();
+      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");
+        const suggestedPart =
+          profile.suggestedEnv && profile.suggestedEnv.length
+            ? ` | Suggested: ${profile.suggestedEnv.join(', ')}`
+            : '';
+        setMessage(
+          `Required env vars for ${baseName}: ${profile.requiredEnv.join(', ')}. Enter as VAR=val,VAR2=val2${suggestedPart}`
+        );
+        setMessageColor('yellow');
+      } else if (profile && profile.suggestedEnv && profile.suggestedEnv.length) {
+        setMessage(
+          `Suggested env vars for ${baseName}: ${profile.suggestedEnv.join(', ')}. Enter as VAR=val,VAR2=val2 or leave empty.`
+        );
+        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");
+        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 {
-        setMessage("Optional: Enter environment variables (format VAR1=val1,VAR2=val2) or leave empty and press Enter");
-        setMessageColor("yellow");
+        setMessage(
+          'Optional: Enter environment variables (format VAR1=val1,VAR2=val2) or leave empty and press Enter'
+        );
+        setMessageColor('yellow');
       }
       return;
     }
@@ -72,8 +169,8 @@ export function useContainerCreation({ onCreate, onCancel, dbImages = [], imageP
       // Contextual env validation using image profiles
       const result = validateEnvVars(envInput, imageName, imageProfiles);
       if (!result.valid) {
-        setMessage(result.errors.join(" | "));
-        setMessageColor("red");
+        setMessage(result.errors.join(' | '));
+        setMessageColor('red');
         return;
       }
       // Final step: call onCreate with all data (safely)
@@ -86,12 +183,15 @@ export function useContainerCreation({ onCreate, onCancel, dbImages = [], imageP
    */
   function cancelCreation() {
     setStep(0);
-    setImageName("");
-    setContainerName("");
-    setPortInput("");
-    setEnvInput("");
-    setMessage("");
-    setMessageColor("yellow");
+    setImageName('');
+    setContainerName('');
+    setPortInput('');
+    setEnvInput('');
+    setMessage('');
+    setMessageColor('yellow');
+    setSuggestions([]);
+    setSelectedSuggestionIndex(-1);
+    setVisibleOffset(0);
     safeCall(onCancel);
   }
 
@@ -101,12 +201,15 @@ export function useContainerCreation({ onCreate, onCancel, dbImages = [], imageP
    */
   function resetCreation() {
     setStep(0);
-    setImageName("");
-    setContainerName("");
-    setPortInput("");
-    setEnvInput("");
-    setMessage("Insert the name of the image to create: ");
-    setMessageColor("yellow");
+    setImageName('');
+    setContainerName('');
+    setPortInput('');
+    setEnvInput('');
+    setMessage('Insert the name of the image to create: ');
+    setMessageColor('yellow');
+    setSuggestions([]);
+    setSelectedSuggestionIndex(-1);
+    setVisibleOffset(0);
   }
 
   return {
@@ -124,6 +227,12 @@ export function useContainerCreation({ onCreate, onCancel, dbImages = [], imageP
     setMessage,
     messageColor,
     setMessageColor,
+    suggestions,
+    selectedSuggestionIndex,
+    visibleOffset,
+    updateImageInput,
+    moveSuggestionSelection,
+    applyFocusedSuggestion,
     nextStep,
     cancelCreation,
     resetCreation,

package/src/hooks/creation/useLogsViewer.js

@@ -1,5 +1,5 @@
-import { useState, useRef } from "react";
-import { safeCall } from "../../helpers/safeCall.js";
+import { useState, useRef } from 'react';
+import { safeCall } from '../../helpers/safeCall.js';
 
 /**
  * Custom hook to manage the logs viewer state and stream reference.

package/src/hooks/debug/useDebugLogs.js

@@ -8,16 +8,21 @@ export function useDebugLogs() {
   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 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);
       });

package/src/hooks/navigation/useContainerSelection.js

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

package/src/hooks/useContainerCommandRouter.js

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback } from 'react';
 
 /**
  * Hook responsible solely for routing Docker action keystrokes to the correct handler.
@@ -36,75 +36,88 @@ export function useContainerCommandRouter({
   onToggleDebug,
   onStartCreate,
 }) {
-  const handleDockerCommands = useCallback((input) => {
-    const container = containers[selected];
+  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 === '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 === '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 === 'r') {
+        actions.handleAction({
+          actionFn: async (id) => await actions.restartContainer(id),
+          actionLabel: 'Restarting',
+          selected,
+        });
+        return true;
+      }
 
-    if (input === "e") {
-      if (!container) {
+      if (input === 'e') {
+        if (!container) {
+          return true;
+        }
+        onStartErase();
         return true;
       }
-      onStartErase();
-      return true;
-    }
 
-    if (input === "l") {
-      if (!container) {
+      if (input === 'l') {
+        if (!container) {
+          return true;
+        }
+        logsViewer.openLogs();
+        startLogsStream(container.id);
         return true;
       }
-      logsViewer.openLogs();
-      startLogsStream(container.id);
-      return true;
-    }
 
-    if (input === "c") {
-      onStartCreate();
-      creation.resetCreation();
-      return true;
-    }
+      if (input === 'c') {
+        onStartCreate();
+        creation.resetCreation();
+        return true;
+      }
 
-    if (input === "d") {
-      onToggleDebug();
-      return true;
-    }
+      if (input === 'd') {
+        onToggleDebug();
+        return true;
+      }
 
-    return false;
-  }, [actions, containers, creation, logsViewer, onStartCreate, onStartErase, onToggleDebug, selected, startLogsStream]);
+      return false;
+    },
+    [
+      actions,
+      containers,
+      creation,
+      logsViewer,
+      onStartCreate,
+      onStartErase,
+      onToggleDebug,
+      selected,
+      startLogsStream,
+    ]
+  );
 
   return { handleDockerCommands };
 }

package/src/hooks/useContainers.js

@@ -8,9 +8,9 @@
  * // Use in a component
  * const { containers } = useContainers();
  */
-import React, { useState, useEffect } from "react";
-import { getContainers } from "../helpers/dockerService/serviceComponents/containerList";
-import { REFRESH_INTERVALS } from "../helpers/constants.js";
+import React, { useState, useEffect } from 'react';
+import { getContainers } from '../helpers/dockerService/serviceComponents/containerList';
+import { REFRESH_INTERVALS } from '../helpers/constants.js';
 
 export function useContainers() {
   const [containers, setContainers] = useState([]);
@@ -18,7 +18,7 @@ export function useContainers() {
   useEffect(() => {
     const fetch = async () => setContainers(await getContainers());
     fetch();
-  const timer = setInterval(fetch, REFRESH_INTERVALS.CONTAINER_LIST);
+    const timer = setInterval(fetch, REFRESH_INTERVALS.CONTAINER_LIST);
     return () => clearInterval(timer);
   }, []);