@emesoft/tokenhub 0.8.0 → 0.8.2

package/README.md

@@ -34,7 +34,7 @@ From then on, today's spend and your credit sit under the Claude Code prompt:
 
 <img src="https://tokenhub.aimpact.io.vn/readme/statusline.png" alt="The TokenHub status line under the Claude Code prompt" width="560">
 
-Prefer not to install? Use `npx @emesoft/tokenhub connect` instead.
+Prefer not to install? Use `npx @emesoft/tokenhub connect <your tenant name>` instead.
 
 ## Commands
 

package/bin/banner.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+import { showBanner } from "../lib/banner.js";
+
+await showBanner();

package/bin/tokenhub.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 import { readFileSync } from "node:fs";
 import { adminConfigPath, removeAdminConfig } from "../lib/admin.js";
+import { showBanner } from "../lib/banner.js";
 import { parseDashboardArgs, runDashboard } from "../lib/dashboard.js";
 import { runOverlayInstall } from "../lib/overlay.js";
 import { promptTenant, runConnect, TENANT_DOMAIN } from "../lib/pair.js";
@@ -24,6 +25,7 @@ Usage:
                                Live full-screen view of spend, pool health and recent requests (q quits)
   tokenhub disconnect          Remove the pool entries and the status line from settings.json
   tokenhub disconnect --admin  Forget the admin device token on this machine (revoke it on the pool's admin Devices page)
+  tokenhub banner              Display the TokenHub welcome banner
   tokenhub --help | --version
 `;
 
@@ -45,6 +47,10 @@ async function main(argv) {
     console.log(pkg.version);
     return 0;
   }
+  if (command === "banner") {
+    await showBanner();
+    return 0;
+  }
   const file = settingsPath();
   if (command === "connect") {
     const controller = new AbortController();

package/lib/banner.d.ts

@@ -0,0 +1,7 @@
+export interface BannerOptions {
+  stream?: NodeJS.WriteStream;
+  animate?: boolean;
+}
+
+export function isInteractive(stream?: NodeJS.WriteStream): boolean;
+export function showBanner(options?: BannerOptions): Promise<void>;

package/lib/banner.js

@@ -0,0 +1,158 @@
+/**
+ * TokenHub CLI welcome banner with progressive reveal animation.
+ */
+
+const TOKEN_COLOR = "\x1b[38;5;39;1m"; // Electric cyan bold
+const HUB_COLOR = "\x1b[38;5;208;1m";   // TokenHub warm amber/clay bold
+const CYAN = "\x1b[38;5;39m";
+const MUTED = "\x1b[38;5;244m";
+const GREEN = "\x1b[38;5;114m";
+const RESET = "\x1b[0m";
+const BOLD = "\x1b[1m";
+
+export const LOGO_PARTS = [
+  {
+    token: "  ████████╗ ██████╗ ██╗  ██╗███████╗███╗   ██╗",
+    hub:   "██╗  ██╗██╗   ██╗██████╗ ",
+  },
+  {
+    token: "  ╚══██╔══╝██╔═══██╗██║ ██╔╝██╔════╝████╗  ██║",
+    hub:   "██║  ██║██║   ██║██╔══██╗",
+  },
+  {
+    token: "     ██║   ██║   ██║█████╔╝ █████╗  ██╔██╗ ██║",
+    hub:   "███████║██║   ██║██████╔╝",
+  },
+  {
+    token: "     ██║   ██║   ██║██╔═██╗ ██╔══╝  ██║╚██╗██║",
+    hub:   "██╔══██║██║   ██║██╔═══╝ ",
+  },
+  {
+    token: "     ██║   ╚██████╔╝██║  ██╗███████╗██║ ╚████║",
+    hub:   "██║  ██║╚██████╔╝██║     ",
+  },
+  {
+    token: "     ╚═╝    ╚═════╝ ╚═╝  ╚═╝╚══════╝╚═╝  ╚═══╝",
+    hub:   "╚═╝  ╚═╝ ╚═════╝ ╚═╝     ",
+  },
+];
+
+const SUBTITLE = "  ⚡ Enterprise AI Gateway & Smart Pooling for Claude Code";
+const DIVIDER = "  ─────────────────────────────────────────────────────────────";
+const ACTIONS = [
+  `  ${BOLD}→ Get started:${RESET} ${CYAN}tokenhub connect <tenant>${RESET}`,
+  `  ${BOLD}→ Spend & ops:${RESET} ${CYAN}tokenhub usage${RESET} ${MUTED}|${RESET} ${CYAN}tokenhub dashboard${RESET}`,
+  `  ${BOLD}→ Docs & hub:${RESET}  ${MUTED}https://tokenhub.aimpact.io.vn${RESET}`,
+];
+
+/**
+ * Sleep helper for animations.
+ * @param {number} ms
+ * @returns {Promise<void>}
+ */
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/**
+ * Check if the current terminal supports interactive animations and color.
+ * @param {NodeJS.WriteStream} [stream]
+ * @returns {boolean}
+ */
+export function isInteractive(stream = process.stdout) {
+  if (Boolean(process.env.CI) || Boolean(process.env.NO_COLOR)) return false;
+  return Boolean(stream?.isTTY);
+}
+
+/**
+ * Render the banner to the target stream.
+ * In interactive terminals, progressively reveals the logo and typewriter-reveals the text.
+ * In non-interactive environments, outputs the plain text cleanly.
+ *
+ * @param {object} [options]
+ * @param {NodeJS.WriteStream} [options.stream]
+ * @param {boolean} [options.animate]
+ * @returns {Promise<void>}
+ */
+export async function showBanner({ stream = process.stdout, animate } = {}) {
+  const interactive = animate ?? isInteractive(stream);
+  const color = !process.env.NO_COLOR && (interactive || Boolean(stream?.isTTY));
+
+  if (!interactive) {
+    // Non-interactive fallback: instant output
+    stream.write("\n");
+    for (const row of LOGO_PARTS) {
+      if (color) {
+        stream.write(`${TOKEN_COLOR}${row.token}${HUB_COLOR}${row.hub}${RESET}\n`);
+      } else {
+        stream.write(`${row.token}${row.hub}\n`);
+      }
+    }
+    stream.write("\n");
+    stream.write(color ? `${CYAN}${SUBTITLE}${RESET}\n` : `${SUBTITLE}\n`);
+    stream.write(color ? `${MUTED}${DIVIDER}${RESET}\n` : `${DIVIDER}\n`);
+    for (const action of ACTIONS) {
+      stream.write(color ? `${action}\n` : `${action.replace(/\x1b\[[0-9;]*m/g, "")}\n`);
+    }
+    stream.write("\n");
+    return;
+  }
+
+  // Interactive progressive reveal
+  stream.write("\n");
+
+  // Draw the logo lines progressively with a smooth typewriter scan
+  for (const row of LOGO_PARTS) {
+    const tokenPart = `${TOKEN_COLOR}${row.token}`;
+    const hubPart = `${HUB_COLOR}${row.hub}${RESET}\n`;
+
+    // Progressive character scan per line
+    const fullLine = `${tokenPart}${hubPart}`;
+    // Split into 4 chunks per line for high-tech sweep effect
+    const chunkSize = 16;
+    let idx = 0;
+    while (idx < row.token.length) {
+      const nextToken = row.token.slice(idx, idx + chunkSize);
+      stream.write(`${TOKEN_COLOR}${nextToken}${RESET}`);
+      idx += chunkSize;
+      await sleep(10);
+    }
+    idx = 0;
+    while (idx < row.hub.length) {
+      const nextHub = row.hub.slice(idx, idx + chunkSize);
+      stream.write(`${HUB_COLOR}${nextHub}${RESET}`);
+      idx += chunkSize;
+      await sleep(10);
+    }
+    stream.write("\n");
+    await sleep(25);
+  }
+
+  stream.write("\n");
+  await sleep(40);
+
+  // Divider reveal
+  stream.write(`${MUTED}`);
+  for (let i = 0; i < DIVIDER.length; i += 4) {
+    stream.write(DIVIDER.slice(i, i + 4));
+    await sleep(8);
+  }
+  stream.write(`${RESET}\n`);
+
+  // Subtitle typewriter effect
+  stream.write(`${CYAN}`);
+  for (let i = 0; i < SUBTITLE.length; i++) {
+    stream.write(SUBTITLE[i]);
+    await sleep(8);
+  }
+  stream.write(`${RESET}\n`);
+  await sleep(40);
+
+  // Quick actions lines
+  for (const action of ACTIONS) {
+    stream.write(`${action}\n`);
+    await sleep(40);
+  }
+
+  stream.write("\n");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emesoft/tokenhub",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "Connect Claude Code to a TokenHub pool in one command, and track your spend from the terminal",
   "keywords": [
     "claude",
@@ -16,6 +16,9 @@
   "bin": {
     "tokenhub": "bin/tokenhub.js"
   },
+  "scripts": {
+    "postinstall": "node bin/banner.js"
+  },
   "files": [
     "bin",
     "lib",