cdd-cli 3.2.2 → 4.0.0

package/dist/hooks/useControls.js

@@ -36,7 +36,9 @@ import { DB_IMAGES } from '../helpers/constants.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],
@@ -60,8 +62,7 @@ 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);
@@ -75,15 +76,13 @@ export function useControls() {
                   return "".concat(p.hostPort, "\u2192").concat(p.containerPort, "/").concat(p.protocol);
                 }).join(', ');
               }
-              actions.setMessage("Created container ".concat(id).concat(portMsg));
-              actions.setMessageColor('green');
+              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);
@@ -106,6 +105,11 @@ export function useControls() {
   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({
@@ -211,6 +215,18 @@ export function useControls() {
       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) {
@@ -240,7 +256,7 @@ export function useControls() {
       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) {

package/dist/index.js

@@ -10,5 +10,12 @@
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cdd-cli",
-  "version": "3.2.2",
+  "version": "4.0.0",
   "description": "CLI Docker Dashboard",
   "main": "index.js",
   "scripts": {

package/src/App.jsx

@@ -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}
       />
     );
   }

package/src/components/ContainerCreationPrompt.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { Box, Text } from 'ink';
+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';
 
 /**
@@ -34,10 +35,13 @@ export default function ContainerCreationPrompt(props) {
     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,
     },
@@ -58,7 +62,9 @@ export default function ContainerCreationPrompt(props) {
     },
   ];
   const { label, value, required } = prompts[step] || {};
-  const showSuggestions = step === 0 && suggestions.length > 0;
+  const activeItems = hubResults ?? suggestions;
+  const showSuggestions = step === 0 && (isSearchingHub || activeItems.length > 0);
+  const hasSuggestions = (suggestions?.length > 0) || (hubResults?.length > 0);
   return (
     <Box
       flexDirection="column"
@@ -69,13 +75,14 @@ export default function ContainerCreationPrompt(props) {
       <PromptField label={label} value={value} required={required} />
       {showSuggestions && (
         <SuggestionPanel
-          items={suggestions}
+          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>
   );
 }
@@ -91,6 +98,9 @@ ContainerCreationPrompt.propTypes = {
   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

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/SuggestionPanel.jsx

@@ -19,10 +19,12 @@ export function SuggestionPanel({
   selectedIndex,
   visibleOffset,
   maxVisible = 6,
+  isLoading = false,
 }) {
-  if (!items || items.length === 0) return null;
+  const hasItems = items && items.length > 0;
+  if (!hasItems && !isLoading) return null;
 
-  const visible = items.slice(visibleOffset, visibleOffset + maxVisible);
+  const visible = hasItems ? items.slice(visibleOffset, visibleOffset + maxVisible) : [];
 
   return (
     <Box
@@ -41,6 +43,11 @@ export function SuggestionPanel({
           </Text>
         );
       })}
+      {isLoading && (
+        <Text dimColor color="gray">
+          {'  [searching Docker Hub...]'}
+        </Text>
+      )}
     </Box>
   );
 }
@@ -50,4 +57,5 @@ SuggestionPanel.propTypes = {
   selectedIndex: PropTypes.number.isRequired,
   visibleOffset: PropTypes.number.isRequired,
   maxVisible: PropTypes.number,
+  isLoading: PropTypes.bool,
 };

package/src/helpers/constants.js

@@ -48,24 +48,42 @@ export const DB_IMAGES = [
  * @type {Record<string, { requiredEnv: string[], defaultPort: string, suggestedEnv: string[] }>}
  */
 export const IMAGE_PROFILES = {
-  nginx:         { requiredEnv: [], defaultPort: '80',    suggestedEnv: [] },
-  httpd:         { requiredEnv: [], defaultPort: '80',    suggestedEnv: [] },
-  caddy:         { requiredEnv: [], defaultPort: '80',    suggestedEnv: [] },
-  node:          { requiredEnv: [], defaultPort: '3000',  suggestedEnv: ['NODE_ENV=production'] },
-  python:        { requiredEnv: [], defaultPort: '8000',  suggestedEnv: ['PYTHONUNBUFFERED=1'] },
-  openjdk:       { requiredEnv: [], defaultPort: '8080',  suggestedEnv: ['JAVA_OPTS=-Xms256m -Xmx512m'] },
-  golang:        { requiredEnv: [], defaultPort: '8080',  suggestedEnv: ['GOMAXPROCS=2'] },
-  redis:         { requiredEnv: [], defaultPort: '6379',  suggestedEnv: ['REDIS_PASSWORD=change-me'] },
-  memcached:     { requiredEnv: [], defaultPort: '11211', suggestedEnv: [] },
-  postgres:      { requiredEnv: ['POSTGRES_PASSWORD'], defaultPort: '5432', suggestedEnv: ['POSTGRES_USER=postgres', 'POSTGRES_DB=app'] },
-  mysql:         { requiredEnv: ['MYSQL_ROOT_PASSWORD'], defaultPort: '3306', suggestedEnv: ['MYSQL_DATABASE=app', 'MYSQL_USER=app', 'MYSQL_PASSWORD=app123'] },
-  mariadb:       { requiredEnv: ['MARIADB_ROOT_PASSWORD'], defaultPort: '3306', suggestedEnv: ['MARIADB_DATABASE=app', 'MARIADB_USER=app', 'MARIADB_PASSWORD=app123'] },
-  mongo:         { requiredEnv: [], defaultPort: '27017', suggestedEnv: ['MONGO_INITDB_ROOT_USERNAME=admin', 'MONGO_INITDB_ROOT_PASSWORD=secret'] },
-  mssql:         { requiredEnv: ['ACCEPT_EULA', 'SA_PASSWORD'], defaultPort: '1433', suggestedEnv: ['ACCEPT_EULA=Y', 'MSSQL_PID=Developer'] },
-  rabbitmq:      { requiredEnv: [], defaultPort: '5672',  suggestedEnv: ['RABBITMQ_DEFAULT_USER=guest', 'RABBITMQ_DEFAULT_PASS=guest'] },
-  kafka:         { requiredEnv: [], defaultPort: '9092',  suggestedEnv: ['KAFKA_CFG_LISTENERS=PLAINTEXT://:9092', 'KAFKA_CFG_ADVERTISED_LISTENERS=PLAINTEXT://localhost:9092'] },
-  zookeeper:     { requiredEnv: [], defaultPort: '2181',  suggestedEnv: ['ALLOW_ANONYMOUS_LOGIN=yes'] },
-  elasticsearch: { requiredEnv: [], defaultPort: '9200',  suggestedEnv: ['discovery.type=single-node', 'xpack.security.enabled=false'] },
-  minio:         { requiredEnv: ['MINIO_ROOT_USER', 'MINIO_ROOT_PASSWORD'], defaultPort: '9000', suggestedEnv: ['MINIO_CONSOLE_ADDRESS=:9001'] },
-  wordpress:     { requiredEnv: ['WORDPRESS_DB_HOST', 'WORDPRESS_DB_USER', 'WORDPRESS_DB_PASSWORD', 'WORDPRESS_DB_NAME'], defaultPort: '8080', suggestedEnv: ['WORDPRESS_TABLE_PREFIX=wp_'] },
+  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/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/logger.js

@@ -58,8 +58,7 @@ 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;

package/src/hooks/creation/useContainerActions.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { safeCall } from '../../helpers/safeCall.js';
 import {
   startContainer as svcStartContainer,
@@ -20,6 +20,19 @@ export function useContainerActions({ containers, onAction }) {
   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.
    * @param {Function} actionFn - The async action function (start, stop, etc)
@@ -42,20 +55,20 @@ export function useContainerActions({ containers, onAction }) {
     setMessageColor('yellow');
     try {
       await actionFn(container.id);
-      setMessage(`${actionLabel} container successful.`);
-      setMessageColor('green');
+      setTimedMessage(`${actionLabel} container successful.`, 'green');
       safeCall(onAction);
     } catch (err) {
-      setMessage(
-        `Failed to ${actionLabel.toLowerCase()} container: ${err.message}`
+      setTimedMessage(
+        `Failed to ${actionLabel.toLowerCase()} container: ${err.message}`,
+        'red'
       );
-      setMessageColor('red');
     }
   }
 
   return {
     message,
     setMessage,
+    setTimedMessage,
     messageColor,
     setMessageColor,
     handleAction,