cdd-cli 4.0.0 → 4.1.0

package/fix-imports.cjs

@@ -1,54 +0,0 @@
-// Script para agregar automáticamente la extensión .js a los imports relativos en dist/
-const fs = require('fs');
-const path = require('path');
-
-function needsExtension(p) {
-  // already has a known extension
-  return !/\.(js|jsx|mjs|json)$/.test(p);
-}
-
-function normalizePath(p) {
-  return needsExtension(p) ? p + '.js' : p;
-}
-
-function addJsExtensionToImports(filePath) {
-  let code = fs.readFileSync(filePath, 'utf8');
-
-  // from '...'
-  code = code.replace(/from\s+(['"])(\.{1,2}\/[^'"\)]+?)\1/g, (m, quote, p) => {
-    return `from ${quote}${normalizePath(p)}${quote}`;
-  });
-
-  // side-effect imports: import '...';
-  code = code.replace(/(^|\n)\s*import\s+(['"])(\.{1,2}\/[^'"\)]+?)\2/gm, (m, pre, quote, p) => {
-    return `${pre}import ${quote}${normalizePath(p)}${quote}`;
-  });
-
-  // export ... from '...'
-  code = code.replace(/export[\s\S]*?from\s+(['"])(\.{1,2}\/[^'"\)]+?)\1/g, (m, quote, p) => {
-    return m.replace(p, normalizePath(p));
-  });
-
-  // dynamic imports import('...')
-  code = code.replace(/import\(\s*(['"])(\.{1,2}\/[^'"\)]+?)\1\s*\)/g, (m, quote, p) => {
-    return `import(${quote}${normalizePath(p)}${quote})`;
-  });
-
-  // Convert any remaining .jsx import specifiers to .js
-  code = code.replace(/(['"])(\.{1,2}\/[^'"\s]+?)\.jsx\1/g, (m, q, p) => `${q}${p}.js${q}`);
-
-  fs.writeFileSync(filePath, code, 'utf8');
-}
-
-function processDir(dir) {
-  fs.readdirSync(dir).forEach(file => {
-    const fullPath = path.join(dir, file);
-    if (fs.statSync(fullPath).isDirectory()) {
-      processDir(fullPath);
-    } else if (file.endsWith('.js')) {
-      addJsExtensionToImports(fullPath);
-    }
-  });
-}
-
-processDir(path.join(__dirname, 'dist'));

package/jest.config.cjs

@@ -1,14 +0,0 @@
-module.exports = {
-  testEnvironment: 'node',
-  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/src/App.jsx

@@ -1,102 +0,0 @@
-/**
- * Main React component for the CDD CLI UI.
- * Handles container listing, action feedback, optional creation prompt,
- * and renders the live debug log panel (toggle with the D shortcut).
- *
- * @component
- * @returns {JSX.Element} The rendered app
- * @example
- * // 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';
-
-export default function App() {
-  const { containers } = useContainers();
-  const controls = useControls(containers);
-
-  if (controls.creatingContainer) {
-    return (
-      <ContainerCreationPrompt
-        step={controls.creationStep}
-        imageName={controls.imageNameInput}
-        containerName={controls.containerNameInput}
-        portInput={controls.portInput}
-        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}
-      />
-    );
-  }
-
-  return (
-    <>
-      <Box
-        flexDirection="column"
-        borderStyle="round"
-        borderColor="cyan"
-        padding={1}
-      >
-        <Header count={containers.length} />
-        <Text> </Text>
-        <ContainerSection
-          containers={containers}
-          selected={controls.selected}
-        />
-        <Spacer />
-        <MessageFeedback
-          message={controls.message}
-          color={controls.messageColor}
-        />
-        <UsageMenu />
-        {controls.showDebugLogs && (
-          <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>
-            ) : (
-              controls.debugLogs.slice(-15).map((line, idx) => (
-                <Text key={idx} color="gray">
-                  {line}
-                </Text>
-              ))
-            )}
-          </Box>
-        )}
-        <Footer />
-      </Box>
-      {controls.showLogs && (
-        <LogViewer
-          logs={controls.logs}
-          onExit={controls.exitLogs}
-          container={containers[controls.selected]}
-        />
-      )}
-    </>
-  );
-}

package/src/components/ContainerCreationPrompt.jsx

@@ -1,107 +0,0 @@
-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';
-
-/**
- * Prompt UI shown when creating a new container.
- * Presents a step-by-step form (image, name, ports, env) and displays
- * a contextual message provided by the creation hook.
- *
- * @param {Object} props
- * @param {number} props.step - Current step index (0..3)
- * @param {string} props.imageName - Value for the image name field
- * @param {string} props.containerName - Value for the container name field
- * @param {string} props.portInput - Value for the ports input field
- * @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,
-    suggestions = [],
-    selectedSuggestionIndex = -1,
-    visibleOffset = 0,
-    hubResults = null,
-    isSearchingHub = false,
-    hasSuggestedEnv = false,
-  } = props;
-  const prompts = [
-    {
-      label: 'Name of the image to create (e.g., nginx:1.27-alpine):',
-      value: imageName,
-      required: true,
-    },
-    {
-      label: 'Name of the container (optional):',
-      value: containerName,
-      required: false,
-    },
-    {
-      label: 'Ports (optional, format 8080:80,443:443):',
-      value: portInput,
-      required: false,
-    },
-    {
-      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}
-    >
-      <PromptField label={label} value={value} required={required} />
-      {showSuggestions && (
-        <SuggestionPanel
-          items={activeItems}
-          selectedIndex={selectedSuggestionIndex}
-          visibleOffset={visibleOffset}
-          isLoading={isSearchingHub}
-        />
-      )}
-      <PromptMessage message={message} color={messageColor} />
-      <ControlsHUD step={step} hasSuggestions={hasSuggestions} isSearchingHub={isSearchingHub} hasSuggestedEnv={hasSuggestedEnv} />
-    </Box>
-  );
-}
-
-ContainerCreationPrompt.propTypes = {
-  step: PropTypes.number.isRequired,
-  imageName: PropTypes.string,
-  containerName: PropTypes.string,
-  portInput: PropTypes.string,
-  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

@@ -1,32 +0,0 @@
-/**
- * List component for Docker containers.
- *
- * @component
- * @param {Object} props - Component props
- * @param {Array} props.containers - Containers to display
- * @returns {JSX.Element} Rendered list
- * @example
- * // Render with containers
- * <ContainerList containers={containers} />
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Box } from 'ink';
-import ContainerRow from './ContainerRow.jsx';
-
-export default function ContainerList({ containers, selected }) {
-  return (
-    <>
-      {containers.map((container, i) => (
-        <Box key={container.id} flexDirection="row" paddingLeft={1}>
-          <ContainerRow container={container} isSelected={i === selected} />
-        </Box>
-      ))}
-    </>
-  );
-}
-
-ContainerList.propTypes = {
-  containers: PropTypes.arrayOf(PropTypes.object).isRequired,
-  selected: PropTypes.number,
-};

package/src/components/ContainerRow.jsx

@@ -1,84 +0,0 @@
-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' };
-};
-
-/**
- * Row component that renders information and live stats for a container.
- *
- * @param {Object} props
- * @param {Object} props.container - Container object with id, name, image, state and ports
- * @returns {JSX.Element}
- */
-export default function ContainerRow({ container, isSelected = false }) {
-  const { id, name, image, state } = container;
-  const { stats, statsError } = useContainerStats(id, state);
-
-  // Format ports for display (no leading space to avoid layout shifts)
-  const formatPorts = (ports) => {
-    if (!ports || ports.length === 0) return '';
-    if (Array.isArray(ports)) {
-      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;
-  };
-
-  const stateInfo = stateText(state);
-  return (
-    <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>
-        </Box>
-        <Box width={18} flexShrink={1} paddingRight={1}>
-          <Text color="cyan">{truncate(name, 18)}</Text>
-        </Box>
-        <Box width={18} flexShrink={1} paddingRight={1}>
-          <Text color="gray">{truncate(image, 18)}</Text>
-        </Box>
-        <Box width={14} minWidth={12} paddingRight={1}>
-          <Text color={stateInfo.color}>{stateInfo.text}</Text>
-        </Box>
-        <Box flexGrow={1} flexShrink={1} paddingLeft={0} paddingRight={1}>
-          <Text color="yellow">{formatPorts(container.ports)}</Text>
-        </Box>
-        <Box flexShrink={0} paddingLeft={1}>
-          {state === 'running' ? (
-            <StatsBar
-              cpu={parseFloat(stats.cpuPercent)}
-              mem={parseFloat(stats.memPercent)}
-            />
-          ) : null}
-        </Box>
-      </Box>
-      {statsError && <Text color="red">{statsError}</Text>}
-    </Box>
-  );
-}
-
-ContainerRow.propTypes = {
-  container: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    image: PropTypes.string,
-    state: PropTypes.string,
-    ports: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-  }).isRequired,
-  isSelected: PropTypes.bool,
-};

package/src/components/ContainerSection.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Text } from 'ink';
-import ContainerList from './ContainerList.jsx';
-import PropTypes from 'prop-types';
-
-/**
- * Section that displays the list of containers or a message when none exist.
- *
- * @param {Object} props
- * @param {Array<Object>} props.containers - Array of container objects to display
- * @param {number} [props.selected] - Index of the currently selected container
- * @returns {JSX.Element}
- */
-export default function ContainerSection({ containers, selected }) {
-  if (!containers || containers.length === 0) {
-    return <Text>No containers found</Text>;
-  }
-  return <ContainerList containers={containers} selected={selected} />;
-}
-
-ContainerSection.propTypes = {
-  containers: PropTypes.array.isRequired,
-  selected: PropTypes.number,
-};

package/src/components/ControlsHUD.jsx

@@ -1,66 +0,0 @@
-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,15 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-
-/**
- * Simple footer displayed at the bottom of the interface.
- *
- * @returns {JSX.Element}
- */
-export default function Footer() {
-  return (
-    <Box justifyContent="flex-end" width="100%">
-      <Text dimColor>Crafted by Carlos Cochero 2025</Text>
-    </Box>
-  );
-}

package/src/components/Header.jsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import chalk from 'chalk';
-import PropTypes from 'prop-types';
-import { getAppVersion } from '../helpers/appInfo.js';
-
-/**
- * Header component displayed at the top of the CLI UI.
- *
- * @component
- * @param {Object} props
- * @param {number} props.count - Number of containers currently detected
- * @returns {JSX.Element}
- * @example
- * <Header count={3} />
- */
-
-const VERSION = getAppVersion();
-
-export default function Header({ count }) {
-  const formattedVersion = VERSION === 'unknown' ? 'unknown' : `v${VERSION}`;
-
-  return (
-    <Box justifyContent="space-between">
-      <Text color="cyanBright">
-        🐳 {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
-        </Text>
-      </Box>
-    </Box>
-  );
-}
-
-Header.propTypes = {
-  count: PropTypes.number.isRequired,
-};

package/src/components/LogViewer.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { Text } from 'ink';
-import PropTypes from 'prop-types';
-
-/**
- * Log viewer overlay component. Shows the most recent lines.
- * Purely presentational — keyboard handling is centralized in useControls.
- *
- * @param {Object} props
- * @param {Array<string>} props.logs - Array of log lines
- * @param {Function} [props.onExit] - Optional callback when the viewer closes
- * @param {Object} [props.container] - Optional container metadata (used for title)
- * @returns {JSX.Element}
- */
-export default function LogViewer({ logs, onExit: _onExit, container }) {
-  const visibleLogs = logs.slice(-15);
-
-  return (
-    <>
-      <Text color="green">
-        {container?.name ?? 'Container'} logs, press ESC to exit
-      </Text>
-      {visibleLogs.length === 0 ? (
-        <Text dimColor>No logs...</Text>
-      ) : (
-        visibleLogs.map((line, idx) => <Text key={idx}>{line}</Text>)
-      )}
-    </>
-  );
-}
-
-LogViewer.propTypes = {
-  logs: PropTypes.arrayOf(PropTypes.string).isRequired,
-  onExit: PropTypes.func,
-  container: PropTypes.object,
-};

package/src/components/MessageFeedback.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import PropTypes from 'prop-types';
-
-/**
- * Small component that shows a feedback message in the UI.
- *
- * @param {Object} props
- * @param {string} props.message - Message to display. If falsy, component returns null.
- * @param {string} [props.color] - Optional color name for the message text.
- * @returns {JSX.Element|null}
- */
-export default function MessageFeedback({ message, color }) {
-  if (!message) return null;
-  return (
-    <Box marginBottom={1}>
-      <Text color={color}>{message}</Text>
-    </Box>
-  );
-}
-
-MessageFeedback.propTypes = {
-  message: PropTypes.string,
-  color: PropTypes.string,
-};

package/src/components/PromptField.jsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { Text } from 'ink';
-import PropTypes from 'prop-types';
-
-/**
- * PromptField shows a label and the current typed value for an input field.
- * The cursor is represented with a trailing underscore.
- *
- * @param {Object} props
- * @param {string} props.label - Label shown above the input value
- * @param {string} props.value - Current value of the input
- * @param {boolean} [props.required=false] - Whether the field is required
- * @returns {JSX.Element}
- */
-export function PromptField({ label, value, required }) {
-  // If the field is required and empty, show in red
-  const isEmpty = required && !value.trim();
-  return (
-    <>
-      <Text>{label}</Text>
-      <Text color={isEmpty ? 'red' : 'cyan'}>{value}_</Text>
-    </>
-  );
-}
-
-/**
- * Small helper to show a message below prompts (errors, hints, etc.).
- *
- * @param {Object} props
- * @param {string} props.message - Message text to display
- * @param {string} [props.color] - Optional color for the message
- * @returns {JSX.Element|null}
- */
-export function PromptMessage({ message, color }) {
-  if (!message) return null;
-  return <Text color={color || 'yellow'}>{message}</Text>;
-}
-
-PromptField.propTypes = {
-  label: PropTypes.string,
-  value: PropTypes.string,
-  required: PropTypes.bool,
-};
-
-PromptMessage.propTypes = {
-  message: PropTypes.string,
-  color: PropTypes.string,
-};