cdd-cli 3.2.0 → 4.0.0

package/src/helpers/logger.js

@@ -6,7 +6,7 @@ const LOG_LEVELS = {
   error: 0,
   warn: 1,
   info: 2,
-  debug: 3
+  debug: 3,
 };
 
 /**
@@ -24,7 +24,7 @@ const LOG_LEVELS = {
  */
 
 function parseLevel(value) {
-  if (typeof value !== "string") {
+  if (typeof value !== 'string') {
     return null;
   }
   const normalized = value.trim().toLowerCase();
@@ -39,13 +39,13 @@ const envLevel =
   parseLevel(process.env.LOG_LEVEL) ??
   LOG_LEVELS.info;
 
-const currentLevel = typeof envLevel === "number" ? envLevel : LOG_LEVELS.info;
+const currentLevel = typeof envLevel === 'number' ? envLevel : LOG_LEVELS.info;
 
 const listeners = new Set();
 
 function shouldLog(level) {
   const target = LOG_LEVELS[level];
-  return typeof target === "number" && target <= currentLevel;
+  return typeof target === 'number' && target <= currentLevel;
 }
 
 function log(level, message, ...args) {
@@ -58,12 +58,11 @@ function log(level, message, ...args) {
   const formatted = `[${timestamp}] [${upperLevel}] ${message}`;
   const entry = { level, message, args, timestamp, formatted };
 
-  const shouldWriteToConsole =
-    listeners.size === 0 || level === "error" || level === "warn";
+  const shouldWriteToConsole = listeners.size === 0;
 
   if (shouldWriteToConsole) {
-    const method = level === "debug" ? "log" : level;
-    if (typeof console[method] === "function") {
+    const method = level === 'debug' ? 'log' : level;
+    if (typeof console[method] === 'function') {
       console[method](formatted, ...args);
     } else {
       console.log(formatted, ...args);
@@ -86,28 +85,28 @@ function log(level, message, ...args) {
  */
 export const logger = {
   debug(message, ...args) {
-    log("debug", message, ...args);
+    log('debug', message, ...args);
   },
   info(message, ...args) {
-    log("info", message, ...args);
+    log('info', message, ...args);
   },
   warn(message, ...args) {
-    log("warn", message, ...args);
+    log('warn', message, ...args);
   },
   error(message, ...args) {
-    log("error", message, ...args);
+    log('error', message, ...args);
   },
   /**
    * Subscribe to log events.
    *
-  * @param {LogListener} listener Listener invoked for every log entry that passes the current level filter.
-  * @returns {function(): void} Cleanup function that removes the listener when called.
+   * @param {LogListener} listener Listener invoked for every log entry that passes the current level filter.
+   * @returns {function(): void} Cleanup function that removes the listener when called.
    */
   subscribe(listener) {
-    if (typeof listener !== "function") {
+    if (typeof listener !== 'function') {
       return () => {};
     }
     listeners.add(listener);
     return () => listeners.delete(listener);
-  }
+  },
 };

package/src/helpers/safeCall.js

@@ -1,4 +1,4 @@
-import { logger } from "./logger.js";
+import { logger } from './logger.js';
 
 /**
  * Call a function safely: if it's a function call it with provided args and
@@ -12,7 +12,7 @@ export function safeCall(fn, ...args) {
     try {
       return fn(...args);
     } catch (e) {
-      logger.error("safeCall caught error", e);
+      logger.error('safeCall caught error', e);
     }
   }
 }

package/src/helpers/validationHelpers.js

@@ -1,4 +1,5 @@
 // Reusable validations for ports and environment variables
+import { normalizeImageName } from './imageNameUtils.js';
 
 /**
  * Validate a comma-separated list of port mappings in the form "host:container".
@@ -10,38 +11,18 @@
 export function validatePorts(portInput) {
   // Empty or whitespace-only input is considered valid (ports are optional)
   if (!portInput || !portInput.trim()) return true;
-  const ports = portInput.split(",").map(p => p.trim()).filter(Boolean);
+  const ports = portInput
+    .split(',')
+    .map((p) => p.trim())
+    .filter(Boolean);
   if (ports.length === 0) return true;
-  const invalid = ports.find(pair => {
-    const [host, cont] = pair.split(":");
+  const invalid = ports.find((pair) => {
+    const [host, cont] = pair.split(':');
     return !host || !cont || isNaN(Number(host)) || isNaN(Number(cont));
   });
   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.
  *
@@ -64,9 +45,12 @@ export function validateEnvVars(envInput, imageName, imageProfiles) {
   const syntaxErrors = [];
 
   if (envInput && envInput.trim()) {
-    const vars = envInput.split(",").map(v => v.trim()).filter(Boolean);
+    const vars = envInput
+      .split(',')
+      .map((v) => v.trim())
+      .filter(Boolean);
     for (const v of vars) {
-      const eqIdx = v.indexOf("=");
+      const eqIdx = v.indexOf('=');
       if (eqIdx === -1) {
         syntaxErrors.push(`"${v}" is missing an '=' sign`);
         continue;
@@ -93,7 +77,7 @@ export function validateEnvVars(envInput, imageName, imageProfiles) {
 
   if (profile && profile.requiredEnv && profile.requiredEnv.length) {
     for (const required of profile.requiredEnv) {
-      if (!parsedEnv[required] || parsedEnv[required].trim() === "") {
+      if (!parsedEnv[required] || parsedEnv[required].trim() === '') {
         errors.push(`Missing required env var: ${required}`);
       }
     }

package/src/hooks/creation/useContainerActions.js

@@ -1,6 +1,11 @@
-import { useState } from "react";
-import { safeCall } from "../../helpers/safeCall.js";
-import { startContainer as svcStartContainer, stopContainer as svcStopContainer, restartContainer as svcRestartContainer, removeContainer as svcRemoveContainer } from "../../helpers/dockerService/serviceComponents/containerActions.js";
+import { useState, useRef, useEffect } from 'react';
+import { safeCall } from '../../helpers/safeCall.js';
+import {
+  startContainer as svcStartContainer,
+  stopContainer as svcStopContainer,
+  restartContainer as svcRestartContainer,
+  removeContainer as svcRemoveContainer,
+} from '../../helpers/dockerService/serviceComponents/containerActions.js';
 
 /**
  * Custom hook to manage container actions (start, stop, restart, remove).
@@ -12,8 +17,21 @@ import { startContainer as svcStartContainer, stopContainer as svcStopContainer,
  * @returns {Object} Action helpers and feedback state
  */
 export function useContainerActions({ containers, onAction }) {
-  const [message, setMessage] = useState("");
-  const [messageColor, setMessageColor] = useState("yellow");
+  const [message, setMessage] = useState('');
+  const [messageColor, setMessageColor] = useState('yellow');
+
+  const messageTimerRef = useRef(null);
+
+  function setTimedMessage(msg, color = 'yellow', ms = 4000) {
+    clearTimeout(messageTimerRef.current);
+    setMessage(msg);
+    if (color !== undefined) setMessageColor(color);
+    if (msg) {
+      messageTimerRef.current = setTimeout(() => setMessage(''), ms);
+    }
+  }
+
+  useEffect(() => () => clearTimeout(messageTimerRef.current), []);
 
   /**
    * Handles a generic container action and sets feedback.
@@ -29,26 +47,28 @@ export function useContainerActions({ containers, onAction }) {
       const checkMsg = stateCheck(container);
       if (checkMsg) {
         setMessage(checkMsg);
-        setMessageColor("yellow");
+        setMessageColor('yellow');
         return;
       }
     }
     setMessage(`${actionLabel} container...`);
-    setMessageColor("yellow");
+    setMessageColor('yellow');
     try {
       await actionFn(container.id);
-  setMessage(`${actionLabel} container successful.`);
-  setMessageColor("green");
-  safeCall(onAction);
+      setTimedMessage(`${actionLabel} container successful.`, 'green');
+      safeCall(onAction);
     } catch (err) {
-      setMessage(`Failed to ${actionLabel.toLowerCase()} container: ${err.message}`);
-      setMessageColor("red");
+      setTimedMessage(
+        `Failed to ${actionLabel.toLowerCase()} container: ${err.message}`,
+        'red'
+      );
     }
   }
 
   return {
     message,
     setMessage,
+    setTimedMessage,
     messageColor,
     setMessageColor,
     handleAction,

package/src/hooks/creation/useContainerCreation.js

@@ -1,7 +1,35 @@
-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 { useReducer, useState, useRef, useEffect } from 'react';
+import {
+  validatePorts,
+  validateEnvVars,
+} from '../../helpers/validationHelpers.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.
@@ -14,14 +42,183 @@ 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 }) {
-  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");
+export function useContainerCreation({
+  onCreate,
+  onCancel,
+  dbImages = [],
+  imageProfiles = IMAGE_PROFILES,
+}) {
+  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) {
+    // 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 = 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);
+      }
+    }
+  }
+
+  /**
+   * 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) {
+    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 } });
+  }
+
+  /**
+   * 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];
+    dispatch({
+      type: 'SET',
+      payload: {
+        imageName: resolveImageTag(chosen, imageProfiles),
+        suggestions: [],
+        selectedSuggestionIndex: -1,
+        visibleOffset: 0,
+      },
+    });
+  }
 
   /**
    * Advances to the next step, with validation and feedback.
@@ -29,42 +226,70 @@ export function useContainerCreation({ onCreate, onCancel, dbImages = [], imageP
   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");
-      setMessageColor("yellow");
+      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'
+      );
       return;
     }
     if (step === 1) {
-      setStep(2);
-      setMessage("Optional: Enter ports (format 8080:80,443:443) or leave empty and press Enter");
-      setMessageColor("yellow");
+      dispatch({ type: 'SET', payload: { step: 2 } });
+      setStepMessage(
+        'Optional: Enter ports (format 8080:80,443:443) or leave empty and press Enter',
+        '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");
+        setTimedMessage(
+          'Port format must be host:container and both must be numbers (e.g. 8080:80)',
+          'red'
+        );
         return;
       }
-      setStep(3);
-      const isDb = dbImages.some(db => imageName.trim().toLowerCase().includes(db));
+      dispatch({ type: 'SET', payload: { step: 3 } });
+      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(', ')}`
+            : '';
+        setStepMessage(
+          `Required env vars for ${baseName}: ${profile.requiredEnv.join(', ')}. Enter as VAR=val,VAR2=val2${suggestedPart}`,
+          'yellow'
+        );
+      } else if (profile && profile.suggestedEnv && profile.suggestedEnv.length) {
+        setStepMessage(
+          `Suggested env vars for ${baseName}: ${profile.suggestedEnv.join(', ')}. Enter as VAR=val,VAR2=val2 or leave empty.`,
+          '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");
+        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'
+        );
       } else {
-        setMessage("Optional: Enter environment variables (format VAR1=val1,VAR2=val2) or leave empty and press Enter");
-        setMessageColor("yellow");
+        setStepMessage(
+          'Optional: Enter environment variables (format VAR1=val1,VAR2=val2) or leave empty and press Enter',
+          'yellow'
+        );
       }
       return;
     }
@@ -72,8 +297,7 @@ 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");
+        setTimedMessage(result.errors.join(' | '), 'red');
         return;
       }
       // Final step: call onCreate with all data (safely)
@@ -85,13 +309,7 @@ export function useContainerCreation({ onCreate, onCancel, dbImages = [], imageP
    * Cancels the creation process and resets state.
    */
   function cancelCreation() {
-    setStep(0);
-    setImageName("");
-    setContainerName("");
-    setPortInput("");
-    setEnvInput("");
-    setMessage("");
-    setMessageColor("yellow");
+    dispatch({ type: 'RESET' });
     safeCall(onCancel);
   }
 
@@ -100,15 +318,32 @@ export function useContainerCreation({ onCreate, onCancel, dbImages = [], imageP
    * 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");
+    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,
@@ -124,8 +359,19 @@ export function useContainerCreation({ onCreate, onCancel, dbImages = [], imageP
     setMessage,
     messageColor,
     setMessageColor,
+    suggestions,
+    selectedSuggestionIndex,
+    visibleOffset,
+    isSearchingHub,
+    hubResults,
+    updateImageInput,
+    triggerHubSearch,
+    moveSuggestionSelection,
+    applyFocusedSuggestion,
     nextStep,
     cancelCreation,
     resetCreation,
+    insertNextSuggestedEnv,
+    hasSuggestedEnv,
   };
 }

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.