cdd-cli 3.2.0 → 4.0.0

package/dist/hooks/useContainerCommandRouter.js

@@ -2,7 +2,7 @@ function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present,
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
-import { useCallback } from "react";
+import { useCallback } from 'react';
 
 /**
  * Hook responsible solely for routing Docker action keystrokes to the correct handler.
@@ -41,7 +41,7 @@ export function useContainerCommandRouter(_ref) {
     onStartCreate = _ref.onStartCreate;
   var handleDockerCommands = useCallback(function (input) {
     var container = containers[selected];
-    if (input === "i") {
+    if (input === 'i') {
       actions.handleAction({
         actionFn: function () {
           var _actionFn = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(id) {
@@ -60,15 +60,15 @@ export function useContainerCommandRouter(_ref) {
           }
           return actionFn;
         }(),
-        actionLabel: "Starting",
+        actionLabel: 'Starting',
         selected: selected,
         stateCheck: function stateCheck(c) {
-          return (c.state === "running" || c.status === "running") && "Container is already running.";
+          return (c.state === 'running' || c.status === 'running') && 'Container is already running.';
         }
       });
       return true;
     }
-    if (input === "p") {
+    if (input === 'p') {
       actions.handleAction({
         actionFn: function () {
           var _actionFn2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(id) {
@@ -87,15 +87,15 @@ export function useContainerCommandRouter(_ref) {
           }
           return actionFn;
         }(),
-        actionLabel: "Stopping",
+        actionLabel: 'Stopping',
         selected: selected,
         stateCheck: function stateCheck(c) {
-          return (c.state === "exited" || c.status === "exited" || c.state === "stopped" || c.status === "stopped") && "Container is already stopped.";
+          return (c.state === 'exited' || c.status === 'exited' || c.state === 'stopped' || c.status === 'stopped') && 'Container is already stopped.';
         }
       });
       return true;
     }
-    if (input === "r") {
+    if (input === 'r') {
       actions.handleAction({
         actionFn: function () {
           var _actionFn3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(id) {
@@ -114,19 +114,19 @@ export function useContainerCommandRouter(_ref) {
           }
           return actionFn;
         }(),
-        actionLabel: "Restarting",
+        actionLabel: 'Restarting',
         selected: selected
       });
       return true;
     }
-    if (input === "e") {
+    if (input === 'e') {
       if (!container) {
         return true;
       }
       onStartErase();
       return true;
     }
-    if (input === "l") {
+    if (input === 'l') {
       if (!container) {
         return true;
       }
@@ -134,12 +134,12 @@ export function useContainerCommandRouter(_ref) {
       startLogsStream(container.id);
       return true;
     }
-    if (input === "c") {
-      onStartCreate();
+    if (input === 'c') {
       creation.resetCreation();
+      onStartCreate();
       return true;
     }
-    if (input === "d") {
+    if (input === 'd') {
       onToggleDebug();
       return true;
     }

package/dist/hooks/useContainers.js

@@ -18,9 +18,9 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
  * // Use in a component
  * const { containers } = useContainers();
  */
-import React, { useState, useEffect } from "react";
-import { getContainers } from "../helpers/dockerService/serviceComponents/containerList.js";
-import { REFRESH_INTERVALS } from "../helpers/constants.js";
+import React, { useState, useEffect } from 'react';
+import { getContainers } from '../helpers/dockerService/serviceComponents/containerList.js';
+import { REFRESH_INTERVALS } from '../helpers/constants.js';
 export function useContainers() {
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),

package/dist/hooks/useControls.js

@@ -12,19 +12,20 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import React from "react";
-import { useInput } from "ink";
-import { useContainerActions } from "./creation/useContainerActions.js";
-import { useContainerCreation } from "./creation/useContainerCreation.js";
-import { useLogsViewer } from "./creation/useLogsViewer.js";
-import { useContainerSelection } from "./navigation/useContainerSelection.js";
-import { useDebugLogs } from "./debug/useDebugLogs.js";
-import { useEraseConfirmation } from "./useEraseConfirmation.js";
-import { useExitHandler } from "./useExitHandler.js";
-import { useContainerCommandRouter } from "./useContainerCommandRouter.js";
-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 React from 'react';
+import { useInput } from 'ink';
+import { useContainerActions } from './creation/useContainerActions.js';
+import { useContainerCreation } from './creation/useContainerCreation.js';
+import { useLogsViewer } from './creation/useLogsViewer.js';
+import { useContainerSelection } from './navigation/useContainerSelection.js';
+import { useDebugLogs } from './debug/useDebugLogs.js';
+import { useEraseConfirmation } from './useEraseConfirmation.js';
+import { useExitHandler } from './useExitHandler.js';
+import { useContainerCommandRouter } from './useContainerCommandRouter.js';
+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
 /**
@@ -35,7 +36,9 @@ import { buildContainerOptions } from "../helpers/containerOptionsBuilder.js";
  * @returns {Object} controls - API for the App component
  */
 export function useControls() {
+  var _overrides$triggerHub, _overrides$isSearchin;
   var containers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var overrides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     creatingContainer = _React$useState2[0],
@@ -48,7 +51,7 @@ export function useControls() {
   var creation = useContainerCreation({
     onCreate: function () {
       var _onCreate = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(_ref) {
-        var imageName, containerName, portInput, envInput, options, id, _t;
+        var imageName, containerName, portInput, envInput, options, _yield$svcCreateConta, id, ports, portMsg, _t;
         return _regenerator().w(function (_context) {
           while (1) switch (_context.p = _context.n) {
             case 0:
@@ -59,22 +62,27 @@ export function useControls() {
                 portInput: portInput,
                 envInput: envInput
               });
-              actions.setMessage("Creating container ".concat(imageName, "..."));
-              actions.setMessageColor("yellow");
+              actions.setTimedMessage("Creating container ".concat(imageName, "..."), 'yellow');
               _context.p = 1;
               _context.n = 2;
               return svcCreateContainer(imageName, options);
             case 2:
-              id = _context.v;
-              actions.setMessage("Created container ".concat(id));
-              actions.setMessageColor("green");
+              _yield$svcCreateConta = _context.v;
+              id = _yield$svcCreateConta.id;
+              ports = _yield$svcCreateConta.ports;
+              portMsg = '';
+              if (ports && ports.length) {
+                portMsg = ' | Ports: ' + ports.map(function (p) {
+                  return "".concat(p.hostPort, "\u2192").concat(p.containerPort, "/").concat(p.protocol);
+                }).join(', ');
+              }
+              actions.setTimedMessage("Created container ".concat(id).concat(portMsg), 'green');
               _context.n = 4;
               break;
             case 3:
               _context.p = 3;
               _t = _context.v;
-              actions.setMessage("Error creating container: ".concat(_t.message));
-              actions.setMessageColor("red");
+              actions.setTimedMessage("Error creating container: ".concat(_t.message), 'red');
             case 4:
               _context.p = 4;
               setCreatingContainer(false);
@@ -92,11 +100,16 @@ export function useControls() {
     onCancel: function onCancel() {
       return setCreatingContainer(false);
     },
-    dbImages: ["mysql", "mariadb", "postgres", "mongo", "mssql", "redis"]
+    dbImages: DB_IMAGES
   });
   var logsViewer = useLogsViewer();
   var selection = useContainerSelection(containers.length);
   var debugLogs = useDebugLogs();
+
+  // Allow overrides for testability (e.g. injecting a mock triggerHubSearch)
+  var triggerHubSearch = (_overrides$triggerHub = overrides.triggerHubSearch) !== null && _overrides$triggerHub !== void 0 ? _overrides$triggerHub : creation.triggerHubSearch;
+  var isSearchingHub = (_overrides$isSearchin = overrides.isSearchingHub) !== null && _overrides$isSearchin !== void 0 ? _overrides$isSearchin : creation.isSearchingHub;
+  var insertNextSuggestedEnv = overrides.insertNextSuggestedEnv !== undefined ? overrides.insertNextSuggestedEnv : creation.insertNextSuggestedEnv;
   var eraseConfirmation = useEraseConfirmation({
     onConfirm: function onConfirm() {
       actions.handleAction({
@@ -117,14 +130,14 @@ export function useControls() {
           }
           return actionFn;
         }(),
-        actionLabel: "Erasing",
+        actionLabel: 'Erasing',
         selected: selection.selected
       });
-      actions.setMessageColor("yellow");
+      actions.setMessageColor('yellow');
     },
     onCancel: function onCancel() {
-      actions.setMessage("");
-      actions.setMessageColor("");
+      actions.setMessage('');
+      actions.setMessageColor('');
     }
   });
 
@@ -135,7 +148,7 @@ export function useControls() {
   var startLogsStream = React.useCallback(function (containerId) {
     getLogsStream(containerId, function (data) {
       return logsViewer.setLogs(function (prev) {
-        var newLogs = [].concat(_toConsumableArray(prev), _toConsumableArray(data.split("\n").filter(Boolean)));
+        var newLogs = [].concat(_toConsumableArray(prev), _toConsumableArray(data.split('\n').filter(Boolean)));
         return newLogs.slice(-1000);
       });
     }, function () {}, function (err) {
@@ -153,8 +166,8 @@ export function useControls() {
     startLogsStream: startLogsStream,
     onStartErase: function 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: function onToggleDebug() {
       return debugLogs.setShowDebugLogs(function (prev) {
@@ -167,8 +180,8 @@ export function useControls() {
   });
   var exitHandler = useExitHandler({
     onBeforeExit: function onBeforeExit() {
-      actions.setMessage("Exiting...");
-      actions.setMessageColor("yellow");
+      actions.setMessage('Exiting...');
+      actions.setMessageColor('yellow');
       logsViewer.closeLogs();
       debugLogs.setShowDebugLogs(false);
     }
@@ -181,35 +194,69 @@ export function useControls() {
     var step = creation.step;
     var removeLastChar = function removeLastChar(setter) {
       return setter(function (value) {
-        return (value || "").slice(0, -1);
+        return (value || '').slice(0, -1);
       });
     };
     var appendChar = function appendChar(setter, current, ch) {
-      return setter((current || "") + ch);
+      return setter((current || '') + ch);
     };
     if (key.escape) {
       creation.cancelCreation();
       setCreatingContainer(false);
       return;
     }
-    if (input === "\r" || input === "\n") {
+    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;
     }
+
+    // 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 === null || insertNextSuggestedEnv === void 0 || insertNextSuggestedEnv();
+      }
+      return;
+    }
+
+    // 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) removeLastChar(creation.setImageName);
+      if (step === 0) {
+        var 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) appendChar(creation.setImageName, creation.imageName, input);
+      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]);
+  }, [creation, setCreatingContainer, triggerHubSearch, isSearchingHub, insertNextSuggestedEnv]);
 
   // Single keyboard entry point
   useInput(function (input, key) {
@@ -218,7 +265,7 @@ export function useControls() {
       return;
     }
     if (logsViewer.showLogs) {
-      if (input === "q" || key.escape) {
+      if (input === 'q' || key.escape) {
         logsViewer.closeLogs();
       }
       return;

package/dist/hooks/useEraseConfirmation.js

@@ -4,7 +4,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import { useState, useCallback } from "react";
+import { useState, useCallback } from 'react';
 
 /**
  * Hook to manage the erase confirmation dialog flow.
@@ -28,12 +28,12 @@ export function useEraseConfirmation(_ref) {
     setConfirmErase(true);
   }, []);
   var processEraseConfirmation = useCallback(function (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/dist/index.js

@@ -7,8 +7,15 @@
  * // Run the CLI
  * node index.js
  */
-import React from "react";
-import { render } from "ink";
+import React from 'react';
+import { render } from 'ink';
 import App from './App.js';
+import { logger } from './helpers/logger.js';
+process.on('uncaughtException', function (err) {
+  return logger.error('Uncaught exception', err);
+});
+process.on('unhandledRejection', function (reason) {
+  return logger.error('Unhandled rejection', reason);
+});
 console.clear();
 render(/*#__PURE__*/React.createElement(App, null));

package/jest.config.cjs

@@ -3,5 +3,12 @@ module.exports = {
   setupFilesAfterEnv: ['./test/jest.setup.js'],
   transform: {
     '^.+\\.[tj]sx?$': 'babel-jest'
+  },
+  // Allow babel-jest to transform ESM-only packages used by components
+  transformIgnorePatterns: [
+    '/node_modules/(?!(ink|ink-testing-library|ansi-styles|chalk|cli-cursor|cli-spinners|is-unicode-supported|restore-cursor|signal-exit|slice-ansi|strip-ansi|wrap-ansi|yoga-layout-prebuilt)/)'
+  ],
+  moduleNameMapper: {
+    '^ink$': '<rootDir>/__mocks__/ink.cjs'
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cdd-cli",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "description": "CLI Docker Dashboard",
   "main": "index.js",
   "scripts": {
@@ -8,7 +8,9 @@
     "build": "NODE_ENV=production babel src --out-dir dist --extensions .js,.jsx && node fix-imports.cjs",
     "changes": "npm run build && node dist/index.js",
     "lint": "eslint src --ext .js,.jsx",
-    "docs": "jsdoc -r -d docs src"
+    "docs": "jsdoc -r -d docs src",
+    "format": "prettier --write \"src/**/*.{js,jsx}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx}\""
   },
   "keywords": [],
   "author": "",
@@ -35,9 +37,11 @@
     "babel-jest": "^29.6.1",
     "babel-plugin-module-resolver": "^5.0.2",
     "eslint": "^8.50.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",
     "jest": "^29.6.1",
     "jest-environment-jsdom": "^29.7.0",
-    "jsdoc": "^4.0.5"
+    "jsdoc": "^4.0.5",
+    "prettier": "^3.8.3"
   }
 }

package/src/App.jsx

@@ -9,17 +9,17 @@
  * // Render the app
  * <App />
  */
-import React from "react";
-import { Box, Text, Spacer } from "ink";
-import { useContainers } from "./hooks/useContainers.js";
-import { useControls } from "./hooks/useControls.js";
-import ContainerSection from "./components/ContainerSection.jsx";
-import MessageFeedback from "./components/MessageFeedback.jsx";
-import Header from "./components/Header.jsx";
-import LogViewer from "./components/LogViewer.jsx";
-import ContainerCreationPrompt from "./components/ContainerCreationPrompt.jsx";
-import UsageMenu from "./components/UsageMenu.jsx";
-import Footer from "./components/Footer.jsx";
+import React from 'react';
+import { Box, Text, Spacer } from 'ink';
+import { useContainers } from './hooks/useContainers.js';
+import { useControls } from './hooks/useControls.js';
+import ContainerSection from './components/ContainerSection.jsx';
+import MessageFeedback from './components/MessageFeedback.jsx';
+import Header from './components/Header.jsx';
+import LogViewer from './components/LogViewer.jsx';
+import ContainerCreationPrompt from './components/ContainerCreationPrompt.jsx';
+import UsageMenu from './components/UsageMenu.jsx';
+import Footer from './components/Footer.jsx';
 
 export default function App() {
   const { containers } = useContainers();
@@ -35,6 +35,12 @@ export default function App() {
         envInput={controls.envInput}
         message={controls.message}
         messageColor={controls.messageColor}
+        suggestions={controls.creation.suggestions}
+        selectedSuggestionIndex={controls.creation.selectedSuggestionIndex}
+        visibleOffset={controls.creation.visibleOffset}
+        isSearchingHub={controls.creation.isSearchingHub}
+        hubResults={controls.creation.hubResults}
+        hasSuggestedEnv={controls.creation.hasSuggestedEnv}
       />
     );
   }
@@ -49,18 +55,35 @@ export default function App() {
       >
         <Header count={containers.length} />
         <Text> </Text>
-        <ContainerSection containers={containers} selected={controls.selected} />
+        <ContainerSection
+          containers={containers}
+          selected={controls.selected}
+        />
         <Spacer />
-        <MessageFeedback message={controls.message} color={controls.messageColor} />
+        <MessageFeedback
+          message={controls.message}
+          color={controls.messageColor}
+        />
         <UsageMenu />
         {controls.showDebugLogs && (
-          <Box marginTop={1} flexDirection="column" borderStyle="round" borderColor="gray" padding={1}>
+          <Box
+            marginTop={1}
+            flexDirection="column"
+            borderStyle="round"
+            borderColor="gray"
+            padding={1}
+          >
             <Text color="cyan">Debug log — press D or ESC to close</Text>
             {controls.debugLogs.length === 0 ? (
-              <Text dimColor>No debug entries yet. Run with CDD_LOG_LEVEL=debug for verbose output.</Text>
+              <Text dimColor>
+                No debug entries yet. Run with CDD_LOG_LEVEL=debug for verbose
+                output.
+              </Text>
             ) : (
               controls.debugLogs.slice(-15).map((line, idx) => (
-                <Text key={idx} color="gray">{line}</Text>
+                <Text key={idx} color="gray">
+                  {line}
+                </Text>
               ))
             )}
           </Box>

package/src/components/ContainerCreationPrompt.jsx

@@ -1,6 +1,8 @@
-import React from "react";
-import { Box, Text } from "ink";
-import { PromptField, PromptMessage } from "./PromptField.jsx";
+import React from 'react';
+import { Box } from 'ink';
+import { PromptField, PromptMessage } from './PromptField.jsx';
+import { SuggestionPanel } from './SuggestionPanel.jsx';
+import { ControlsHUD } from './ControlsHUD.jsx';
 import PropTypes from 'prop-types';
 
 /**
@@ -16,38 +18,71 @@ import PropTypes from 'prop-types';
  * @param {string} props.envInput - Value for the environment variables field
  * @param {string} props.message - Contextual message to display (errors/hints)
  * @param {string} props.messageColor - Color for the contextual message
+ * @param {string[]} [props.suggestions] - Autocomplete suggestions (shown only on step 0)
+ * @param {number} [props.selectedSuggestionIndex] - Currently focused suggestion index
+ * @param {number} [props.visibleOffset] - First visible suggestion offset
  * @returns {JSX.Element}
  */
 export default function ContainerCreationPrompt(props) {
-  const { step, imageName, containerName, portInput, envInput, message, messageColor } = props;
+  const {
+    step,
+    imageName,
+    containerName,
+    portInput,
+    envInput,
+    message,
+    messageColor,
+    suggestions = [],
+    selectedSuggestionIndex = -1,
+    visibleOffset = 0,
+    hubResults = null,
+    isSearchingHub = false,
+    hasSuggestedEnv = false,
+  } = props;
   const prompts = [
     {
-      label: "Name of the image to create (e.g., nginx:latest):",
+      label: 'Name of the image to create (e.g., nginx:1.27-alpine):',
       value: imageName,
       required: true,
     },
     {
-      label: "Name of the container (optional):",
+      label: 'Name of the container (optional):',
       value: containerName,
       required: false,
     },
     {
-      label: "Ports (optional, format 8080:80,443:443):",
+      label: 'Ports (optional, format 8080:80,443:443):',
       value: portInput,
       required: false,
     },
     {
-      label: "Environment variables (optional, format VAR1=val1,VAR2=val2):",
+      label: 'Environment variables (optional, format VAR1=val1,VAR2=val2):',
       value: envInput,
       required: false,
     },
   ];
   const { label, value, required } = prompts[step] || {};
+  const activeItems = hubResults ?? suggestions;
+  const showSuggestions = step === 0 && (isSearchingHub || activeItems.length > 0);
+  const hasSuggestions = (suggestions?.length > 0) || (hubResults?.length > 0);
   return (
-    <Box flexDirection="column" borderStyle="round" borderColor="yellow" padding={1}>
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="yellow"
+      padding={1}
+    >
       <PromptField label={label} value={value} required={required} />
+      {showSuggestions && (
+        <SuggestionPanel
+          items={activeItems}
+          selectedIndex={selectedSuggestionIndex}
+          visibleOffset={visibleOffset}
+          isLoading={isSearchingHub}
+        />
+      )}
       <PromptMessage message={message} color={messageColor} />
-      <Text dimColor>Press Enter to continue, Escape to cancel</Text>
+      <ControlsHUD step={step} hasSuggestions={hasSuggestions} isSearchingHub={isSearchingHub} hasSuggestedEnv={hasSuggestedEnv} />
     </Box>
   );
 }
@@ -60,4 +95,13 @@ ContainerCreationPrompt.propTypes = {
   envInput: PropTypes.string,
   message: PropTypes.string,
   messageColor: PropTypes.string,
+  suggestions: PropTypes.arrayOf(PropTypes.string),
+  selectedSuggestionIndex: PropTypes.number,
+  visibleOffset: PropTypes.number,
+  hubResults: PropTypes.arrayOf(PropTypes.string),
+  isSearchingHub: PropTypes.bool,
+  hasSuggestedEnv: PropTypes.bool,
 };
+
+// Named export for test compatibility with jest ESM interop
+export { ContainerCreationPrompt };

package/src/components/ContainerList.jsx

@@ -9,10 +9,10 @@
  * // Render with containers
  * <ContainerList containers={containers} />
  */
-import React from "react";
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Box } from "ink";
-import ContainerRow from "./ContainerRow.jsx";
+import { Box } from 'ink';
+import ContainerRow from './ContainerRow.jsx';
 
 export default function ContainerList({ containers, selected }) {
   return (