feat(clawdhub): colorized help with build label

Author: steipete

packages/clawdhub/src/cli.ts

@@ -1,24 +1,33 @@
 #!/usr/bin/env node
 import { resolve } from 'node:path'
 import { Command } from 'commander'
+import { getCliBuildLabel, getCliVersion } from './cli/buildInfo.js'
 import { cmdLoginFlow, cmdLogout, cmdWhoami } from './cli/commands/auth.js'
 import { cmdPublish } from './cli/commands/publish.js'
 import { cmdInstall, cmdList, cmdSearch, cmdUpdate } from './cli/commands/skills.js'
+import { configureCommanderHelp, styleEnvBlock, styleTitle } from './cli/helpStyle.js'
 import { DEFAULT_REGISTRY, DEFAULT_SITE } from './cli/registry.js'
 import type { GlobalOpts } from './cli/types.js'
 import { fail } from './cli/ui.js'
 
 const program = new Command()
   .name('clawdhub')
-  .description('ClawdHub CLI — install, update, search, and publish agent skills.')
+  .description(
+    `${styleTitle(`ClawdHub CLI ${getCliBuildLabel()}`)}\n${styleEnvBlock(
+      'install, update, search, and publish agent skills.',
+    )}`,
+  )
+  .version(getCliVersion(), '-V, --version', 'Show version')
   .option('--workdir <dir>', 'Working directory (default: cwd)')
   .option('--dir <dir>', 'Skills directory (relative to workdir, default: skills)')
   .option('--site <url>', 'Site base URL (for browser login)')
   .option('--registry <url>', 'Registry API base URL')
   .option('--no-input', 'Disable prompts')
   .showHelpAfterError()
   .showSuggestionAfterError()
-  .addHelpText('after', '\nEnv:\n  CLAWDHUB_SITE\n  CLAWDHUB_REGISTRY\n')
+  .addHelpText('after', styleEnvBlock('\nEnv:\n  CLAWDHUB_SITE\n  CLAWDHUB_REGISTRY\n'))
+
+configureCommanderHelp(program)
 
 function resolveGlobalOpts(): GlobalOpts {
   const raw = program.opts<{ workdir?: string; dir?: string; site?: string; registry?: string }>()

packages/clawdhub/src/cli/buildInfo.ts

@@ -0,0 +1,94 @@
+import { existsSync, readFileSync, statSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+type PackageJson = { version?: string }
+
+function readPackageVersion() {
+  try {
+    const path = join(dirname(fileURLToPath(import.meta.url)), '../../package.json')
+    const raw = readFileSync(path, 'utf8')
+    const pkg = JSON.parse(raw) as PackageJson
+    return typeof pkg.version === 'string' ? pkg.version : '0.0.0'
+  } catch {
+    return '0.0.0'
+  }
+}
+
+function shortCommit(value: string) {
+  const trimmed = value.trim()
+  if (!trimmed) return null
+  if (trimmed.length <= 8) return trimmed
+  return trimmed.slice(0, 8)
+}
+
+export function getCliCommit() {
+  const candidates = [
+    process.env.CLAWDHUB_COMMIT,
+    process.env.VERCEL_GIT_COMMIT_SHA,
+    process.env.GITHUB_SHA,
+    process.env.COMMIT_SHA,
+  ]
+  for (const candidate of candidates) {
+    if (!candidate) continue
+    const short = shortCommit(candidate)
+    if (short) return short
+  }
+  return readGitCommitFromCwd()
+}
+
+export function getCliVersion() {
+  return readPackageVersion()
+}
+
+export function getCliBuildLabel() {
+  const version = getCliVersion()
+  const commit = getCliCommit()
+  return commit ? `v${version} (${commit})` : `v${version}`
+}
+
+function readGitCommitFromCwd() {
+  try {
+    const gitDir = findGitDir(process.cwd())
+    if (!gitDir) return null
+    const headPath = join(gitDir, 'HEAD')
+    if (!existsSync(headPath)) return null
+    const head = readFileSync(headPath, 'utf8').trim()
+    if (!head) return null
+    if (!head.startsWith('ref:')) return shortCommit(head)
+    const ref = head.replace(/^ref:\s*/, '').trim()
+    if (!ref) return null
+    const refPath = join(gitDir, ref)
+    if (!existsSync(refPath)) return null
+    const sha = readFileSync(refPath, 'utf8').trim()
+    return shortCommit(sha)
+  } catch {
+    return null
+  }
+}
+
+function findGitDir(start: string) {
+  let current = resolve(start)
+  for (;;) {
+    const dotGit = join(current, '.git')
+    if (existsSync(dotGit)) {
+      try {
+        const stat = statSync(dotGit)
+        if (stat.isDirectory()) return dotGit
+      } catch {
+        // ignore
+      }
+      try {
+        const content = readFileSync(dotGit, 'utf8').trim()
+        const match = content.match(/^gitdir:\s*(.+)$/)
+        if (match?.[1]) return resolve(current, match[1])
+      } catch {
+        return dotGit
+      }
+      return dotGit
+    }
+    const parent = resolve(current, '..')
+    if (parent === current) return null
+    current = parent
+  }
+}

packages/clawdhub/src/cli/helpStyle.ts

@@ -0,0 +1,45 @@
+type Color = (value: string) => string
+
+function wrap(start: string, end = '\x1b[0m'): Color {
+  return (value) => `${start}${value}${end}`
+}
+
+const ansi = {
+  reset: '\x1b[0m',
+  bold: wrap('\x1b[1m'),
+  dim: wrap('\x1b[2m'),
+  cyan: wrap('\x1b[36m'),
+  green: wrap('\x1b[32m'),
+  yellow: wrap('\x1b[33m'),
+}
+
+function isColorEnabled() {
+  if (!process.stdout.isTTY) return false
+  if (process.env.NO_COLOR) return false
+  return true
+}
+
+export function styleTitle(value: string) {
+  if (!isColorEnabled()) return value
+  return `${ansi.bold(ansi.cyan(value))}${ansi.reset}`
+}
+
+export function configureCommanderHelp(program: {
+  configureHelp: (config: {
+    sectionTitle?: (title: string) => string
+    optionTerm?: (option: { flags: string }) => string
+    commandTerm?: (cmd: { name: () => string }) => string
+  }) => unknown
+}) {
+  if (!isColorEnabled()) return
+  program.configureHelp({
+    sectionTitle: (title) => ansi.bold(ansi.cyan(title)),
+    optionTerm: (option) => ansi.yellow(option.flags),
+    commandTerm: (cmd) => ansi.green(cmd.name()),
+  })
+}
+
+export function styleEnvBlock(value: string) {
+  if (!isColorEnabled()) return value
+  return `${ansi.dim(value)}${ansi.reset}`
+}