cdd-cli 3.2.0 → 4.0.0

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') {
+        creation.resetCreation();
+        onStartCreate();
+        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);
   }, []);
 

package/src/hooks/useControls.js

@@ -1,17 +1,17 @@
-import React from "react";
-import { useInput } from "ink";
-import { useContainerActions } from "./creation/useContainerActions";
-import { useContainerCreation } from "./creation/useContainerCreation";
-import { useLogsViewer } from "./creation/useLogsViewer";
-import { useContainerSelection } from "./navigation/useContainerSelection";
-import { useDebugLogs } from "./debug/useDebugLogs";
-import { useEraseConfirmation } from "./useEraseConfirmation";
-import { useExitHandler } from "./useExitHandler";
-import { useContainerCommandRouter } from "./useContainerCommandRouter";
-import { getLogsStream } from "../helpers/dockerService/serviceComponents/containerLogs.js";
-import { createContainer as svcCreateContainer } from "../helpers/dockerService/serviceComponents/containerActions.js";
-import { buildContainerOptions } from "../helpers/containerOptionsBuilder.js";
-import { DB_IMAGES } from "../helpers/constants.js";
+import React from 'react';
+import { useInput } from 'ink';
+import { useContainerActions } from './creation/useContainerActions';
+import { useContainerCreation } from './creation/useContainerCreation';
+import { useLogsViewer } from './creation/useLogsViewer';
+import { useContainerSelection } from './navigation/useContainerSelection';
+import { useDebugLogs } from './debug/useDebugLogs';
+import { useEraseConfirmation } from './useEraseConfirmation';
+import { useExitHandler } from './useExitHandler';
+import { useContainerCommandRouter } from './useContainerCommandRouter';
+import { getLogsStream } from '../helpers/dockerService/serviceComponents/containerLogs.js';
+import { createContainer as svcCreateContainer } from '../helpers/dockerService/serviceComponents/containerActions.js';
+import { buildContainerOptions } from '../helpers/containerOptionsBuilder.js';
+import { DB_IMAGES } from '../helpers/constants.js';
 
 // Principal hook to manage user inputs and control the app state
 /**
@@ -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 —
@@ -29,20 +29,26 @@ export function useControls(containers = []) {
 
   const creation = useContainerCreation({
     onCreate: async ({ imageName, containerName, portInput, envInput }) => {
-      const options = buildContainerOptions({ imageName, containerName, portInput, envInput });
-      actions.setMessage(`Creating container ${imageName}...`);
-      actions.setMessageColor("yellow");
+      const options = buildContainerOptions({
+        imageName,
+        containerName,
+        portInput,
+        envInput,
+      });
+      actions.setTimedMessage(`Creating container ${imageName}...`, 'yellow');
       try {
         const { id, ports } = await svcCreateContainer(imageName, options);
-        let portMsg = "";
+        let portMsg = '';
         if (ports && ports.length) {
-          portMsg = " | Ports: " + ports.map(p => `${p.hostPort}→${p.containerPort}/${p.protocol}`).join(", ");
+          portMsg =
+            ' | Ports: ' +
+            ports
+              .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);
       }
@@ -55,18 +61,25 @@ 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({
         actionFn: async (id) => await actions.removeContainer(id),
-        actionLabel: "Erasing",
+        actionLabel: 'Erasing',
         selected: selection.selected,
       });
-      actions.setMessageColor("yellow");
+      actions.setMessageColor('yellow');
     },
     onCancel: () => {
-      actions.setMessage("");
-      actions.setMessageColor("");
+      actions.setMessage('');
+      actions.setMessageColor('');
     },
   });
 
@@ -74,17 +87,22 @@ export function useControls(containers = []) {
    * Pipe container logs into the viewer while applying a hard limit.
    * @param {string} containerId - Container identifier used by Docker.
    */
-  const startLogsStream = React.useCallback((containerId) => {
-    getLogsStream(
-      containerId,
-      (data) => logsViewer.setLogs((prev) => {
-        const newLogs = [...prev, ...data.split("\n").filter(Boolean)];
-        return newLogs.slice(-1000);
-      }),
-      () => {},
-      (err) => logsViewer.setLogs((prev) => [...prev, `Error: ${err.message}`])
-    );
-  }, [logsViewer]);
+  const startLogsStream = React.useCallback(
+    (containerId) => {
+      getLogsStream(
+        containerId,
+        (data) =>
+          logsViewer.setLogs((prev) => {
+            const newLogs = [...prev, ...data.split('\n').filter(Boolean)];
+            return newLogs.slice(-1000);
+          }),
+        () => {},
+        (err) =>
+          logsViewer.setLogs((prev) => [...prev, `Error: ${err.message}`])
+      );
+    },
+    [logsViewer]
+  );
 
   const commandRouter = useContainerCommandRouter({
     actions,
@@ -95,8 +113,10 @@ export function useControls(containers = []) {
     startLogsStream,
     onStartErase: () => {
       eraseConfirmation.startErase();
-      actions.setMessage("Are you sure you want to erase this container? (y/n)");
-      actions.setMessageColor("yellow");
+      actions.setMessage(
+        'Are you sure you want to erase this container? (y/n)'
+      );
+      actions.setMessageColor('yellow');
     },
     onToggleDebug: () => debugLogs.setShowDebugLogs((prev) => !prev),
     onStartCreate: () => setCreatingContainer(true),
@@ -104,8 +124,8 @@ export function useControls(containers = []) {
 
   const exitHandler = useExitHandler({
     onBeforeExit: () => {
-      actions.setMessage("Exiting...");
-      actions.setMessageColor("yellow");
+      actions.setMessage('Exiting...');
+      actions.setMessageColor('yellow');
       logsViewer.closeLogs();
       debugLogs.setShowDebugLogs(false);
     },
@@ -114,38 +134,79 @@ export function useControls(containers = []) {
   /**
    * Route keystrokes to the container creation wizard.
    */
-  const processCreationInput = React.useCallback((input, key) => {
-    const step = creation.step;
+  const processCreationInput = React.useCallback(
+    (input, key) => {
+      const step = creation.step;
 
-    const removeLastChar = (setter) => setter((value) => (value || "").slice(0, -1));
-    const appendChar = (setter, current, ch) => setter((current || "") + ch);
+      const removeLastChar = (setter) =>
+        setter((value) => (value || '').slice(0, -1));
+      const appendChar = (setter, current, ch) => setter((current || '') + ch);
 
-    if (key.escape) {
-      creation.cancelCreation();
-      setCreatingContainer(false);
-      return;
-    }
+      if (key.escape) {
+        creation.cancelCreation();
+        setCreatingContainer(false);
+        return;
+      }
 
-    if (input === "\r" || input === "\n") {
-      creation.nextStep();
-      return;
-    }
+      if (input === '\r' || input === '\n') {
+        // If on step 0 with a focused suggestion, apply it instead of advancing
+        if (step === 0 && creation.selectedSuggestionIndex >= 0) {
+          creation.applyFocusedSuggestion();
+          return;
+        }
+        creation.nextStep();
+        return;
+      }
 
-    if (key.backspace || key.delete) {
-      if (step === 0) removeLastChar(creation.setImageName);
-      if (step === 1) removeLastChar(creation.setContainerName);
-      if (step === 2) removeLastChar(creation.setPortInput);
-      if (step === 3) removeLastChar(creation.setEnvInput);
-      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;
+      }
 
-    if (input && input.length === 1 && !key.ctrl && !key.meta) {
-      if (step === 0) appendChar(creation.setImageName, creation.imageName, input);
-      if (step === 1) appendChar(creation.setContainerName, creation.containerName, input);
-      if (step === 2) appendChar(creation.setPortInput, creation.portInput, input);
-      if (step === 3) appendChar(creation.setEnvInput, creation.envInput, input);
-    }
-  }, [creation, setCreatingContainer]);
+      // Arrow keys on step 0: navigate suggestion list
+      if (step === 0 && creation.suggestions.length > 0) {
+        if (key.upArrow) {
+          creation.moveSuggestionSelection(-1);
+          return;
+        }
+        if (key.downArrow) {
+          creation.moveSuggestionSelection(1);
+          return;
+        }
+      }
+
+      if (key.backspace || key.delete) {
+        if (step === 0) {
+          const newValue = (creation.imageName || '').slice(0, -1);
+          creation.updateImageInput(newValue);
+        }
+        if (step === 1) removeLastChar(creation.setContainerName);
+        if (step === 2) removeLastChar(creation.setPortInput);
+        if (step === 3) removeLastChar(creation.setEnvInput);
+        return;
+      }
+
+      if (input && input.length === 1 && !key.ctrl && !key.meta) {
+        if (step === 0) {
+          creation.updateImageInput((creation.imageName || '') + input);
+        }
+        if (step === 1)
+          appendChar(creation.setContainerName, creation.containerName, input);
+        if (step === 2)
+          appendChar(creation.setPortInput, creation.portInput, input);
+        if (step === 3)
+          appendChar(creation.setEnvInput, creation.envInput, input);
+      }
+    },
+    [creation, setCreatingContainer, triggerHubSearch, isSearchingHub, insertNextSuggestedEnv]
+  );
 
   // Single keyboard entry point
   useInput((input, key) => {
@@ -155,7 +216,7 @@ export function useControls(containers = []) {
     }
 
     if (logsViewer.showLogs) {
-      if (input === "q" || key.escape) {
+      if (input === 'q' || key.escape) {
         logsViewer.closeLogs();
       }
       return;
@@ -180,7 +241,9 @@ export function useControls(containers = []) {
     selected: selection.selected,
     setSelected: selection.setSelected,
     message: creatingContainer ? creation.message : actions.message,
-    messageColor: creatingContainer ? creation.messageColor : actions.messageColor,
+    messageColor: creatingContainer
+      ? creation.messageColor
+      : actions.messageColor,
     showLogs: logsViewer.showLogs,
     logs: logsViewer.logs,
     exitLogs: logsViewer.closeLogs,

package/src/hooks/useEraseConfirmation.js

@@ -1,4 +1,4 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback } from 'react';
 
 /**
  * Hook to manage the erase confirmation dialog flow.
@@ -20,13 +20,13 @@ export function useEraseConfirmation({ onConfirm, onCancel }) {
 
   const processEraseConfirmation = useCallback(
     (input, key) => {
-      if (input === "y" || input === "Y") {
+      if (input === 'y' || input === 'Y') {
         onConfirm();
         setConfirmErase(false);
         return;
       }
 
-      if (input === "n" || input === "N" || key.escape) {
+      if (input === 'n' || input === 'N' || key.escape) {
         setConfirmErase(false);
         onCancel();
         return;

package/src/hooks/useExitHandler.js

@@ -30,37 +30,40 @@ export function useExitHandler({ onBeforeExit } = {}) {
    * @param {string} input - Raw character input from Ink's useInput
    * @returns {boolean} True when the input was consumed, false otherwise
    */
-  const handleExitCommand = useCallback((input) => {
-    if (input !== 'q') {
-      return false;
-    }
+  const handleExitCommand = useCallback(
+    (input) => {
+      if (input !== 'q') {
+        return false;
+      }
 
-    if (typeof onBeforeExit === 'function') {
-      onBeforeExit();
-    }
+      if (typeof onBeforeExit === 'function') {
+        onBeforeExit();
+      }
 
-    const clearTerminal = () => {
-      try {
-        if (process.stdout && process.stdout.isTTY) {
-          process.stdout.write('\u001Bc');
-        } else {
-          console.clear();
+      const clearTerminal = () => {
+        try {
+          if (process.stdout && process.stdout.isTTY) {
+            process.stdout.write('\u001Bc');
+          } else {
+            console.clear();
+          }
+        } catch (err) {
+          // Ignore clear errors to avoid blocking exit.
         }
-      } catch (err) {
-        // Ignore clear errors to avoid blocking exit.
-      }
-    };
+      };
 
-    setTimeout(() => {
-      clearTerminal();
-      exit();
-      if (process.env.NODE_ENV !== 'test') {
-        setTimeout(() => process.exit(0), 50);
-      }
-    }, EXIT_DELAY);
+      setTimeout(() => {
+        clearTerminal();
+        exit();
+        if (process.env.NODE_ENV !== 'test') {
+          setTimeout(() => process.exit(0), 50);
+        }
+      }, EXIT_DELAY);
 
-    return true;
-  }, [exit, onBeforeExit]);
+      return true;
+    },
+    [exit, onBeforeExit]
+  );
 
   return { handleExitCommand };
 }

package/src/index.js

@@ -8,9 +8,13 @@
  * node index.js
  */
 
-import React from "react";
-import { render } from "ink";
-import App from './App';
+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 />);
+render(<App />);