@mks2508/coolify-mks-cli-mcp 0.6.3 → 0.8.0

package/src/cli/ui/banner.ts

@@ -0,0 +1,276 @@
+/**
+ * CLI banner — renders the Coolify "C" logo from SVG data as terminal art.
+ * Uses half-block Unicode characters (▀▄█) with chalk hex colors for
+ * a faithful multi-layer shadow reproduction of the original SVG.
+ *
+ * @module
+ */
+
+import chalk from "chalk";
+
+// ─── SVG source data ─────────────────────────────────────────────────────────
+// Original SVG: 500×500 viewport, 3 layers of a "C" shape.
+// Each layer is 3 rectangles (top bar, left bar, bottom bar).
+
+const SVG_SIZE = 500;
+
+/** The 3 rectangles forming the "C" shape (in SVG coords). */
+const C_RECTS = [
+  { x: 162, y: 97, w: 224, h: 56 }, // top bar
+  { x: 106, y: 153, w: 56, h: 168 }, // left bar
+  { x: 162, y: 321, w: 224, h: 56 }, // bottom bar
+];
+
+/** Layers from back (shadow) to front (solid). Higher contrast for dark terms. */
+const LAYERS = [
+  { dx: 35, dy: 35, color: "#3d2570" }, // shadow — visible on dark bg
+  { dx: 17, dy: 17, color: "#6b40c0" }, // mid shadow
+  { dx: 0, dy: 0, color: "#a875ff" }, // foreground — brighter purple
+];
+
+// ─── Grid renderer ───────────────────────────────────────────────────────────
+
+const GRID_W = 46;
+const GRID_H = 46;
+const CELL = SVG_SIZE / GRID_W;
+
+/**
+ * Paint a rectangle onto the grid (higher value = front layer wins).
+ */
+function paintRect(
+  grid: number[][],
+  sx: number,
+  sy: number,
+  sw: number,
+  sh: number,
+  layerIdx: number,
+): void {
+  const x1 = Math.round(sx / CELL);
+  const y1 = Math.round(sy / CELL);
+  const x2 = Math.round((sx + sw) / CELL);
+  const y2 = Math.round((sy + sh) / CELL);
+
+  for (let y = y1; y < y2 && y < GRID_H; y++) {
+    for (let x = x1; x < x2 && x < GRID_W; x++) {
+      if (y >= 0 && x >= 0) {
+        grid[y][x] = Math.max(grid[y][x], layerIdx + 1);
+      }
+    }
+  }
+}
+
+/**
+ * Build the pixel grid from SVG layers.
+ * Returns a 2D array where 0=empty, 1=shadow, 2=mid, 3=solid.
+ */
+function buildGrid(): number[][] {
+  const grid: number[][] = Array.from({ length: GRID_H }, () =>
+    Array(GRID_W).fill(0),
+  );
+
+  for (let li = 0; li < LAYERS.length; li++) {
+    const { dx, dy } = LAYERS[li];
+    for (const rect of C_RECTS) {
+      paintRect(grid, rect.x + dx, rect.y + dy, rect.w, rect.h, li);
+    }
+  }
+
+  return grid;
+}
+
+/**
+ * Trim empty rows/cols from the grid, returns a compact subgrid.
+ */
+function trimGrid(grid: number[][]): number[][] {
+  let minR = grid.length,
+    maxR = 0,
+    minC = grid[0].length,
+    maxC = 0;
+
+  for (let r = 0; r < grid.length; r++) {
+    for (let c = 0; c < grid[0].length; c++) {
+      if (grid[r][c] > 0) {
+        minR = Math.min(minR, r);
+        maxR = Math.max(maxR, r);
+        minC = Math.min(minC, c);
+        maxC = Math.max(maxC, c);
+      }
+    }
+  }
+
+  if (minR > maxR) return [[]];
+
+  return grid.slice(minR, maxR + 1).map((row) => row.slice(minC, maxC + 1));
+}
+
+/**
+ * Render grid to terminal lines using half-block characters.
+ * Each terminal line encodes 2 grid rows using ▀▄█ characters.
+ */
+function renderHalfBlocks(grid: number[][]): string[] {
+  const colors = ["", ...LAYERS.map((l) => l.color)];
+  const lines: string[] = [];
+
+  // Process 2 rows at a time
+  for (let r = 0; r < grid.length; r += 2) {
+    let line = "";
+    const topRow = grid[r];
+    const botRow = r + 1 < grid.length ? grid[r + 1] : topRow.map(() => 0);
+
+    for (let c = 0; c < topRow.length; c++) {
+      const top = topRow[c];
+      const bot = botRow[c];
+
+      if (top === 0 && bot === 0) {
+        line += " ";
+      } else if (top === bot) {
+        // Both same color → full block
+        line += chalk.hex(colors[top])("█");
+      } else if (top > 0 && bot === 0) {
+        // Only top → upper half block
+        line += chalk.hex(colors[top])("▀");
+      } else if (top === 0 && bot > 0) {
+        // Only bottom → lower half block
+        line += chalk.hex(colors[bot])("▄");
+      } else {
+        // Different colors → ▀ with fg=top, bg=bot
+        line += chalk.hex(colors[top]).bgHex(colors[bot])("▀");
+      }
+    }
+
+    lines.push(line);
+  }
+
+  return lines;
+}
+
+// ─── Banner assembly ─────────────────────────────────────────────────────────
+
+/**
+ * Render the Coolify "C" logo as terminal art (full size ~15 lines).
+ * Returns an array of styled terminal lines.
+ */
+function renderLogo(): string[] {
+  const grid = buildGrid();
+  const trimmed = trimGrid(grid);
+  return renderHalfBlocks(trimmed);
+}
+
+/**
+ * Get logo lines for external use (e.g. header integration).
+ */
+export function getLogoLines(): string[] {
+  return renderLogo();
+}
+
+/**
+ * Render a smaller version of the logo (~7 lines) for persistent headers.
+ * Uses a coarser grid (24×24 instead of 46×46).
+ */
+export function getMiniLogoLines(): string[] {
+  const miniGridW = 24;
+  const miniGridH = 24;
+  const miniCell = SVG_SIZE / miniGridW;
+
+  const grid: number[][] = Array.from({ length: miniGridH }, () =>
+    Array(miniGridW).fill(0),
+  );
+
+  for (let li = 0; li < LAYERS.length; li++) {
+    const { dx, dy } = LAYERS[li];
+    for (const rect of C_RECTS) {
+      const x1 = Math.round((rect.x + dx) / miniCell);
+      const y1 = Math.round((rect.y + dy) / miniCell);
+      const x2 = Math.round((rect.x + dx + rect.w) / miniCell);
+      const y2 = Math.round((rect.y + dy + rect.h) / miniCell);
+      for (let y = y1; y < y2 && y < miniGridH; y++) {
+        for (let x = x1; x < x2 && x < miniGridW; x++) {
+          if (y >= 0 && x >= 0) grid[y][x] = Math.max(grid[y][x], li + 1);
+        }
+      }
+    }
+  }
+
+  const trimmed = trimGrid(grid);
+  return renderHalfBlocks(trimmed);
+}
+
+/**
+ * Show the full banner with logo + title + info.
+ * Layout: logo on left, text on right.
+ *
+ * @param version - CLI version string
+ * @param subtitle - Optional subtitle line
+ */
+export function showBanner(
+  version: string = "0.8.0",
+  subtitle?: string,
+): void {
+  const logoLines = renderLogo();
+  const logoWidth = logoLines.reduce(
+    (max, line) => Math.max(max, stripAnsi(line).length),
+    0,
+  );
+
+  // Text block (appears next to logo, vertically centered)
+  const textLines = [
+    "",
+    chalk.bold.hex("#8c52ff")("  Coolify CLI"),
+    chalk.gray(`  v${version}`),
+    "",
+    chalk.gray(subtitle || "  Manage your deployments"),
+    "",
+  ];
+
+  // Vertically center text relative to logo
+  const textStart = Math.max(0, Math.floor((logoLines.length - textLines.length) / 2));
+
+  const output: string[] = [];
+  const maxLines = Math.max(logoLines.length, textStart + textLines.length);
+
+  for (let i = 0; i < maxLines; i++) {
+    const logoPart = i < logoLines.length ? logoLines[i] : "";
+    const logoPadded = logoPart + " ".repeat(Math.max(0, logoWidth - stripAnsi(logoPart).length));
+    const textIdx = i - textStart;
+    const textPart = textIdx >= 0 && textIdx < textLines.length ? textLines[textIdx] : "";
+    output.push(`  ${logoPadded}${textPart}`);
+  }
+
+  console.log(output.join("\n"));
+}
+
+/**
+ * Show a compact single-line banner (for non-interactive / piped output).
+ *
+ * @param version - CLI version string
+ */
+export function showCompactBanner(version: string = "0.8.0"): void {
+  console.log(
+    `${chalk.hex("#8c52ff")("█")} ${chalk.bold("Coolify CLI")} ${chalk.gray(`v${version}`)}`,
+  );
+}
+
+/**
+ * Show the appropriate banner based on TTY status.
+ *
+ * @param version - CLI version string
+ * @param subtitle - Optional subtitle for full banner
+ */
+export function showAutoBanner(
+  version: string = "0.8.0",
+  subtitle?: string,
+): void {
+  if (process.stdout.isTTY) {
+    showBanner(version, subtitle);
+  } else {
+    showCompactBanner(version);
+  }
+}
+
+/**
+ * Strip ANSI escape codes from a string (for measuring visible width).
+ */
+function stripAnsi(str: string): string {
+  // eslint-disable-next-line no-control-regex
+  return str.replace(/\x1b\[[0-9;]*m/g, "");
+}

package/src/cli/ui/highlighter.ts

@@ -0,0 +1,176 @@
+/**
+ * Syntax highlighting utilities for CLI output.
+ *
+ * @module
+ */
+
+import chalk from "chalk";
+import type { Highlighter, BundledLanguage } from "shiki";
+
+let highlighterInstance: Highlighter | null = null;
+
+/**
+ * Get or initialize the Shiki highlighter.
+ */
+async function getHighlighter(): Promise<Highlighter> {
+  if (!highlighterInstance) {
+    const { createHighlighter } = await import("shiki");
+    highlighterInstance = await createHighlighter({
+      themes: ["github-dark"],
+      langs: ["bash", "javascript", "typescript", "json", "env", "yaml"],
+    });
+  }
+  return highlighterInstance;
+}
+
+/**
+ * Highlight a code snippet with Shiki and convert to terminal colors.
+ */
+export async function highlightCode(
+  code: string,
+  lang: BundledLanguage = "bash",
+): Promise<string> {
+  try {
+    const highlighter = await getHighlighter();
+    const html = highlighter.codeToHtml(code, {
+      lang,
+      theme: "github-dark",
+    });
+
+    // Convert HTML colors to chalk ANSI codes
+    return htmlToChalk(html);
+  } catch {
+    // Fallback to plain text if highlighting fails
+    return code;
+  }
+}
+
+/**
+ * Convert Shiki HTML output to chalk-colored terminal output.
+ */
+function htmlToChalk(html: string): string {
+  // Map Shiki's github-dark theme colors to chalk
+  const colorMap: Record<string, (text: string | string[], ...args: unknown[]) => string> = {
+    "#79c0ff": chalk.blue, // variable, function
+    "#d2a8ff": chalk.magentaBright, // type, class
+    "#ffa657": chalk.yellow, // string
+    "#a5d6ff": chalk.cyan, // property
+    "#ffbfb7": chalk.redBright, // error
+    "#f0883e": chalk.hex("#f0883e"), // number
+    "#7ee787": chalk.green, // success
+    "#e5edf9": chalk.white, // text
+    "#8b949e": chalk.gray, // comment
+    "#f778ba": chalk.magentaBright, // special
+    "#ff7b72": chalk.red, // keyword
+  };
+
+  let result = html;
+
+  // Remove HTML tags but keep content
+  result = result.replace(/<code[^>]*>/g, "");
+  result = result.replace(/<\/code>/g, "");
+
+  // Convert <span style="color:#..."> to chalk
+  const spanRegex = /<span style="color:([^"]+)">([^<]*)<\/span>/g;
+  result = result.replace(spanRegex, (_, color, content) => {
+    const chalkFn = colorMap[color];
+    return chalkFn ? chalkFn(content) : content;
+  });
+
+  // Remove any remaining HTML tags
+  result = result.replace(/<[^>]+>/g, "");
+
+  return result;
+}
+
+/**
+ * Highlight an .env file with syntax highlighting.
+ * Shows KEY in blue, = in gray, VALUE in yellow.
+ */
+export function highlightEnvLine(line: string): string {
+  const eqIndex = line.indexOf("=");
+  if (eqIndex === -1) {
+    // Comment or invalid line
+    return line.startsWith("#")
+      ? chalk.gray(line)
+      : chalk.red(line);
+  }
+
+  const key = line.slice(0, eqIndex).trim();
+  const value = line.slice(eqIndex + 1).trim();
+
+  // Color the KEY
+  const coloredKey = chalk.cyan.bold(key);
+
+  // Color the value (handle quotes)
+  let coloredValue = value;
+  if (
+    (value.startsWith('"') && value.endsWith('"')) ||
+    (value.startsWith("'") && value.endsWith("'"))
+  ) {
+    const quote = value[0];
+    const innerValue = value.slice(1, -1);
+    coloredValue = `${chalk.gray(quote)}${chalk.yellow(innerValue)}${chalk.gray(
+      quote,
+    )}`;
+  } else {
+    coloredValue = chalk.yellow(value);
+  }
+
+  return `${coloredKey}${chalk.gray("=")}${coloredValue}`;
+}
+
+/**
+ * Highlight multiple .env lines.
+ */
+export function highlightEnvBlock(content: string): string {
+  return content
+    .split("\n")
+    .map((line) => highlightEnvLine(line))
+    .join("\n");
+}
+
+/**
+ * Create a visual diff between two values.
+ */
+export function createDiff(
+  oldValue: string,
+  newValue: string,
+): {
+  removed: string;
+  added: string;
+  lineDiff: string;
+} {
+  // Simple character-level diff visualization
+  const removed = chalk.red(`- ${oldValue}`);
+  const added = chalk.green(`+ ${newValue}`);
+
+  // Create a line-by-line comparison
+  const oldLines = oldValue.split("\n");
+  const newLines = newValue.split("\n");
+  const maxLines = Math.max(oldLines.length, newLines.length);
+
+  const lineDiff: string[] = [];
+
+  for (let i = 0; i < maxLines; i++) {
+    const oldLine = oldLines[i] ?? "";
+    const newLine = newLines[i] ?? "";
+
+    if (oldLine === newLine) {
+      lineDiff.push(chalk.gray(`  ${oldLine}`));
+    } else {
+      if (oldLine) {
+        lineDiff.push(chalk.red(`- ${oldLine}`));
+      }
+      if (newLine) {
+        lineDiff.push(chalk.green(`+ ${newLine}`));
+      }
+    }
+  }
+
+  return {
+    removed,
+    added,
+    lineDiff: lineDiff.join("\n"),
+  };
+}

package/src/cli/ui/index.ts

@@ -0,0 +1,9 @@
+/**
+ * UI utilities for CLI output.
+ *
+ * @module
+ */
+
+export * from "./highlighter.js";
+export * from "./spinners.js";
+export * from "./tables.js";

package/src/cli/ui/prompts.ts

@@ -0,0 +1,155 @@
+/**
+ * Centralized prompt utilities using @clack/prompts.
+ * Provides consistent UX across all interactive commands.
+ *
+ * @module
+ */
+
+import * as p from "@clack/prompts";
+import type { ICoolifyApplication } from "../../coolify/types.js";
+import type { ICoolifyAppState } from "../coolify-state.js";
+import type { ICoolifyProject } from "../../coolify/types.js";
+import type { ICoolifyEnvironment } from "../../coolify/types.js";
+
+export { isCancel };
+
+/**
+ * Prompt for selecting an application from list.
+ */
+export async function promptAppSelection(
+  apps: ICoolifyApplication[],
+  options: { message?: string } = {},
+): Promise<string | null> {
+  const response = await p.select({
+    message: options.message || "Select an application:",
+    options: apps.map((app) => ({
+      label: app.name,
+      value: app.uuid,
+      hint: app.status,
+    })),
+  });
+
+  if (p.isCancel(response)) return null;
+  return response as string;
+}
+
+/**
+ * Prompt for selecting multiple applications.
+ */
+export async function promptMultiAppSelection(
+  apps: ICoolifyAppState[],
+  options: { message?: string } = {},
+): Promise<string[] | null> {
+  const response = await p.multiselect({
+    message: options.message || "Select applications:",
+    options: [
+      { label: "All (parallel)", value: "_all" },
+      ...apps.map((app) => ({
+        label: app.name,
+        value: app.uuid,
+        hint: app.domain,
+      })),
+    ],
+    required: false,
+  });
+
+  if (p.isCancel(response)) return null;
+  return response as string[];
+}
+
+/**
+ * Prompt for selecting a project.
+ */
+export async function promptProjectSelection(
+  projects: ICoolifyProject[],
+): Promise<string | null> {
+  const response = await p.select({
+    message: "Select a project:",
+    options: projects.map((proj) => ({
+      label: proj.name,
+      value: proj.uuid,
+      hint: `${proj.environments?.length || 0} environments`,
+    })),
+  });
+
+  if (p.isCancel(response)) return null;
+  return response as string;
+}
+
+/**
+ * Prompt for selecting an environment.
+ */
+export async function promptEnvironmentSelection(
+  environments: ICoolifyEnvironment[],
+): Promise<string | null> {
+  const response = await p.select({
+    message: "Select an environment:",
+    options: environments.map((env) => ({
+      label: env.name,
+      value: env.uuid,
+      hint: `${env.applications?.length || 0} apps`,
+    })),
+  });
+
+  if (p.isCancel(response)) return null;
+  return response as string;
+}
+
+/**
+ * Prompt for text input (app name, etc).
+ */
+export async function promptText(
+  message: string,
+  options: { placeholder?: string; defaultValue?: string } = {},
+): Promise<string | null> {
+  const response = await p.text({
+    message,
+    placeholder: options.placeholder,
+    initialValue: options.defaultValue,
+  });
+
+  if (p.isCancel(response)) return null;
+  return response as string;
+}
+
+/**
+ * Prompt for confirmation.
+ */
+export async function promptConfirm(
+  message: string,
+): Promise<boolean | null> {
+  const response = await p.confirm({
+    message,
+  });
+
+  if (p.isCancel(response)) return null;
+  return response as boolean;
+}
+
+/**
+ * Show spinner for async operations.
+ */
+export function showSpinner() {
+  return p.spinner();
+}
+
+/**
+ * Show intro message.
+ */
+export function showIntro(title: string) {
+  p.intro(title);
+}
+
+/**
+ * Show outro message.
+ */
+export function showOutro(message: string) {
+  p.outro(message);
+}
+
+/**
+ * Show note/group.
+ */
+export function showNote(message: string) {
+  p.note(message);
+}