@jango-blockchained/hoox-cli 0.4.0 → 0.5.0

package/src/ui/banner.ts

@@ -1,11 +1,23 @@
 /**
- * Hoox ASCII banner — big block letter style with box framing.
- * Rendered with theme colors for consistent terminal output.
+ * Hoox ASCII banner — variants for the interactive TUI.
+ * Each variant provides a different visual style while maintaining
+ * consistent branding and theme coloring.
  */
 
 import { theme } from "../utils/theme.js";
 
-const BANNER_LINES = [
+const TAGLINE = "Cloudflare Workers Platform";
+const VERSION = "0.3.0";
+
+// ── Shared constants ──────────────────────────────────────────────
+
+/** Disclaimer line rendered below the banner and in the footer. */
+export const DISCLAIMER =
+  "DISCLAIMER: Trading cryptocurrencies involves substantial risk of loss. Use at your own risk.";
+
+// ── Variant 0 — Default (legacy) ──────────────────────────────────
+
+const LEGACY_LINES = [
   "██╗  ██╗ ██████╗  ██████╗ ██╗  ██╗",
   "██║  ██║██╔═══██╗██╔═══██╗╚██╗██╔╝",
   "███████║██║   ██║██║   ██║ ╚███╔╝ ",
@@ -14,34 +26,111 @@ const BANNER_LINES = [
   "╚═╝  ╚═╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═╝",
 ];
 
-const TAGLINE = "Cloudflare Workers Platform";
-const VERSION = "v0.3.0";
+function renderLegacy(): string {
+  const bw = 52;
+  const line = ` ${theme.dim("─").repeat(bw - 2)}`;
+  const top = ` ${theme.dim("┌")}${line.slice(2)}${theme.dim("┐")}`;
+  const bottom = ` ${theme.dim("└")}${line.slice(2)}${theme.dim("┘")}`;
+  const ascii = LEGACY_LINES.map((l) => ` ${theme.heading(l)}`);
+  const gap = Math.floor((bw - TAGLINE.length - VERSION.length - 2) / 2);
+  const tag = ` ${" ".repeat(gap)}${theme.dim(TAGLINE)} ${theme.dim(`v${VERSION}`)}`;
+  return [top, ...ascii, line, tag, bottom].join("\n");
+}
 
-/**
- * Render the Hoox ASCII banner with theme coloring and box framing.
- */
-export function renderBanner(): string {
-  const bannerWidth = 52;
-  const top = ` ${theme.corner.charAt(0)}${theme.separator.repeat(bannerWidth - 2)}${theme.corner.charAt(2)}`;
-  const bottom = ` ${theme.corner.charAt(3)}${theme.separator.repeat(bannerWidth - 2)}${theme.corner.charAt(1)}`;
-
-  const lines = BANNER_LINES.map((line) => ` ${theme.heading(line)}`);
-
-  // Center the tagline
-  const taglineLeft = Math.floor(
-    (bannerWidth - TAGLINE.length - VERSION.length - 2) / 2
-  );
-  const tagline = ` ${" ".repeat(taglineLeft)}${theme.dim(TAGLINE)} ${theme.dim(VERSION)}`;
-
-  const result = [
-    top,
-    ...lines,
-    ` ${theme.separator.repeat(bannerWidth - 2)}`,
-    tagline,
-    bottom,
+// ── Variant 1 — "Horizon" (architectural) ─────────────────────────
+// Uses double-line frame characters and a more open, architectural feel.
+// The "HOOX" wordmark is built from simple geometric blocks.
+
+const HORIZON_LINES = [
+  "╔═══╗ ╔═══╗ ╔═══╗ ╔═══╗",
+  "║ ║ ║ ║   ║ ║   ║ ║ ║ ║",
+  "║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║",
+  "║ ╚═╝ ║ ╚═╝ ║ ║ ║ ║ ╚═╝",
+  "║     ║     ║ ╚═╝ ║     ",
+  "╚═════╝ ╚═════╝ ╚═══╝ ╚═════╝",
+];
+
+export function renderBannerHorizon(): string {
+  const bw = 56;
+  const inner = theme.dim("─").repeat(bw - 2);
+  const top = ` ${theme.dim("╭")}${inner}${theme.dim("╮")}`;
+  const bottom = ` ${theme.dim("╰")}${inner}${theme.dim("╯")}`;
+  const ascii = HORIZON_LINES.map((l) => ` ${theme.accent(l)}`);
+  const gap = Math.floor((bw - TAGLINE.length - VERSION.length - 4) / 2);
+  const tag = ` ${" ".repeat(gap)}${theme.dim(TAGLINE)} ${theme.dim(`v${VERSION}`)}`;
+  return [top, ...ascii, theme.dim("─").repeat(bw), tag, bottom].join("\n");
+}
+
+// ── Variant 2 — "Signal" (data / waveform) ────────────────────────
+// Evokes trading signals and monitoring. Uses a smaller wordmark
+// with a dynamic waveform motif beneath it.
+
+const SIGNAL_LINES = [
+  "  _   _           _   _   ",
+  " | | | | ___   __| | | | ",
+  " | |_| |/ _ \\ / _` | | | ",
+  " |  _  | (_) | (_| | | | ",
+  " |_| |_|\\___/ \\__,_| |_| ",
+];
+
+export function renderBannerSignal(): string {
+  const bw = 54;
+  const line = theme.dim("─").repeat(bw);
+  const top = ` ${theme.dim("┌")}${line.slice(2)}${theme.dim("┐")}`;
+  const bottom = ` ${theme.dim("└")}${line.slice(2)}${theme.dim("┘")}`;
+
+  const wordmark = SIGNAL_LINES.map((l) => {
+    // Colour the letters H O O X, dim the rest
+    return ` ${theme.heading(l.slice(0, 26))}${theme.dim(l.slice(26))}`;
+  });
+
+  // Waveform line — sine-wave art
+  const wave = ` ${theme.accent("~~")}${theme.dim("~")}${theme.accent("_")}${theme.dim(".")}${theme.accent("/\\")}${theme.dim("~")}${theme.accent("\\/")}${theme.dim("..")}${theme.accent("/~~\\")}${theme.dim("~")}  ${theme.dim(TAGLINE)} ${theme.dim(`v${VERSION}`)}`;
+
+  return [top, ...wordmark, line, wave, bottom].join("\n");
+}
+
+// ── Variant 3 — "Minimal" (clean badge) ───────────────────────────
+// No ASCII art — just the project name, version, and a clean
+// double-rule header. Professional and understated.
+
+export function renderBannerMinimal(): string {
+  const bw = 50;
+  const rule = theme.dim("━").repeat(bw);
+  const inner = theme.dim("─").repeat(bw);
+
+  const leftPad = Math.floor((bw - TAGLINE.length - VERSION.length - 8) / 2);
+  const titleLine =
+    " ".repeat(leftPad) +
+    theme.heading("H O O X") +
+    "  " +
+    theme.dim(TAGLINE) +
+    "  " +
+    theme.dim(`v${VERSION}`);
+
+  return [
+    ` ${rule}`,
+    ` ${theme.dim("│")}${" ".repeat(bw - 2)}${theme.dim("│")}`,
+    `${theme.dim("│")}${titleLine}${" ".repeat(Math.max(0, bw - titleLine.length - 2))}${theme.dim("│")}`,
+    ` ${theme.dim("│")}${" ".repeat(bw - 2)}${theme.dim("│")}`,
+    ` ${rule}`,
   ].join("\n");
+}
+
+// ── Exports ───────────────────────────────────────────────────────
+
+export const BANNER_VARIANTS = {
+  legacy: renderLegacy,
+  horizon: renderBannerHorizon,
+  signal: renderBannerSignal,
+  minimal: renderBannerMinimal,
+} as const;
+
+export type BannerVariant = keyof typeof BANNER_VARIANTS;
 
-  return result;
+/** Default banner — the legacy ASCII block style. */
+export function renderBanner(variant?: BannerVariant): string {
+  return variant ? BANNER_VARIANTS[variant]() : renderLegacy();
 }
 
 /**

package/src/ui/menu.ts

@@ -17,8 +17,9 @@ import {
   isCancel,
   cancel,
 } from "@clack/prompts";
-import { renderBanner } from "./banner.js";
+import { renderBanner, renderCompactBanner, DISCLAIMER } from "./banner.js";
 import { CLIError } from "../utils/errors.js";
+import { theme } from "../utils/theme.js";
 
 // ---------------------------------------------------------------------------
 // Main entry
@@ -46,6 +47,10 @@ export async function runInteractiveTUI(program: Command): Promise<void> {
     // "back" or "continue" → loop back to main menu
   }
 
+  // Legal footer
+  process.stdout.write(
+    theme.dim("─".repeat(50)) + "\n" + theme.muted(DISCLAIMER) + "\n"
+  );
   outro("See you later!");
 }
 
@@ -54,8 +59,12 @@ export async function runInteractiveTUI(program: Command): Promise<void> {
 // ---------------------------------------------------------------------------
 
 const MAIN_CATEGORIES = [
+  {
+    value: "init",
+    label: "⚡ Setup Wizard",
+    hint: "bootstrap or reconfigure project",
+  },
   { value: "deploy", label: "Deploy", hint: "workers, dashboard" },
-  { value: "develop", label: "Develop", hint: "dev server, init project" },
   {
     value: "manage",
     label: "Manage",
@@ -67,6 +76,7 @@ const MAIN_CATEGORIES = [
     hint: "diagnostics, health, logs, tests",
   },
   { value: "tools", label: "Tools", hint: "WAF, clone worker, dashboard UI" },
+  { value: "develop", label: "Develop", hint: "dev server, start project" },
   { value: "__exit", label: "Exit" },
 ] as const;
 
@@ -96,6 +106,9 @@ async function handleCategory(
   program: Command
 ): Promise<"back" | "exit" | "continue"> {
   switch (category) {
+    case "init":
+      await runCommand(program, "init");
+      return "continue";
     case "deploy":
       return showDeployMenu(program);
     case "develop":
@@ -168,7 +181,6 @@ async function showDevelopMenu(
           label: "Start dev server",
           hint: "runs all workers locally",
         },
-        { value: "init", label: "Init project", hint: "bootstrap new project" },
         { value: "__back", label: "◀ Back to main menu" },
       ],
     });