cdd-cli 3.2.2 → 4.0.0

package/src/hooks/creation/useContainerCreation.js

@@ -1,13 +1,36 @@
-import { useState } from 'react';
+import { useReducer, useState, useRef, useEffect } from 'react';
 import {
   validatePorts,
   validateEnvVars,
 } from '../../helpers/validationHelpers.js';
-import { IMAGE_PROFILES } from '../../helpers/constants.js';
+import { IMAGE_PROFILES, resolveImageTag } from '../../helpers/constants.js';
 import { safeCall } from '../../helpers/safeCall.js';
+import { searchDockerHub, formatHubResult } from '../../helpers/dockerHubService.js';
 
 const MAX_VISIBLE = 6;
 
+const INITIAL_FORM = {
+  step: 0,
+  imageName: '',
+  containerName: '',
+  portInput: '',
+  envInput: '',
+  message: '',
+  messageColor: 'yellow',
+  suggestions: [],
+  selectedSuggestionIndex: -1,
+  visibleOffset: 0,
+};
+
+function formReducer(state, action) {
+  switch (action.type) {
+    case 'RESET': return { ...INITIAL_FORM };
+    case 'RESET_WIZARD': return { ...INITIAL_FORM, message: 'Insert the name of the image to create: ', messageColor: 'yellow' };
+    case 'SET': return { ...state, ...action.payload };
+    default: return state;
+  }
+}
+
 /**
  * Custom hook to manage the container creation flow, step by step.
  * Handles input, validation, and feedback for each creation step.
@@ -25,38 +48,143 @@ export function useContainerCreation({
   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');
-
-  // Autocomplete state
-  const [suggestions, setSuggestions] = useState([]);
-  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
-  const [visibleOffset, setVisibleOffset] = useState(0);
+  const [form, dispatch] = useReducer(formReducer, INITIAL_FORM);
+  const {
+    step,
+    imageName,
+    containerName,
+    portInput,
+    envInput,
+    message,
+    messageColor,
+    suggestions,
+    selectedSuggestionIndex,
+    visibleOffset,
+  } = form;
+
+  // Convenience setters that mirror the old useState API
+  const setStep = (v) => dispatch({ type: 'SET', payload: { step: v } });
+  const setImageName = (v) => dispatch({ type: 'SET', payload: { imageName: v } });
+  const setContainerName = (v) => dispatch({ type: 'SET', payload: { containerName: v } });
+  const setPortInput = (v) => dispatch({ type: 'SET', payload: { portInput: v } });
+  const setEnvInput = (v) =>
+    dispatch({ type: 'SET', payload: { envInput: typeof v === 'function' ? v(form.envInput) : v } });
+  const setMessage = (v) => dispatch({ type: 'SET', payload: { message: v } });
+  const setMessageColor = (v) => dispatch({ type: 'SET', payload: { messageColor: v } });
+  const setSuggestions = (v) => dispatch({ type: 'SET', payload: { suggestions: v } });
+  const setSelectedSuggestionIndex = (fn) => {
+    // Support both direct value and updater function
+    if (typeof fn === 'function') {
+      dispatch({ type: 'SET', payload: { selectedSuggestionIndex: fn(form.selectedSuggestionIndex) } });
+    } else {
+      dispatch({ type: 'SET', payload: { selectedSuggestionIndex: fn } });
+    }
+  };
+  const setVisibleOffset = (fn) => {
+    if (typeof fn === 'function') {
+      dispatch({ type: 'SET', payload: { visibleOffset: fn(form.visibleOffset) } });
+    } else {
+      dispatch({ type: 'SET', payload: { visibleOffset: fn } });
+    }
+  };
+
+  // Docker Hub search state (kept as useState because they are independent of form)
+  const [isSearchingHub, setIsSearchingHub] = useState(false);
+  const [hubResults, setHubResults] = useState(null);
+  // Tracks active request: { controller: AbortController|null, requestId: number }
+  const activeHubRequestRef = useRef({ controller: null, requestId: 0 });
+
+  // Timer for auto-clearing messages
+  const messageTimerRef = useRef(null);
+
+  /**
+   * Sets a permanent message (e.g. step instructions). No auto-clear.
+   */
+  function setStepMessage(msg, color = 'yellow') {
+    clearTimeout(messageTimerRef.current);
+    dispatch({ type: 'SET', payload: { message: msg, messageColor: color } });
+  }
+
+  /**
+   * Sets a transient feedback message (e.g. validation errors). Auto-clears after `ms`.
+   */
+  function setTimedMessage(msg, color = 'yellow', ms = 4000) {
+    clearTimeout(messageTimerRef.current);
+    dispatch({ type: 'SET', payload: { message: msg, messageColor: color } });
+    if (msg) {
+      messageTimerRef.current = setTimeout(() => dispatch({ type: 'SET', payload: { message: '' } }), ms);
+    }
+  }
+
+  useEffect(() => () => clearTimeout(messageTimerRef.current), []);
 
   /**
    * Updates the image name input and recalculates autocomplete suggestions.
    * Resets selectedSuggestionIndex to -1 on every keystroke.
+   * Also aborts any in-flight Hub search and clears Hub results.
    *
    * @param {string} value - New raw image name typed by user
    */
   function updateImageInput(value) {
-    setImageName(value);
-    setSelectedSuggestionIndex(-1);
-    setVisibleOffset(0);
-    if (!value.trim()) {
-      setSuggestions([]);
-      return;
-    }
+    // Abort any in-flight Hub search and clear its state
+    activeHubRequestRef.current.controller?.abort();
+    activeHubRequestRef.current.requestId += 1;
+    setIsSearchingHub(false);
+    setHubResults(null);
+
     const lower = value.toLowerCase();
-    const matches = Object.keys(imageProfiles).filter((key) =>
-      key.includes(lower)
-    );
-    setSuggestions(matches);
+    const matches = value.trim()
+      ? Object.keys(imageProfiles).filter((key) => key.includes(lower))
+      : [];
+
+    dispatch({
+      type: 'SET',
+      payload: {
+        imageName: value,
+        selectedSuggestionIndex: -1,
+        visibleOffset: 0,
+        suggestions: matches,
+      },
+    });
+  }
+
+  /**
+   * Triggers a Docker Hub search for the current imageName.
+   * Guards: imageName must be non-empty; no concurrent search allowed.
+   * Uses AbortController + requestId to handle race conditions.
+   */
+  async function triggerHubSearch() {
+    const query = imageName.trim();
+    if (!query) return;
+    if (isSearchingHub) return;
+
+    // Abort previous request (should already be aborted from updateImageInput,
+    // but guard here too)
+    activeHubRequestRef.current.controller?.abort();
+
+    const requestId = activeHubRequestRef.current.requestId + 1;
+    activeHubRequestRef.current.requestId = requestId;
+
+    const controller = new AbortController();
+    activeHubRequestRef.current.controller = controller;
+
+    setIsSearchingHub(true);
+    dispatch({ type: 'SET', payload: { selectedSuggestionIndex: -1, visibleOffset: 0 } });
+
+    try {
+      const results = await searchDockerHub(query, { signal: controller.signal });
+      // Ignore stale responses
+      if (activeHubRequestRef.current.requestId !== requestId) return;
+      setHubResults(results.map(formatHubResult));
+    } catch (err) {
+      if (activeHubRequestRef.current.requestId !== requestId) return;
+      // Silence AbortError; for all other errors fall back to static suggestions
+      setHubResults(null);
+    } finally {
+      if (activeHubRequestRef.current.requestId === requestId) {
+        setIsSearchingHub(false);
+      }
+    }
   }
 
   /**
@@ -67,16 +195,11 @@ export function useContainerCreation({
    * @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;
-    });
+    const next = Math.max(-1, Math.min(suggestions.length - 1, selectedSuggestionIndex + direction));
+    let newOffset = visibleOffset;
+    if (next < visibleOffset) newOffset = Math.max(0, next);
+    else if (next >= visibleOffset + MAX_VISIBLE) newOffset = next - MAX_VISIBLE + 1;
+    dispatch({ type: 'SET', payload: { selectedSuggestionIndex: next, visibleOffset: newOffset } });
   }
 
   /**
@@ -86,10 +209,15 @@ export function useContainerCreation({
   function applyFocusedSuggestion() {
     if (selectedSuggestionIndex < 0 || selectedSuggestionIndex >= suggestions.length) return;
     const chosen = suggestions[selectedSuggestionIndex];
-    setImageName(chosen);
-    setSuggestions([]);
-    setSelectedSuggestionIndex(-1);
-    setVisibleOffset(0);
+    dispatch({
+      type: 'SET',
+      payload: {
+        imageName: resolveImageTag(chosen, imageProfiles),
+        suggestions: [],
+        selectedSuggestionIndex: -1,
+        visibleOffset: 0,
+      },
+    });
   }
 
   /**
@@ -98,35 +226,35 @@ export function useContainerCreation({
   function nextStep() {
     if (step === 0) {
       if (!imageName.trim()) {
-        setMessage('Image name cannot be empty.');
-        setMessageColor('red');
+        setTimedMessage('Image name cannot be empty.', 'red');
         return;
       }
-      setStep(1);
-      setMessage(
-        'Optional: Enter container name or leave empty and press Enter'
+      const resolved = resolveImageTag(imageName, imageProfiles);
+      dispatch({ type: 'SET', payload: { imageName: resolved, step: 1 } });
+      setStepMessage(
+        'Optional: Enter container name or leave empty and press Enter',
+        'yellow'
       );
-      setMessageColor('yellow');
       return;
     }
     if (step === 1) {
-      setStep(2);
-      setMessage(
-        'Optional: Enter ports (format 8080:80,443:443) or leave empty and press Enter'
+      dispatch({ type: 'SET', payload: { step: 2 } });
+      setStepMessage(
+        'Optional: Enter ports (format 8080:80,443:443) or leave empty and press Enter',
+        'yellow'
       );
-      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)'
+        setTimedMessage(
+          'Port format must be host:container and both must be numbers (e.g. 8080:80)',
+          'red'
         );
-        setMessageColor('red');
         return;
       }
-      setStep(3);
+      dispatch({ type: 'SET', payload: { step: 3 } });
       const isDb = dbImages.some((db) =>
         imageName.trim().toLowerCase().includes(db)
       );
@@ -143,25 +271,25 @@ export function useContainerCreation({
           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}`
+        setStepMessage(
+          `Required env vars for ${baseName}: ${profile.requiredEnv.join(', ')}. Enter as VAR=val,VAR2=val2${suggestedPart}`,
+          'yellow'
         );
-        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.`
+        setStepMessage(
+          `Suggested env vars for ${baseName}: ${profile.suggestedEnv.join(', ')}. Enter as VAR=val,VAR2=val2 or leave empty.`,
+          'yellow'
         );
-        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.'
+        setStepMessage(
+          '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.',
+          'yellow'
         );
-        setMessageColor('yellow');
       } else {
-        setMessage(
-          'Optional: Enter environment variables (format VAR1=val1,VAR2=val2) or leave empty and press Enter'
+        setStepMessage(
+          'Optional: Enter environment variables (format VAR1=val1,VAR2=val2) or leave empty and press Enter',
+          'yellow'
         );
-        setMessageColor('yellow');
       }
       return;
     }
@@ -169,8 +297,7 @@ export function useContainerCreation({
       // Contextual env validation using image profiles
       const result = validateEnvVars(envInput, imageName, imageProfiles);
       if (!result.valid) {
-        setMessage(result.errors.join(' | '));
-        setMessageColor('red');
+        setTimedMessage(result.errors.join(' | '), 'red');
         return;
       }
       // Final step: call onCreate with all data (safely)
@@ -182,16 +309,7 @@ export function useContainerCreation({
    * Cancels the creation process and resets state.
    */
   function cancelCreation() {
-    setStep(0);
-    setImageName('');
-    setContainerName('');
-    setPortInput('');
-    setEnvInput('');
-    setMessage('');
-    setMessageColor('yellow');
-    setSuggestions([]);
-    setSelectedSuggestionIndex(-1);
-    setVisibleOffset(0);
+    dispatch({ type: 'RESET' });
     safeCall(onCancel);
   }
 
@@ -200,18 +318,32 @@ export function useContainerCreation({
    * 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');
-    setSuggestions([]);
-    setSelectedSuggestionIndex(-1);
-    setVisibleOffset(0);
+    dispatch({ type: 'RESET_WIZARD' });
   }
 
+  /**
+   * Inserts the next pending suggested env var into envInput.
+   * Derives "next" by comparing keys already in envInput against suggestedEnv.
+   * When all suggestions are already present, sets a feedback message.
+   */
+  function insertNextSuggestedEnv() {
+    const baseName = imageName.trim().toLowerCase().split(':')[0].split('/').pop();
+    const profile = imageProfiles[baseName];
+    const suggested = profile?.suggestedEnv ?? [];
+    if (!suggested.length) return;
+    const addedKeys = envInput.split(',').map(s => s.split('=')[0].trim()).filter(Boolean);
+    const next = suggested.find(s => !addedKeys.includes(s.split('=')[0]));
+    if (!next) { setTimedMessage('All suggested env vars added', 'yellow'); return; }
+    const newEnvInput = envInput ? `${envInput},${next}` : next;
+    dispatch({ type: 'SET', payload: { envInput: newEnvInput } });
+  }
+
+  /**
+   * True when the current image profile has at least one suggestedEnv entry.
+   */
+  const baseName = imageName.trim().toLowerCase().split(':')[0].split('/').pop();
+  const hasSuggestedEnv = (imageProfiles[baseName]?.suggestedEnv?.length ?? 0) > 0;
+
   return {
     step,
     setStep,
@@ -230,11 +362,16 @@ export function useContainerCreation({
     suggestions,
     selectedSuggestionIndex,
     visibleOffset,
+    isSearchingHub,
+    hubResults,
     updateImageInput,
+    triggerHubSearch,
     moveSuggestionSelection,
     applyFocusedSuggestion,
     nextStep,
     cancelCreation,
     resetCreation,
+    insertNextSuggestedEnv,
+    hasSuggestedEnv,
   };
 }

package/src/hooks/useContainerCommandRouter.js

@@ -94,8 +94,8 @@ export function useContainerCommandRouter({
       }
 
       if (input === 'c') {
-        onStartCreate();
         creation.resetCreation();
+        onStartCreate();
         return true;
       }
 

package/src/hooks/useControls.js

@@ -21,7 +21,7 @@ import { DB_IMAGES } from '../helpers/constants.js';
  * @param {Array<Object>} containers - Current list of Docker containers
  * @returns {Object} controls - API for the App component
  */
-export function useControls(containers = []) {
+export function useControls(containers = [], overrides = {}) {
   const [creatingContainer, setCreatingContainer] = React.useState(false);
 
   // — Modular hooks —
@@ -35,8 +35,7 @@ export function useControls(containers = []) {
         portInput,
         envInput,
       });
-      actions.setMessage(`Creating container ${imageName}...`);
-      actions.setMessageColor('yellow');
+      actions.setTimedMessage(`Creating container ${imageName}...`, 'yellow');
       try {
         const { id, ports } = await svcCreateContainer(imageName, options);
         let portMsg = '';
@@ -47,11 +46,9 @@ export function useControls(containers = []) {
               .map((p) => `${p.hostPort}→${p.containerPort}/${p.protocol}`)
               .join(', ');
         }
-        actions.setMessage(`Created container ${id}${portMsg}`);
-        actions.setMessageColor('green');
+        actions.setTimedMessage(`Created container ${id}${portMsg}`, 'green');
       } catch (err) {
-        actions.setMessage(`Error creating container: ${err.message}`);
-        actions.setMessageColor('red');
+        actions.setTimedMessage(`Error creating container: ${err.message}`, 'red');
       } finally {
         setCreatingContainer(false);
       }
@@ -64,6 +61,13 @@ export function useControls(containers = []) {
   const selection = useContainerSelection(containers.length);
   const debugLogs = useDebugLogs();
 
+  // Allow overrides for testability (e.g. injecting a mock triggerHubSearch)
+  const triggerHubSearch = overrides.triggerHubSearch ?? creation.triggerHubSearch;
+  const isSearchingHub = overrides.isSearchingHub ?? creation.isSearchingHub;
+  const insertNextSuggestedEnv = overrides.insertNextSuggestedEnv !== undefined
+    ? overrides.insertNextSuggestedEnv
+    : creation.insertNextSuggestedEnv;
+
   const eraseConfirmation = useEraseConfirmation({
     onConfirm: () => {
       actions.handleAction({
@@ -154,6 +158,18 @@ export function useControls(containers = []) {
         return;
       }
 
+      // Tab on step 0: trigger Docker Hub search (with guards)
+      if (key.tab) {
+        if (step === 0) {
+          if (!isSearchingHub && (creation.imageName || '').trim() !== '') {
+            triggerHubSearch();
+          }
+        } else if (step === 3) {
+          insertNextSuggestedEnv?.();
+        }
+        return;
+      }
+
       // Arrow keys on step 0: navigate suggestion list
       if (step === 0 && creation.suggestions.length > 0) {
         if (key.upArrow) {
@@ -189,7 +205,7 @@ export function useControls(containers = []) {
           appendChar(creation.setEnvInput, creation.envInput, input);
       }
     },
-    [creation, setCreatingContainer]
+    [creation, setCreatingContainer, triggerHubSearch, isSearchingHub, insertNextSuggestedEnv]
   );
 
   // Single keyboard entry point

package/src/index.js

@@ -11,6 +11,10 @@
 import React from 'react';
 import { render } from 'ink';
 import App from './App.jsx';
+import { logger } from './helpers/logger.js';
+
+process.on('uncaughtException', (err) => logger.error('Uncaught exception', err));
+process.on('unhandledRejection', (reason) => logger.error('Unhandled rejection', reason));
 
 console.clear();
 render(<App />);