cdd-cli 3.2.0 → 3.2.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
 /**
@@ -48,7 +49,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:
@@ -60,21 +61,29 @@ export function useControls() {
                 envInput: envInput
               });
               actions.setMessage("Creating container ".concat(imageName, "..."));
-              actions.setMessageColor("yellow");
+              actions.setMessageColor('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.setMessage("Created container ".concat(id).concat(portMsg));
+              actions.setMessageColor('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.setMessageColor('red');
             case 4:
               _context.p = 4;
               setCreatingContainer(false);
@@ -92,7 +101,7 @@ 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);
@@ -117,14 +126,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 +144,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 +162,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 +176,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,30 +190,52 @@ 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;
     }
+
+    // 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);
@@ -218,7 +249,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,8 @@
  * // 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';
 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": "3.2.2",
   "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();
@@ -49,18 +49,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,7 @@
-import React from "react";
-import { Box, Text } from "ink";
-import { PromptField, PromptMessage } from "./PromptField.jsx";
+import React from 'react';
+import { Box, Text } from 'ink';
+import { PromptField, PromptMessage } from './PromptField.jsx';
+import { SuggestionPanel } from './SuggestionPanel.jsx';
 import PropTypes from 'prop-types';
 
 /**
@@ -16,36 +17,63 @@ 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,
+  } = props;
   const prompts = [
     {
-      label: "Name of the image to create (e.g., nginx:latest):",
+      label: 'Name of the image to create (e.g., nginx:latest):',
       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 showSuggestions = step === 0 && suggestions.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={suggestions}
+          selectedIndex={selectedSuggestionIndex}
+          visibleOffset={visibleOffset}
+        />
+      )}
       <PromptMessage message={message} color={messageColor} />
       <Text dimColor>Press Enter to continue, Escape to cancel</Text>
     </Box>
@@ -60,4 +88,10 @@ ContainerCreationPrompt.propTypes = {
   envInput: PropTypes.string,
   message: PropTypes.string,
   messageColor: PropTypes.string,
+  suggestions: PropTypes.arrayOf(PropTypes.string),
+  selectedSuggestionIndex: PropTypes.number,
+  visibleOffset: PropTypes.number,
 };
+
+// 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 (

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/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 = {