tiennm99/ccs
1
0
Fork 0
mirror of https://github.com/tiennm99/ccs.git synced 2026-09-03 12:21:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): enhance section headers with gradient and rename profile to api

Browse Source 
- Add sectionHeader() with gradient + bold styling
- Rename profile-command.ts to api-command.ts
- Update help command layout
- Change command color from italic to bold
This commit is contained in:
kaitranntt
2025-12-02 15:12:53 -05:00
parent 716193a682
commit 073a5e15ee
4 changed files with 280 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ccs.ts
+4 -4
View File
@@ -253,10 +253,10 @@ async function main(): Promise<void> {
return; return;
} }
// Special case: profile command // Special case: api command (manages API profiles)
if (firstArg === 'profile') { if (firstArg === 'api') {
const { handleProfileCommand } = await import('./commands/profile-command'); const { handleApiCommand } = await import('./commands/api-command');
await handleProfileCommand(args.slice(1)); await handleApiCommand(args.slice(1));
return; return;
} }
src/commands/profile-command.ts → src/commands/api-command.ts
+76 -75
View File
@@ -1,8 +1,8 @@
/** /**
* Profile Command Handler * API Command Handler
* *
* Manages CCS profiles for custom API providers. * Manages CCS API profiles for custom API providers.
* Commands: create, list * Commands: create, list, remove
*/ */
import * as fs from 'fs'; import * as fs from 'fs';
@@ -23,7 +23,7 @@ import {
import { InteractivePrompt } from '../utils/prompt'; import { InteractivePrompt } from '../utils/prompt';
import { getCcsDir, getConfigPath, loadConfig } from '../utils/config-manager'; import { getCcsDir, getConfigPath, loadConfig } from '../utils/config-manager';
interface ProfileCommandArgs { interface ApiCommandArgs {
name?: string; name?: string;
baseUrl?: string; baseUrl?: string;
apiKey?: string; apiKey?: string;
@@ -33,10 +33,10 @@ interface ProfileCommandArgs {
} }
/** /**
* Parse command line arguments for profile commands * Parse command line arguments for api commands
*/ */
function parseArgs(args: string[]): ProfileCommandArgs { function parseArgs(args: string[]): ApiCommandArgs {
const result: ProfileCommandArgs = {}; const result: ApiCommandArgs = {};
for (let i = 0; i < args.length; i++) { for (let i = 0; i < args.length; i++) {
const arg = args[i]; const arg = args[i];
@@ -60,20 +60,20 @@ function parseArgs(args: string[]): ProfileCommandArgs {
} }
/** /**
* Validate profile name * Validate API profile name
*/ */
function validateProfileName(name: string): string | null { function validateApiName(name: string): string | null {
if (!name) { if (!name) {
return 'Profile name is required'; return 'API name is required';
} }
if (!/^[a-zA-Z][a-zA-Z0-9._-]*$/.test(name)) { if (!/^[a-zA-Z][a-zA-Z0-9._-]*$/.test(name)) {
return 'Profile name must start with letter, contain only letters, numbers, dot, dash, underscore'; return 'API name must start with letter, contain only letters, numbers, dot, dash, underscore';
} }
if (name.length > 32) { if (name.length > 32) {
return 'Profile name must be 32 characters or less'; return 'API name must be 32 characters or less';
} }
// Reserved names // Reserved names
const reserved = ['default', 'auth', 'profile', 'doctor', 'sync', 'update', 'help', 'version']; const reserved = ['default', 'auth', 'api', 'doctor', 'sync', 'update', 'help', 'version'];
if (reserved.includes(name.toLowerCase())) { if (reserved.includes(name.toLowerCase())) {
return `'${name}' is a reserved name`; return `'${name}' is a reserved name`;
} }
@@ -96,9 +96,9 @@ function validateUrl(url: string): string | null {
} }
/** /**
* Check if profile already exists in config.json * Check if API profile already exists in config.json
*/ */
function profileExists(name: string): boolean { function apiExists(name: string): boolean {
try { try {
const config = loadConfig(); const config = loadConfig();
return name in config.profiles; return name in config.profiles;
@@ -108,7 +108,7 @@ function profileExists(name: string): boolean {
} }
/** /**
* Create settings.json file for profile * Create settings.json file for API profile
*/ */
function createSettingsFile(name: string, baseUrl: string, apiKey: string, model: string): string { function createSettingsFile(name: string, baseUrl: string, apiKey: string, model: string): string {
const ccsDir = getCcsDir(); const ccsDir = getCcsDir();
@@ -127,7 +127,7 @@ function createSettingsFile(name: string, baseUrl: string, apiKey: string, model
} }
/** /**
* Update config.json with new profile * Update config.json with new API profile
*/ */
function updateConfig(name: string, _settingsPath: string): void { function updateConfig(name: string, _settingsPath: string): void {
const configPath = getConfigPath(); const configPath = getConfigPath();
@@ -157,7 +157,7 @@ function updateConfig(name: string, _settingsPath: string): void {
} }
/** /**
* Handle 'ccs profile create' command * Handle 'ccs api create' command
*/ */
async function handleCreate(args: string[]): Promise<void> { async function handleCreate(args: string[]): Promise<void> {
await initUI(); await initUI();
@@ -166,14 +166,14 @@ async function handleCreate(args: string[]): Promise<void> {
console.log(header('Create API Profile')); console.log(header('Create API Profile'));
console.log(''); console.log('');
// Step 1: Profile name // Step 1: API name
let name = parsedArgs.name; let name = parsedArgs.name;
if (!name) { if (!name) {
name = await InteractivePrompt.input('Profile name', { name = await InteractivePrompt.input('API name', {
validate: validateProfileName, validate: validateApiName,
}); });
} else { } else {
const error = validateProfileName(name); const error = validateApiName(name);
if (error) { if (error) {
console.log(fail(error)); console.log(fail(error));
process.exit(1); process.exit(1);
@@ -181,8 +181,8 @@ async function handleCreate(args: string[]): Promise<void> {
} }
// Check if exists // Check if exists
if (profileExists(name) && !parsedArgs.force) { if (apiExists(name) && !parsedArgs.force) {
console.log(fail(`Profile '${name}' already exists`)); console.log(fail(`API '${name}' already exists`));
console.log(` Use ${color('--force', 'command')} to overwrite`); console.log(` Use ${color('--force', 'command')} to overwrite`);
process.exit(1); process.exit(1);
} }
@@ -223,7 +223,7 @@ async function handleCreate(args: string[]): Promise<void> {
// Create files // Create files
console.log(''); console.log('');
console.log(info('Creating profile...')); console.log(info('Creating API profile...'));
try { try {
const settingsPath = createSettingsFile(name, baseUrl, apiKey, model); const settingsPath = createSettingsFile(name, baseUrl, apiKey, model);
@@ -232,11 +232,11 @@ async function handleCreate(args: string[]): Promise<void> {
console.log(''); console.log('');
console.log( console.log(
infoBox( infoBox(
`Profile: ${name}\n` + `API: ${name}\n` +
`Settings: ~/.ccs/${name}.settings.json\n` + `Settings: ~/.ccs/${name}.settings.json\n` +
`Base URL: ${baseUrl}\n` + `Base URL: ${baseUrl}\n` +
`Model: ${model}`, `Model: ${model}`,
'Profile Created' 'API Profile Created'
) )
); );
console.log(''); console.log('');
@@ -244,18 +244,18 @@ async function handleCreate(args: string[]): Promise<void> {
console.log(` ${color(`ccs ${name} "your prompt"`, 'command')}`); console.log(` ${color(`ccs ${name} "your prompt"`, 'command')}`);
console.log(''); console.log('');
} catch (error) { } catch (error) {
console.log(fail(`Failed to create profile: ${(error as Error).message}`)); console.log(fail(`Failed to create API profile: ${(error as Error).message}`));
process.exit(1); process.exit(1);
} }
} }
/** /**
* Check if profile has real API key (not placeholder) * Check if API profile has real API key (not placeholder)
*/ */
function isProfileConfigured(profileName: string): boolean { function isApiConfigured(apiName: string): boolean {
try { try {
const ccsDir = getCcsDir(); const ccsDir = getCcsDir();
const settingsPath = path.join(ccsDir, `${profileName}.settings.json`); const settingsPath = path.join(ccsDir, `${apiName}.settings.json`);
if (!fs.existsSync(settingsPath)) return false; if (!fs.existsSync(settingsPath)) return false;
const settings = JSON.parse(fs.readFileSync(settingsPath, 'utf8')); const settings = JSON.parse(fs.readFileSync(settingsPath, 'utf8'));
@@ -268,31 +268,31 @@ function isProfileConfigured(profileName: string): boolean {
} }
/** /**
* Handle 'ccs profile list' command * Handle 'ccs api list' command
*/ */
async function handleList(): Promise<void> { async function handleList(): Promise<void> {
await initUI(); await initUI();
console.log(header('CCS Profiles')); console.log(header('CCS API Profiles'));
console.log(''); console.log('');
try { try {
const config = loadConfig(); const config = loadConfig();
const profiles = Object.keys(config.profiles); const apis = Object.keys(config.profiles);
if (profiles.length === 0) { if (apis.length === 0) {
console.log(warn('No profiles configured')); console.log(warn('No API profiles configured'));
console.log(''); console.log('');
console.log('To create a profile:'); console.log('To create an API profile:');
console.log(` ${color('ccs profile create', 'command')}`); console.log(` ${color('ccs api create', 'command')}`);
console.log(''); console.log('');
return; return;
} }
// Build table data with status indicators // Build table data with status indicators
const rows: string[][] = profiles.map((name) => { const rows: string[][] = apis.map((name) => {
const settingsPath = config.profiles[name]; const settingsPath = config.profiles[name];
const status = isProfileConfigured(name) ? color('[OK]', 'success') : color('[!]', 'warning'); const status = isApiConfigured(name) ? color('[OK]', 'success') : color('[!]', 'warning');
return [name, settingsPath, status]; return [name, settingsPath, status];
}); });
@@ -300,7 +300,7 @@ async function handleList(): Promise<void> {
// Print table // Print table
console.log( console.log(
table(rows, { table(rows, {
head: ['Profile', 'Settings File', 'Status'], head: ['API', 'Settings File', 'Status'],
colWidths: [15, 35, 10], colWidths: [15, 35, 10],
}) })
); );
@@ -323,22 +323,22 @@ async function handleList(): Promise<void> {
console.log(''); console.log('');
} }
console.log(dim(`Total: ${profiles.length} profile(s)`)); console.log(dim(`Total: ${apis.length} API profile(s)`));
console.log(''); console.log('');
} catch (error) { } catch (error) {
console.log(fail(`Failed to list profiles: ${(error as Error).message}`)); console.log(fail(`Failed to list API profiles: ${(error as Error).message}`));
process.exit(1); process.exit(1);
} }
} }
/** /**
* Handle 'ccs profile remove' command * Handle 'ccs api remove' command
*/ */
async function handleRemove(args: string[]): Promise<void> { async function handleRemove(args: string[]): Promise<void> {
await initUI(); await initUI();
const parsedArgs = parseArgs(args); const parsedArgs = parseArgs(args);
// Load config first to get available profiles // Load config first to get available APIs
let config: { profiles: Record<string, string>; cliproxy?: Record<string, unknown> }; let config: { profiles: Record<string, string>; cliproxy?: Record<string, unknown> };
try { try {
config = loadConfig(); config = loadConfig();
@@ -347,35 +347,35 @@ async function handleRemove(args: string[]): Promise<void> {
process.exit(1); process.exit(1);
} }
const profiles = Object.keys(config.profiles); const apis = Object.keys(config.profiles);
if (profiles.length === 0) { if (apis.length === 0) {
console.log(warn('No profiles to remove')); console.log(warn('No API profiles to remove'));
process.exit(0); process.exit(0);
} }
// Interactive profile selection if not provided // Interactive API selection if not provided
let name = parsedArgs.name; let name = parsedArgs.name;
if (!name) { if (!name) {
console.log(header('Remove Profile')); console.log(header('Remove API Profile'));
console.log(''); console.log('');
console.log('Available profiles:'); console.log('Available APIs:');
profiles.forEach((p, i) => console.log(` ${i + 1}. ${p}`)); apis.forEach((p, i) => console.log(` ${i + 1}. ${p}`));
console.log(''); console.log('');
name = await InteractivePrompt.input('Profile name to remove', { name = await InteractivePrompt.input('API name to remove', {
validate: (val) => { validate: (val) => {
if (!val) return 'Profile name is required'; if (!val) return 'API name is required';
if (!profiles.includes(val)) return `Profile '${val}' not found`; if (!apis.includes(val)) return `API '${val}' not found`;
return null; return null;
}, },
}); });
} }
if (!(name in config.profiles)) { if (!(name in config.profiles)) {
console.log(fail(`Profile '${name}' not found`)); console.log(fail(`API '${name}' not found`));
console.log(''); console.log('');
console.log('Available profiles:'); console.log('Available APIs:');
profiles.forEach((p) => console.log(` - ${p}`)); apis.forEach((p) => console.log(` - ${p}`));
process.exit(1); process.exit(1);
} }
@@ -384,12 +384,13 @@ async function handleRemove(args: string[]): Promise<void> {
// Confirm deletion // Confirm deletion
console.log(''); console.log('');
console.log(`Profile '${color(name, 'command')}' will be removed.`); console.log(`API '${color(name, 'command')}' will be removed.`);
console.log(` Settings: ${settingsPath}`); console.log(` Settings: ${settingsPath}`);
console.log(''); console.log('');
const confirmed = const confirmed =
parsedArgs.yes || (await InteractivePrompt.confirm('Delete this profile?', { default: false })); parsedArgs.yes ||
(await InteractivePrompt.confirm('Delete this API profile?', { default: false }));
if (!confirmed) { if (!confirmed) {
console.log(info('Cancelled')); console.log(info('Cancelled'));
@@ -408,25 +409,25 @@ async function handleRemove(args: string[]): Promise<void> {
fs.unlinkSync(expandedPath); fs.unlinkSync(expandedPath);
} }
console.log(ok(`Profile removed: ${name}`)); console.log(ok(`API profile removed: ${name}`));
console.log(''); console.log('');
} }
/** /**
* Show help for profile commands * Show help for api commands
*/ */
async function showHelp(): Promise<void> { async function showHelp(): Promise<void> {
await initUI(); await initUI();
console.log(header('CCS Profile Management')); console.log(header('CCS API Management'));
console.log(''); console.log('');
console.log(subheader('Usage')); console.log(subheader('Usage'));
console.log(` ${color('ccs profile', 'command')} <command> [options]`); console.log(` ${color('ccs api', 'command')} <command> [options]`);
console.log(''); console.log('');
console.log(subheader('Commands')); console.log(subheader('Commands'));
console.log(` ${color('create [name]', 'command')} Create new API profile (interactive)`); console.log(` ${color('create [name]', 'command')} Create new API profile (interactive)`);
console.log(` ${color('list', 'command')} List all profiles`); console.log(` ${color('list', 'command')} List all API profiles`);
console.log(` ${color('remove <name>', 'command')} Remove a profile`); console.log(` ${color('remove <name>', 'command')} Remove an API profile`);
console.log(''); console.log('');
console.log(subheader('Options')); console.log(subheader('Options'));
console.log(` ${color('--base-url <url>', 'command')} API base URL (create)`); console.log(` ${color('--base-url <url>', 'command')} API base URL (create)`);
@@ -437,23 +438,23 @@ async function showHelp(): Promise<void> {
console.log(''); console.log('');
console.log(subheader('Examples')); console.log(subheader('Examples'));
console.log(` ${dim('# Interactive wizard')}`); console.log(` ${dim('# Interactive wizard')}`);
console.log(` ${color('ccs profile create', 'command')}`); console.log(` ${color('ccs api create', 'command')}`);
console.log(''); console.log('');
console.log(` ${dim('# Create with name')}`); console.log(` ${dim('# Create with name')}`);
console.log(` ${color('ccs profile create myapi', 'command')}`); console.log(` ${color('ccs api create myapi', 'command')}`);
console.log(''); console.log('');
console.log(` ${dim('# Remove profile')}`); console.log(` ${dim('# Remove API profile')}`);
console.log(` ${color('ccs profile remove myapi', 'command')}`); console.log(` ${color('ccs api remove myapi', 'command')}`);
console.log(''); console.log('');
console.log(` ${dim('# Show all profiles')}`); console.log(` ${dim('# Show all API profiles')}`);
console.log(` ${color('ccs profile list', 'command')}`); console.log(` ${color('ccs api list', 'command')}`);
console.log(''); console.log('');
} }
/** /**
* Main profile command router * Main api command router
*/ */
export async function handleProfileCommand(args: string[]): Promise<void> { export async function handleApiCommand(args: string[]): Promise<void> {
const command = args[0]; const command = args[0];
if (!command || command === '--help' || command === '-h' || command === 'help') { if (!command || command === '--help' || command === '-h' || command === 'help') {
@@ -478,7 +479,7 @@ export async function handleProfileCommand(args: string[]): Promise<void> {
console.log(fail(`Unknown command: ${command}`)); console.log(fail(`Unknown command: ${command}`));
console.log(''); console.log('');
console.log('Run for help:'); console.log('Run for help:');
console.log(` ${color('ccs profile --help', 'command')}`); console.log(` ${color('ccs api --help', 'command')}`);
process.exit(1); process.exit(1);
} }
} }
src/commands/help-command.ts
+180 -87
View File
@@ -1,15 +1,28 @@
import { initUI, box, header, color, dim } from '../utils/ui'; import { initUI, box, color, dim, sectionHeader, subheader } from '../utils/ui';
// Version is read from VERSION file during build // Version is read from VERSION file during build
const VERSION = '5.3.0'; const VERSION = '5.3.0';
/** /**
* Print a section with header and items * Print a major section with ═══ borders (only for 3 main sections)
* Format:
* ═══ TITLE ═══
* Subtitle line 1
* Subtitle line 2
*
* command Description
*/ */
function printSection(title: string, subtitle: string, items: [string, string][]): void { function printMajorSection(title: string, subtitles: string[], items: [string, string][]): void {
// Header with optional subtitle // Section header with ═══ borders
const headerText = subtitle ? `${title} ${dim(subtitle)}` : title; console.log(sectionHeader(title));
console.log(header(headerText));
// Subtitles on separate lines (dim)
for (const subtitle of subtitles) {
console.log(` ${dim(subtitle)}`);
}
// Empty line before items
console.log('');
// Calculate max command length for alignment // Calculate max command length for alignment
const maxCmdLen = Math.max(...items.map(([cmd]) => cmd.length)); const maxCmdLen = Math.max(...items.map(([cmd]) => cmd.length));
@@ -19,6 +32,49 @@ function printSection(title: string, subtitle: string, items: [string, string][]
console.log(` ${color(paddedCmd, 'command')} ${desc}`); console.log(` ${color(paddedCmd, 'command')} ${desc}`);
} }
// Extra spacing after section
console.log('');
}
/**
* Print a sub-section with colored title
* Format:
* Title (context):
* command Description
*/
function printSubSection(title: string, items: [string, string][]): void {
// Sub-section header (colored, no borders)
console.log(subheader(`${title}:`));
// Calculate max command length for alignment
const maxCmdLen = Math.max(...items.map(([cmd]) => cmd.length));
for (const [cmd, desc] of items) {
const paddedCmd = cmd.padEnd(maxCmdLen + 2);
console.log(` ${color(paddedCmd, 'command')} ${desc}`);
}
// Spacing after section
console.log('');
}
/**
* Print a config/paths section
* Format:
* Title:
* Label: path
*/
function printConfigSection(title: string, items: [string, string][]): void {
console.log(subheader(`${title}:`));
// Calculate max label length for alignment
const maxLabelLen = Math.max(...items.map(([label]) => label.length));
for (const [label, path] of items) {
const paddedLabel = label.padEnd(maxLabelLen);
console.log(` ${paddedLabel} ${color(path, 'path')}`);
}
console.log(''); console.log('');
} }
@@ -29,9 +85,17 @@ export async function handleHelpCommand(): Promise<void> {
// Initialize UI (if not already) // Initialize UI (if not already)
await initUI(); await initUI();
// Hero box with title // Hero box with ASCII art logo
// Each letter: C=╔═╗/║ /╚═╝, C=╔═╗/║ /╚═╝, S=╔═╗/╚═╗/╚═╝
const logo = `
╔═╗ ╔═╗ ╔═╗
║ ║ ╚═╗ v${VERSION}
╚═╝ ╚═╝ ╚═╝
Claude Code Profile & Model Switcher`.trim();
console.log( console.log(
box(`CCS v${VERSION}\nClaude Code Profile & Model Switcher`, { box(logo, {
padding: 1, padding: 1,
borderStyle: 'round', borderStyle: 'round',
titleAlignment: 'center', titleAlignment: 'center',
@@ -40,106 +104,135 @@ export async function handleHelpCommand(): Promise<void> {
console.log(''); console.log('');
// Usage section // Usage section
console.log(header('USAGE')); console.log(subheader('Usage:'));
console.log(` $ ${color('ccs', 'command')} <profile> [flags] [-- claude-args...]`); console.log(` ${color('ccs', 'command')} [profile] [claude-args...]`);
console.log(` $ ${color('ccs', 'command')} [flags]`); console.log(` ${color('ccs', 'command')} [flags]`);
console.log(''); console.log('');
// API Key Profiles section // ═══════════════════════════════════════════════════════════════════════════
printSection('API KEY PROFILES', 'Configure: ~/.ccs/*.settings.json', [ // MAJOR SECTION 1: API Key Profiles
['ccs', 'Use default Claude account'], // ═══════════════════════════════════════════════════════════════════════════
['ccs glm', 'GLM-4.6 via Zhipu AI'], printMajorSection(
['ccs glmt', 'GLM-4.6 (Turbo mode)'], 'API Key Profiles',
['ccs kimi', 'Kimi via Moonshot AI'], ['Configure in ~/.ccs/*.settings.json'],
[
['ccs', 'Use default Claude account'],
['ccs glm', 'GLM 4.6 (API key required)'],
['ccs glmt', 'GLM with thinking mode'],
['ccs kimi', 'Kimi for Coding (API key)'],
['', ''], // Spacer
['ccs api create', 'Create custom API profile'],
['ccs api remove', 'Remove an API profile'],
['ccs api list', 'List all API profiles'],
]
);
// ═══════════════════════════════════════════════════════════════════════════
// MAJOR SECTION 2: Account Management
// ═══════════════════════════════════════════════════════════════════════════
printMajorSection(
'Account Management',
['Run multiple Claude accounts concurrently'],
[
['ccs auth --help', 'Show account management commands'],
['ccs auth create <name>', 'Create new account profile'],
['ccs auth list', 'List all account profiles'],
]
);
// ═══════════════════════════════════════════════════════════════════════════
// MAJOR SECTION 3: CLI Proxy (OAuth Providers)
// ═══════════════════════════════════════════════════════════════════════════
printMajorSection(
'CLI Proxy (OAuth Providers)',
[
'Zero-config OAuth authentication via CLIProxyAPI',
'First run: Browser opens for authentication',
'Settings: ~/.ccs/{provider}.settings.json (created after auth)',
],
[
['ccs gemini', 'Google Gemini (gemini-2.5-pro)'],
['ccs codex', 'OpenAI Codex (gpt-5.1-codex-max)'],
['ccs agy', 'Antigravity (gemini-3-pro-preview)'],
['ccs qwen', 'Qwen Code (qwen3-coder)'],
['', ''], // Spacer
['ccs <provider> --auth', 'Authenticate only'],
['ccs <provider> --logout', 'Clear authentication'],
['ccs <provider> --headless', 'Headless auth (for SSH)'],
['ccs codex "explain code"', 'Use with prompt'],
]
);
// ═══════════════════════════════════════════════════════════════════════════
// SUB-SECTIONS (simpler styling)
// ═══════════════════════════════════════════════════════════════════════════
// Delegation
printSubSection('Delegation (inside Claude Code CLI)', [
['/ccs "task"', 'Delegate task (auto-selects profile)'],
['/ccs --glm "task"', 'Force GLM-4.6 for simple tasks'],
['/ccs --kimi "task"', 'Force Kimi for long context'],
['/ccs:continue "follow-up"', 'Continue last delegation session'],
]); ]);
// Profile management section // Diagnostics
printSection('PROFILE MANAGEMENT', '', [ printSubSection('Diagnostics', [
['ccs profile create', 'Create custom API profile'], ['ccs doctor', 'Run health check and diagnostics'],
['ccs profile list', 'List all profiles'], ['ccs sync', 'Sync delegation commands and skills'],
['ccs profile remove', 'Remove a profile'], ['ccs update', 'Update CCS to latest version'],
]); ]);
// Account management section // Flags
printSection('ACCOUNT MANAGEMENT', 'Multiple Claude accounts', [ printSubSection('Flags', [
['ccs auth create <name>', 'Create new account'], ['-h, --help', 'Show this help message'],
['ccs auth list', 'List all accounts'], ['-v, --version', 'Show version and installation info'],
['ccs auth default <name>', 'Set default account'], ['-sc, --shell-completion', 'Install shell auto-completion'],
]); ]);
// OAuth section // Configuration
printSection('OAUTH PROVIDERS', 'Zero config, browser auth', [ printConfigSection('Configuration', [
['ccs gemini', 'Google Gemini (gemini-2.5-pro)'], ['Config File:', '~/.ccs/config.json'],
['ccs codex', 'OpenAI Codex (gpt-5.1-codex-max)'], ['Profiles:', '~/.ccs/profiles.json'],
['ccs agy', 'Antigravity (gemini-3-pro-preview)'], ['Instances:', '~/.ccs/instances/'],
['ccs qwen', 'Qwen Code (qwen3-coder)'], ['Settings:', '~/.ccs/*.settings.json'],
]); ]);
// OAuth flags // CLI Proxy paths
console.log(header('OAUTH FLAGS')); console.log(subheader('CLI Proxy:'));
console.log(` ${color('ccs <provider> --auth', 'command')} Authenticate only`); console.log(` Binary: ${color('~/.ccs/cliproxy/bin/cli-proxy-api', 'path')}`);
console.log(` ${color('ccs <provider> --logout', 'command')} Clear authentication`); console.log(` Config: ${color('~/.ccs/cliproxy/config.yaml', 'path')}`);
console.log(` ${color('ccs <provider> --headless', 'command')} Headless auth (for SSH)`); console.log(` Auth: ${color('~/.ccs/cliproxy/auth/', 'path')}`);
console.log(''); console.log(` ${dim('Port: 8317 (default)')}`);
// Delegation section
printSection('DELEGATION', 'Inside Claude Code CLI', [
['/ccs "task"', 'Delegate (auto-select profile)'],
['/ccs --glm "task"', 'Force GLM-4.6'],
['/ccs --kimi "task"', 'Force Kimi'],
['/ccs:continue', 'Continue last delegation'],
]);
// Diagnostics section
printSection('DIAGNOSTICS', '', [
['ccs doctor', 'Run health check'],
['ccs sync', 'Sync delegation commands'],
['ccs update', 'Update to latest version'],
]);
// Flags section
console.log(header('FLAGS'));
console.log(` ${color('-h, --help', 'command')} Show this help`);
console.log(` ${color('-v, --version', 'command')} Show version`);
console.log(` ${color('-sc, --shell-completion', 'command')} Install shell completion`);
console.log('');
// Configuration paths
console.log(header('CONFIGURATION'));
console.log(` Config: ${color('~/.ccs/config.json', 'path')}`);
console.log(` Profiles: ${color('~/.ccs/profiles.json', 'path')}`);
console.log(` Settings: ${color('~/.ccs/*.settings.json', 'path')}`);
console.log(` CLIProxy: ${color('~/.ccs/cliproxy/', 'path')}`);
console.log(''); console.log('');
// Shared Data // Shared Data
console.log(header('SHARED DATA')); console.log(subheader('Shared Data:'));
console.log(` Commands: ${color('~/.ccs/shared/commands/', 'path')}`); console.log(` Commands: ${color('~/.ccs/shared/commands/', 'path')}`);
console.log(` Skills: ${color('~/.ccs/shared/skills/', 'path')}`); console.log(` Skills: ${color('~/.ccs/shared/skills/', 'path')}`);
console.log(` Agents: ${color('~/.ccs/shared/agents/', 'path')}`); console.log(` Agents: ${color('~/.ccs/shared/agents/', 'path')}`);
console.log(` ${dim('Note: Symlinked across all profiles')}`); console.log(` ${dim('Note: Symlinked across all profiles')}`);
console.log(''); console.log('');
// Examples // Examples (aligned with consistent spacing)
console.log(header('EXAMPLES')); console.log(subheader('Examples:'));
console.log(` ${dim('# Use default account')}`); console.log(` $ ${color('ccs', 'command')} ${dim('# Use default account')}`);
console.log(` $ ${color('ccs', 'command')}`); console.log(
console.log(''); ` $ ${color('ccs gemini', 'command')} ${dim('# OAuth (browser opens first time)')}`
console.log(` ${dim('# OAuth provider (browser auth first time)')}`); );
console.log(` $ ${color('ccs gemini', 'command')}`); console.log(` $ ${color('ccs glm "implement API"', 'command')} ${dim('# API key model')}`);
console.log('');
console.log(` ${dim('# API key model with prompt')}`);
console.log(` $ ${color('ccs glm "implement the API"', 'command')}`);
console.log(''); console.log('');
// Footer // Docs link
console.log(dim('Docs: https://github.com/kaitranntt/ccs')); console.log(` ${dim('Docs: https://github.com/kaitranntt/ccs')}`);
console.log(dim('License: MIT'));
console.log(''); console.log('');
// Uninstall // Uninstall
console.log(color('Uninstall:', 'warning')); console.log(subheader('Uninstall:'));
console.log(' npm uninstall -g @kaitranntt/ccs'); console.log(` ${color('npm uninstall -g @kaitranntt/ccs', 'command')}`);
console.log('');
// License
console.log(dim('License: MIT'));
console.log(''); console.log('');
process.exit(0); process.exit(0);
src/utils/ui.ts
+20 -1
View File
@@ -139,7 +139,7 @@ export function color(text: string, semantic: SemanticColor): string {
case 'secondary': case 'secondary':
return chalkModule.hex(COLORS.secondary)(text); return chalkModule.hex(COLORS.secondary)(text);
case 'command': case 'command':
return chalkModule.yellow.italic(text); return chalkModule.yellow.bold(text);
case 'path': case 'path':
return chalkModule.cyan.underline(text); return chalkModule.cyan.underline(text);
default: default:
@@ -458,6 +458,24 @@ export function hr(char = '─', width = 60): string {
return dim(char.repeat(width)); return dim(char.repeat(width));
} }
/**
* Print section header with ═══ borders
* Format: ═══ Title ═══
*/
export function sectionHeader(title: string): string {
const border = '═══';
const headerText = `${border} ${title} ${border}`;
// Use gradient + bold for visual appeal
if (gradientModule && chalkModule && useColors()) {
return chalkModule.bold(gradientModule([COLORS.primary, COLORS.secondary])(headerText));
}
// Fallback to bold primary color
if (useColors() && chalkModule) {
return chalkModule.hex(COLORS.primary).bold(headerText);
}
return headerText;
}
// ============================================================================= // =============================================================================
// TASK LISTS (Listr2 Integration) // TASK LISTS (Listr2 Integration)
// ============================================================================= // =============================================================================
@@ -604,6 +622,7 @@ export const ui = {
// Headers // Headers
header, header,
subheader, subheader,
sectionHeader,
hr, hr,
} as const; } as const;