cdd-cli 3.2.0 → 4.0.0

package/src/components/ContainerRow.jsx

@@ -1,14 +1,14 @@
-import React from "react";
-import { Box, Text } from "ink";
-import StatsBar from "./StatsBar.jsx";
+import React from 'react';
+import { Box, Text } from 'ink';
+import StatsBar from './StatsBar.jsx';
 import PropTypes from 'prop-types';
 import { useContainerStats } from '../hooks/useContainerStats.js';
 
 const stateText = (state) => {
-  if (state === "running") return { text: "🟢 RUNNING", color: "green" };
-  if (state === "exited") return { text: "🔴 EXITED", color: "red" };
-  if (state === "paused") return { text: "🟠 PAUSED", color: "yellow" };
-  return { text: state.toUpperCase(), color: "gray" };
+  if (state === 'running') return { text: '🟢 RUNNING', color: 'green' };
+  if (state === 'exited') return { text: '🔴 EXITED', color: 'red' };
+  if (state === 'paused') return { text: '🟠 PAUSED', color: 'yellow' };
+  return { text: state.toUpperCase(), color: 'gray' };
 };
 
 /**
@@ -24,17 +24,17 @@ export default function ContainerRow({ container, isSelected = false }) {
 
   // Format ports for display (no leading space to avoid layout shifts)
   const formatPorts = (ports) => {
-    if (!ports || ports.length === 0) return "";
+    if (!ports || ports.length === 0) return '';
     if (Array.isArray(ports)) {
-      return ports.map((p, _i) => `🔗 ${p}`).join("  ");
+      return ports.map((p, _i) => `🔗 ${p}`).join('  ');
     }
     return `🔗 ${ports}`;
   };
 
   // Helper to truncate long strings to a max length without adding trailing spaces
   const truncate = (s, max = 20) => {
-    if (!s) return "";
-    return s.length > max ? s.slice(0, max - 1) + "…" : s;
+    if (!s) return '';
+    return s.length > max ? s.slice(0, max - 1) + '…' : s;
   };
 
   const stateInfo = stateText(state);
@@ -42,8 +42,8 @@ export default function ContainerRow({ container, isSelected = false }) {
     <Box flexDirection="column" marginBottom={1}>
       <Box flexDirection="row" alignItems="center">
         <Box width={2} minWidth={2} justifyContent="flex-end" paddingRight={1}>
-          <Text color={isSelected ? "green" : undefined}>
-            {isSelected ? "➤" : "  "}
+          <Text color={isSelected ? 'green' : undefined}>
+            {isSelected ? '➤' : '  '}
           </Text>
         </Box>
         <Box width={18} flexShrink={1} paddingRight={1}>
@@ -59,8 +59,11 @@ export default function ContainerRow({ container, isSelected = false }) {
           <Text color="yellow">{formatPorts(container.ports)}</Text>
         </Box>
         <Box flexShrink={0} paddingLeft={1}>
-          {state === "running" ? (
-            <StatsBar cpu={parseFloat(stats.cpuPercent)} mem={parseFloat(stats.memPercent)} />
+          {state === 'running' ? (
+            <StatsBar
+              cpu={parseFloat(stats.cpuPercent)}
+              mem={parseFloat(stats.memPercent)}
+            />
           ) : null}
         </Box>
       </Box>
@@ -75,7 +78,7 @@ ContainerRow.propTypes = {
     name: PropTypes.string.isRequired,
     image: PropTypes.string,
     state: PropTypes.string,
-    ports: PropTypes.oneOfType([PropTypes.array, PropTypes.string])
+    ports: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
   }).isRequired,
   isSelected: PropTypes.bool,
 };

package/src/components/ContainerSection.jsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { Text } from "ink";
-import ContainerList from "./ContainerList.jsx";
+import React from 'react';
+import { Text } from 'ink';
+import ContainerList from './ContainerList.jsx';
 import PropTypes from 'prop-types';
 
 /**

package/src/components/ControlsHUD.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+/**
+ * Returns the contextual keyboard hints for the current wizard state.
+ *
+ * @param {number} step - Current wizard step (0-3)
+ * @param {boolean} hasSuggestions - Whether suggestions/hub results are visible
+ * @param {boolean} isSearchingHub - Whether a Hub search is in progress
+ * @param {boolean} [hasSuggestedEnv=false] - Whether the image has suggestedEnv entries
+ * @returns {{ key: string, label: string }[]}
+ */
+function getHints(step, hasSuggestions, isSearchingHub, hasSuggestedEnv = false) {
+  if (step === 0) {
+    if (hasSuggestions) {
+      return [
+        { key: '↑↓', label: 'Navigate' },
+        { key: 'Enter', label: 'Select' },
+        { key: 'Esc', label: 'Cancel' },
+      ];
+    }
+    const hints = [];
+    if (!isSearchingHub) hints.push({ key: 'Tab', label: 'Search Hub' });
+    hints.push({ key: '↑↓', label: 'Browse' });
+    hints.push({ key: 'Enter', label: 'Confirm' });
+    hints.push({ key: 'Esc', label: 'Cancel' });
+    return hints;
+  }
+  if (step === 3) {
+    const hints = [];
+    if (hasSuggestedEnv) hints.push({ key: 'Tab', label: 'Insert next env' });
+    hints.push({ key: 'Enter', label: 'Continue' });
+    hints.push({ key: 'Esc', label: 'Cancel' });
+    return hints;
+  }
+  return [
+    { key: 'Enter', label: 'Continue' },
+    { key: 'Esc', label: 'Cancel' },
+  ];
+}
+
+/**
+ * Displays a row of contextual keyboard shortcut hints for the active wizard step.
+ *
+ * @param {Object} props
+ * @param {number} props.step - Current wizard step
+ * @param {boolean} [props.hasSuggestions=false] - Whether suggestions/hub results are visible
+ * @param {boolean} [props.isSearchingHub=false] - Whether a Hub search is in progress
+ * @param {boolean} [props.hasSuggestedEnv=false] - Whether the image has suggestedEnv entries
+ */
+function ControlsHUD({ step, hasSuggestions = false, isSearchingHub = false, hasSuggestedEnv = false }) {
+  const hints = getHints(step, hasSuggestions, isSearchingHub, hasSuggestedEnv);
+  return (
+    <Box flexDirection="row" columnGap={2}>
+      {hints.map(({ key, label }) => (
+        <Box key={key}>
+          <Text color="cyan">[{key}]</Text>
+          <Text dimColor> {label}</Text>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+export default ControlsHUD;
+export { getHints, ControlsHUD };

package/src/components/Footer.jsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { Box, Text } from "ink";
+import React from 'react';
+import { Box, Text } from 'ink';
 
 /**
  * Simple footer displayed at the bottom of the interface.

package/src/components/Header.jsx

@@ -1,8 +1,8 @@
-import React from "react";
-import { Box, Text } from "ink";
-import chalk from "chalk";
+import React from 'react';
+import { Box, Text } from 'ink';
+import chalk from 'chalk';
 import PropTypes from 'prop-types';
-import { getAppVersion } from "../helpers/appInfo.js";
+import { getAppVersion } from '../helpers/appInfo.js';
 
 /**
  * Header component displayed at the top of the CLI UI.
@@ -18,18 +18,18 @@ import { getAppVersion } from "../helpers/appInfo.js";
 const VERSION = getAppVersion();
 
 export default function Header({ count }) {
-  const formattedVersion = VERSION === "unknown" ? "unknown" : `v${VERSION}`;
+  const formattedVersion = VERSION === 'unknown' ? 'unknown' : `v${VERSION}`;
 
   return (
     <Box justifyContent="space-between">
       <Text color="cyanBright">
-        🐳 {chalk.bold("CDD")}
+        🐳 {chalk.bold('CDD')}
         <Text color="gray"> — CLI Docker Dashboard</Text>
       </Text>
       <Box flexDirection="column" alignItems="flex-end">
         <Text color="gray">{formattedVersion}</Text>
         <Text color="gray">
-          {count} container{count === 1 ? "" : "s"} found
+          {count} container{count === 1 ? '' : 's'} found
         </Text>
       </Box>
     </Box>

package/src/components/LogViewer.jsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { Text } from "ink";
+import React from 'react';
+import { Text } from 'ink';
 import PropTypes from 'prop-types';
 
 /**
@@ -17,7 +17,9 @@ export default function LogViewer({ logs, onExit: _onExit, container }) {
 
   return (
     <>
-      <Text color="green">{container?.name ?? "Container"} logs, press ESC to exit</Text>
+      <Text color="green">
+        {container?.name ?? 'Container'} logs, press ESC to exit
+      </Text>
       {visibleLogs.length === 0 ? (
         <Text dimColor>No logs...</Text>
       ) : (

package/src/components/MessageFeedback.jsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { Box, Text } from "ink";
+import React from 'react';
+import { Box, Text } from 'ink';
 import PropTypes from 'prop-types';
 
 /**

package/src/components/PromptField.jsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { Text } from "ink";
+import React from 'react';
+import { Text } from 'ink';
 import PropTypes from 'prop-types';
 
 /**
@@ -18,7 +18,7 @@ export function PromptField({ label, value, required }) {
   return (
     <>
       <Text>{label}</Text>
-      <Text color={isEmpty ? "red" : "cyan"}>{value}_</Text>
+      <Text color={isEmpty ? 'red' : 'cyan'}>{value}_</Text>
     </>
   );
 }
@@ -33,7 +33,7 @@ export function PromptField({ label, value, required }) {
  */
 export function PromptMessage({ message, color }) {
   if (!message) return null;
-  return <Text color={color || "yellow"}>{message}</Text>;
+  return <Text color={color || 'yellow'}>{message}</Text>;
 }
 
 PromptField.propTypes = {

package/src/components/StatsBar.jsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { Text } from "ink";
-import chalk from "chalk";
+import React from 'react';
+import { Text } from 'ink';
+import chalk from 'chalk';
 import PropTypes from 'prop-types';
 
 const BAR_WIDTH = 8;
@@ -19,7 +19,9 @@ export default function StatsBar({ cpu, mem }) {
 
   return (
     <Text>
-      CPU:{cpuBar}{colorize(cpu, ` ${formatPercent(cpu)}%`)} MEM:{memBar}{colorize(mem, ` ${formatPercent(mem)}%`)}
+      CPU:{cpuBar}
+      {colorize(cpu, ` ${formatPercent(cpu)}%`)} MEM:{memBar}
+      {colorize(mem, ` ${formatPercent(mem)}%`)}
     </Text>
   );
 }
@@ -38,10 +40,12 @@ StatsBar.propTypes = {
  */
 function makeBar(value, width) {
   const safeWidth = Math.max(1, Math.round(width));
-  const normalized = Number.isFinite(value) ? Math.min(Math.max(value, 0), 100) : 0;
+  const normalized = Number.isFinite(value)
+    ? Math.min(Math.max(value, 0), 100)
+    : 0;
   const filled = Math.round((normalized / 100) * safeWidth);
   const empty = Math.max(0, safeWidth - filled);
-  const bar = "█".repeat(filled) + "░".repeat(empty);
+  const bar = '█'.repeat(filled) + '░'.repeat(empty);
   return colorize(normalized, bar);
 }
 
@@ -49,7 +53,7 @@ function formatPercent(value) {
   if (!Number.isFinite(value)) return 0;
   const normalized = Math.min(Math.max(value, 0), 100);
   if (normalized >= 10) return Math.round(normalized);
-  return normalized.toFixed(1).replace(/\.0$/, "");
+  return normalized.toFixed(1).replace(/\.0$/, '');
 }
 
 /**

package/src/components/SuggestionPanel.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import PropTypes from 'prop-types';
+
+/**
+ * Renders an autocomplete suggestion panel as a boxed list below the image input.
+ * Displays a window of `maxVisible` items starting at `visibleOffset`.
+ * The focused row (selectedIndex) is highlighted cyan with a › prefix.
+ *
+ * @param {Object} props
+ * @param {string[]} props.items - Full list of suggestion strings
+ * @param {number} props.selectedIndex - Currently focused index (-1 = none)
+ * @param {number} props.visibleOffset - First item index of the visible window
+ * @param {number} [props.maxVisible=6] - Maximum number of items visible at once
+ * @returns {JSX.Element|null}
+ */
+export function SuggestionPanel({
+  items,
+  selectedIndex,
+  visibleOffset,
+  maxVisible = 6,
+  isLoading = false,
+}) {
+  const hasItems = items && items.length > 0;
+  if (!hasItems && !isLoading) return null;
+
+  const visible = hasItems ? items.slice(visibleOffset, visibleOffset + maxVisible) : [];
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="cyan"
+      paddingX={1}
+      data-testid="suggestion-panel"
+    >
+      {visible.map((item, localIdx) => {
+        const globalIdx = visibleOffset + localIdx;
+        const isFocused = globalIdx === selectedIndex;
+        return (
+          <Text key={item} color={isFocused ? 'cyan' : undefined} dimColor={!isFocused}>
+            {isFocused ? `› ${item}` : `  ${item}`}
+          </Text>
+        );
+      })}
+      {isLoading && (
+        <Text dimColor color="gray">
+          {'  [searching Docker Hub...]'}
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+SuggestionPanel.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.string).isRequired,
+  selectedIndex: PropTypes.number.isRequired,
+  visibleOffset: PropTypes.number.isRequired,
+  maxVisible: PropTypes.number,
+  isLoading: PropTypes.bool,
+};

package/src/components/UsageMenu.jsx

@@ -1,16 +1,16 @@
-import React from "react";
-import { Box, Text } from "ink";
+import React from 'react';
+import { Box, Text } from 'ink';
 
 const SHORTCUTS = [
-  "Use ↑/↓ for navigation",
-  "I to initiate selected container",
-  "P to stop selected container",
-  "R to restart selected container",
-  "C to create a container",
-  "L to view logs of selected container",
-  "D to toggle debug log panel",
-  "E to remove selected container",
-  "Q to quit",
+  'Use ↑/↓ for navigation',
+  'I to initiate selected container',
+  'P to stop selected container',
+  'R to restart selected container',
+  'C to create a container',
+  'L to view logs of selected container',
+  'D to toggle debug log panel',
+  'E to remove selected container',
+  'Q to quit',
 ];
 
 const GRID_COLUMNS = 3;
@@ -24,7 +24,10 @@ const GRID_COLUMNS = 3;
 export default function UsageMenu() {
   const rowsPerColumn = Math.ceil(SHORTCUTS.length / GRID_COLUMNS);
   const columns = Array.from({ length: GRID_COLUMNS }, (_, columnIndex) =>
-    SHORTCUTS.slice(columnIndex * rowsPerColumn, (columnIndex + 1) * rowsPerColumn)
+    SHORTCUTS.slice(
+      columnIndex * rowsPerColumn,
+      (columnIndex + 1) * rowsPerColumn
+    )
   ).filter((column) => column.length > 0);
 
   return (
@@ -37,7 +40,9 @@ export default function UsageMenu() {
             marginRight={columnIndex === columns.length - 1 ? 0 : 3}
           >
             {column.map((shortcut, rowIndex) => (
-              <Text key={`shortcut-${columnIndex}-${rowIndex}`}>{shortcut}</Text>
+              <Text key={`shortcut-${columnIndex}-${rowIndex}`}>
+                {shortcut}
+              </Text>
             ))}
           </Box>
         ))}

package/src/helpers/appInfo.js

@@ -1,6 +1,6 @@
-import { readFileSync } from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
+import { readFileSync } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
 
 let cachedVersion;
 
@@ -12,12 +12,12 @@ export function getAppVersion() {
   try {
     const __filename = fileURLToPath(import.meta.url);
     const moduleDir = path.dirname(__filename);
-    const packageJsonPath = path.resolve(moduleDir, "../../package.json");
-    const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf8"));
-    cachedVersion = packageJson.version ?? "unknown";
+    const packageJsonPath = path.resolve(moduleDir, '../../package.json');
+    const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
+    cachedVersion = packageJson.version ?? 'unknown';
     return cachedVersion;
   } catch (error) {
-    cachedVersion = "unknown";
+    cachedVersion = 'unknown';
     return cachedVersion;
   }
 }

package/src/helpers/constants.js

@@ -32,19 +32,58 @@ export const TIMEOUTS = {
 /**
  * List of well-known database image names (without tags or registry prefixes).
  */
-export const DB_IMAGES = ["mysql", "mariadb", "postgres", "mongo", "mssql", "redis"];
+export const DB_IMAGES = [
+  'mysql',
+  'mariadb',
+  'postgres',
+  'mongo',
+  'mssql',
+  'redis',
+];
 
 /**
- * Per-image profiles with required env vars and default exposed port.
+ * Per-image profiles with required env vars, default exposed port, and suggested env vars.
  * Keys are normalized image names (no tag, no registry prefix).
  *
- * @type {Record<string, { requiredEnv: string[], defaultPort: string }>}
+ * @type {Record<string, { requiredEnv: string[], defaultPort: string, suggestedEnv: string[] }>}
  */
 export const IMAGE_PROFILES = {
-  mysql:    { requiredEnv: ["MYSQL_ROOT_PASSWORD"], defaultPort: "3306" },
-  mariadb:  { requiredEnv: ["MARIADB_ROOT_PASSWORD"], defaultPort: "3306" },
-  postgres: { requiredEnv: ["POSTGRES_PASSWORD"], defaultPort: "5432" },
-  mongo:    { requiredEnv: [], defaultPort: "27017" },
-  mssql:    { requiredEnv: ["ACCEPT_EULA", "SA_PASSWORD"], defaultPort: "1433" },
-  redis:    { requiredEnv: [], defaultPort: "6379" },
+  nginx:         { requiredEnv: [], defaultPort: '80',    suggestedEnv: [],                                                                                                                  defaultTag: '1.27-alpine' },
+  httpd:         { requiredEnv: [], defaultPort: '80',    suggestedEnv: [],                                                                                                                  defaultTag: '2.4-alpine' },
+  caddy:         { requiredEnv: [], defaultPort: '80',    suggestedEnv: [],                                                                                                                  defaultTag: '2-alpine' },
+  node:          { requiredEnv: [], defaultPort: '3000',  suggestedEnv: ['NODE_ENV=production'],                                                                                              defaultTag: '22-alpine' },
+  python:        { requiredEnv: [], defaultPort: '8000',  suggestedEnv: ['PYTHONUNBUFFERED=1'],                                                                                               defaultTag: '3.12-slim' },
+  openjdk:       { requiredEnv: [], defaultPort: '8080',  suggestedEnv: ['JAVA_OPTS=-Xms256m -Xmx512m'],                                                                                     defaultTag: '21-slim' },
+  golang:        { requiredEnv: [], defaultPort: '8080',  suggestedEnv: ['GOMAXPROCS=2'],                                                                                                     defaultTag: '1.22-alpine' },
+  redis:         { requiredEnv: [], defaultPort: '6379',  suggestedEnv: ['REDIS_PASSWORD=change-me'],                                                                                         defaultTag: '7-alpine' },
+  memcached:     { requiredEnv: [], defaultPort: '11211', suggestedEnv: [],                                                                                                                  defaultTag: '1.6-alpine' },
+  postgres:      { requiredEnv: ['POSTGRES_PASSWORD'], defaultPort: '5432', suggestedEnv: ['POSTGRES_PASSWORD=secret', 'POSTGRES_USER=postgres', 'POSTGRES_DB=app'],                        defaultTag: '17-alpine' },
+  mysql:         { requiredEnv: ['MYSQL_ROOT_PASSWORD'], defaultPort: '3306', suggestedEnv: ['MYSQL_ROOT_PASSWORD=secret', 'MYSQL_DATABASE=app', 'MYSQL_USER=app', 'MYSQL_PASSWORD=app123'], defaultTag: '8.0' },
+  mariadb:       { requiredEnv: ['MARIADB_ROOT_PASSWORD'], defaultPort: '3306', suggestedEnv: ['MARIADB_ROOT_PASSWORD=secret', 'MARIADB_DATABASE=app', 'MARIADB_USER=app', 'MARIADB_PASSWORD=app123'], defaultTag: '11-alpine' },
+  mongo:         { requiredEnv: [], defaultPort: '27017', suggestedEnv: ['MONGO_INITDB_ROOT_USERNAME=admin', 'MONGO_INITDB_ROOT_PASSWORD=secret'],                                           defaultTag: '7.0' },
+  mssql:         { requiredEnv: ['ACCEPT_EULA', 'SA_PASSWORD'], defaultPort: '1433', suggestedEnv: ['ACCEPT_EULA=Y', 'SA_PASSWORD=Strong!Passw0rd', 'MSSQL_PID=Developer'],                  defaultTag: '2022-latest' },
+  rabbitmq:      { requiredEnv: [], defaultPort: '5672',  suggestedEnv: ['RABBITMQ_DEFAULT_USER=guest', 'RABBITMQ_DEFAULT_PASS=guest'],                                                      defaultTag: '3-management-alpine' },
+  kafka:         { requiredEnv: [], defaultPort: '9092',  suggestedEnv: ['KAFKA_CFG_LISTENERS=PLAINTEXT://:9092', 'KAFKA_CFG_ADVERTISED_LISTENERS=PLAINTEXT://localhost:9092'],              defaultTag: '3.7' },
+  zookeeper:     { requiredEnv: [], defaultPort: '2181',  suggestedEnv: ['ALLOW_ANONYMOUS_LOGIN=yes'],                                                                                        defaultTag: '3.9' },
+  elasticsearch: { requiredEnv: [], defaultPort: '9200',  suggestedEnv: ['discovery.type=single-node', 'xpack.security.enabled=false'],                                                      defaultTag: '8.13.0' },
+  minio:         { requiredEnv: ['MINIO_ROOT_USER', 'MINIO_ROOT_PASSWORD'], defaultPort: '9000', suggestedEnv: ['MINIO_ROOT_USER=admin', 'MINIO_ROOT_PASSWORD=secret', 'MINIO_CONSOLE_ADDRESS=:9001'], defaultTag: 'latest' },
+  wordpress:     { requiredEnv: ['WORDPRESS_DB_HOST', 'WORDPRESS_DB_USER', 'WORDPRESS_DB_PASSWORD', 'WORDPRESS_DB_NAME'], defaultPort: '8080', suggestedEnv: ['WORDPRESS_DB_HOST=db', 'WORDPRESS_DB_USER=wp', 'WORDPRESS_DB_PASSWORD=secret', 'WORDPRESS_DB_NAME=wordpress', 'WORDPRESS_TABLE_PREFIX=wp_'], defaultTag: '6.5-apache' },
 };
+
+/**
+ * Given an image name (with or without tag), returns the image name with a
+ * default tag appended when the image matches a known profile and has no
+ * explicit tag. Returns the input unchanged otherwise.
+ *
+ * @param {string} imageName - e.g. 'postgres', 'postgres:15', 'unknownimage'
+ * @param {Record<string, { defaultTag: string }>} profiles
+ * @returns {string}
+ */
+export function resolveImageTag(imageName, profiles = IMAGE_PROFILES) {
+  if (!imageName) return imageName;
+  if (imageName.includes(':')) return imageName;
+  const baseName = imageName.trim().toLowerCase().split('/').pop();
+  const profile = profiles[baseName];
+  if (!profile?.defaultTag) return imageName;
+  return `${imageName}:${profile.defaultTag}`;
+}

package/src/helpers/containerOptionsBuilder.js

@@ -13,15 +13,26 @@
  *                                            (e.g. "NODE_ENV=production,PORT=3000")
  * @returns {object} Docker container options ready to pass to createContainer
  */
-export function buildContainerOptions({ imageName: _imageName, containerName, portInput, envInput }) {
-  const env = (envInput || "").split(",").map(s => s.trim()).filter(Boolean);
-  const ports = (portInput || "").split(",").map(s => s.trim()).filter(Boolean);
+export function buildContainerOptions({
+  imageName: _imageName,
+  containerName,
+  portInput,
+  envInput,
+}) {
+  const env = (envInput || '')
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean);
+  const ports = (portInput || '')
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean);
 
   const ExposedPorts = {};
   const PortBindings = {};
 
-  ports.forEach(pair => {
-    const [host, cont] = pair.split(":");
+  ports.forEach((pair) => {
+    const [host, cont] = pair.split(':');
     if (!host || !cont) return;
     const key = `${cont}/tcp`;
     ExposedPorts[key] = {};

package/src/helpers/dockerHubService.js

@@ -0,0 +1,75 @@
+/**
+ * Docker Hub search helper.
+ * Pure function — no side effects beyond HTTP. All state management
+ * lives in the calling hook (useContainerCreation).
+ */
+
+const DOCKER_HUB_SEARCH_URL =
+  'https://hub.docker.com/v2/search/repositories/';
+
+/**
+ * Format a Docker Hub search result object into a display string.
+ *
+ * Format rules:
+ *   - Official: "name [★ official] [Npulls+]" (if pullCount > 0)
+ *   - Non-official with pulls: "name [Npulls+]"
+ *   - Otherwise: "name"
+ *
+ * Pull count suffixes: ≥1B → "1B+", ≥1M → "1M+", ≥1K → "1K+", else raw number
+ *
+ * @param {{ name: string, isOfficial: boolean, pullCount: number }} result
+ * @returns {string}
+ */
+export function formatHubResult(result) {
+  const { name, isOfficial, pullCount } = result;
+
+  let pullSuffix = '';
+  if (pullCount >= 1e9) {
+    pullSuffix = ` [1B+ pulls]`;
+  } else if (pullCount >= 1e6) {
+    pullSuffix = ` [${Math.floor(pullCount / 1e6)}M+ pulls]`;
+  } else if (pullCount >= 1e3) {
+    pullSuffix = ` [${Math.floor(pullCount / 1e3)}K+ pulls]`;
+  } else if (pullCount > 0) {
+    pullSuffix = ` [${pullCount} pulls]`;
+  }
+
+  if (isOfficial) {
+    return `${name} [★ official]${pullSuffix}`;
+  }
+
+  return `${name}${pullSuffix}`;
+}
+
+/**
+ * Search Docker Hub for images matching the given query.
+ *
+ * @param {string} query - Search term (will be trimmed and encoded)
+ * @param {Object} [options]
+ * @param {AbortSignal} [options.signal] - Abort signal; defaults to AbortSignal.timeout(5000)
+ * @returns {Promise<Array<{ name: string, isOfficial: boolean, pullCount: number, description: string }>>}
+ * @throws {Error} If response.ok is false or the network call rejects
+ */
+export async function searchDockerHub(query, options = {}) {
+  const q = query.trim();
+  if (!q) return [];
+
+  const url = `${DOCKER_HUB_SEARCH_URL}?query=${encodeURIComponent(q)}&page_size=10`;
+  const signal = options.signal ?? AbortSignal.timeout(5000);
+
+  const response = await fetch(url, { signal });
+
+  if (!response.ok) {
+    throw new Error(`Docker Hub search failed: ${response.status}`);
+  }
+
+  const data = await response.json();
+  const results = data.results ?? [];
+
+  return results.map((item) => ({
+    name: item.repo_name,
+    isOfficial: item.is_official,
+    pullCount: item.pull_count,
+    description: item.short_description,
+  }));
+}

package/src/helpers/dockerService/dockerService.js

@@ -1,4 +1,4 @@
-import Docker from "dockerode";
+import Docker from 'dockerode';
 
 // Use default dockerode configuration which automatically handles:
 // - /var/run/docker.sock on Linux/Mac