Skip to content

Commit a65e37a

Browse files
jdaltonjdalton
committed
refactor: improve help system display
- Remove emojis for cleaner, professional appearance - Create responsive columned layout for categories - Simplify keyboard navigation - Improve descriptions for better clarity - Add visual spacing and organization
1 parent a3f8524 commit a65e37a

File tree

1 file changed

+82
-63
lines changed

1 file changed

+82
-63
lines changed

‎src/utils/interactive-help.mts‎

Lines changed: 82 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { logger } from '@socketsecurity/registry/lib/logger'
1111
interface HelpCategory {
1212
title: string
1313
key: string
14-
icon: string
1514
description: string
1615
content: () => void
1716
}
@@ -20,21 +19,20 @@ const helpCategories: HelpCategory[] = [
2019
{
2120
title: 'Security Scanning',
2221
key: 'scan',
23-
icon: '🔍',
24-
description: 'Scan projects for vulnerabilities',
22+
description: 'Scan projects for vulnerabilities and security issues',
2523
content: () => {
26-
logger.log(colors.cyan('\n📦 Security Scanning Commands\n'))
24+
logger.log(colors.cyan('\nSecurity Scanning Commands\n'))
2725
logger.log(' socket scan create [path] Create a security scan')
2826
logger.log(' socket scan list List recent scans')
2927
logger.log(' socket scan view <id> View scan details')
3028
logger.log(' socket scan report Generate scan report')
3129
logger.log('')
32-
logger.log(colors.gray('Options:'))
30+
logger.log(colors.bold('Options:'))
3331
logger.log(' --prod Scan production dependencies only')
3432
logger.log(' --reach Enable reachability analysis')
3533
logger.log(' --json Output as JSON')
3634
logger.log('')
37-
logger.log(colors.gray('Examples:'))
35+
logger.log(colors.bold('Examples:'))
3836
logger.log(' socket scan create .')
3937
logger.log(' socket scan create . --prod --reach')
4038
logger.log(' socket scan list --limit=10')
@@ -43,22 +41,21 @@ const helpCategories: HelpCategory[] = [
4341
{
4442
title: 'Fix & Patch',
4543
key: 'fix',
46-
icon: '🔧',
47-
description: 'Fix vulnerabilities and apply patches',
44+
description: 'Auto-fix vulnerabilities and apply security patches',
4845
content: () => {
49-
logger.log(colors.cyan('\n🔧 Fix & Patch Commands\n'))
46+
logger.log(colors.cyan('\nFix & Patch Commands\n'))
5047
logger.log(' socket fix Auto-fix vulnerabilities')
5148
logger.log(' socket fix interactive Interactive guided fixing')
5249
logger.log(' socket patch Apply security patches')
5350
logger.log(' socket optimize Optimize dependencies')
5451
logger.log('')
55-
logger.log(colors.gray('Fix Options:'))
52+
logger.log(colors.bold('Fix Options:'))
5653
logger.log(' --dry-run Preview changes without applying')
5754
logger.log(' --auto Auto-apply safe fixes')
5855
logger.log(' --severity=high Minimum severity to fix')
5956
logger.log(' --pin Pin to exact versions')
6057
logger.log('')
61-
logger.log(colors.gray('Examples:'))
58+
logger.log(colors.bold('Examples:'))
6259
logger.log(' socket fix --dry-run')
6360
logger.log(' socket fix interactive --auto')
6461
logger.log(' socket patch')
@@ -67,22 +64,21 @@ const helpCategories: HelpCategory[] = [
6764
{
6865
title: 'Package Managers',
6966
key: 'pm',
70-
icon: '📦',
71-
description: 'Enhanced package manager commands',
67+
description: 'Enhanced npm, npx, yarn, and pnpm wrappers',
7268
content: () => {
73-
logger.log(colors.cyan('\n📦 Package Manager Wrappers\n'))
69+
logger.log(colors.cyan('\nPackage Manager Wrappers\n'))
7470
logger.log(' socket npm [command] Secure npm wrapper')
7571
logger.log(' socket npx [command] Secure npx wrapper')
7672
logger.log(' socket yarn [command] Secure yarn wrapper')
7773
logger.log(' socket pnpm [command] Secure pnpm wrapper')
7874
logger.log('')
79-
logger.log(colors.gray('Features:'))
80-
logger.log(' • Blocks typosquatted packages')
81-
logger.log(' • Warns about risky dependencies')
82-
logger.log(' • Prevents supply chain attacks')
83-
logger.log(' • Maintains normal workflow')
75+
logger.log(colors.bold('Features:'))
76+
logger.log(' - Blocks typosquatted packages')
77+
logger.log(' - Warns about risky dependencies')
78+
logger.log(' - Prevents supply chain attacks')
79+
logger.log(' - Maintains normal workflow')
8480
logger.log('')
85-
logger.log(colors.gray('Examples:'))
81+
logger.log(colors.bold('Examples:'))
8682
logger.log(' socket npm install express')
8783
logger.log(' socket npx create-react-app my-app')
8884
logger.log(' socket yarn add lodash')
@@ -91,32 +87,30 @@ const helpCategories: HelpCategory[] = [
9187
{
9288
title: 'Package Analysis',
9389
key: 'pkg',
94-
icon: '📊',
95-
description: 'Analyze package security',
90+
description: 'Analyze package security and get security scores',
9691
content: () => {
97-
logger.log(colors.cyan('\n📊 Package Analysis Commands\n'))
92+
logger.log(colors.cyan('\nPackage Analysis Commands\n'))
9893
logger.log(' socket package score <pkg> Get security score')
9994
logger.log(' socket package issues <pkg> List security issues')
10095
logger.log(' socket package shallow <pkg> Quick security check')
10196
logger.log('')
102-
logger.log(colors.gray('Package Formats:'))
97+
logger.log(colors.bold('Package Formats:'))
10398
logger.log(' lodash Latest version')
10499
logger.log(' lodash@4.17.21 Specific version')
105100
logger.log(' pypi/flask/2.0.0 Python package')
106101
logger.log('')
107-
logger.log(colors.gray('Examples:'))
102+
logger.log(colors.bold('Examples:'))
108103
logger.log(' socket package score express')
109104
logger.log(' socket package issues react@18.0.0')
110105
logger.log(' socket ask "is lodash safe"')
111106
},
112107
},
113108
{
114-
title: 'Organizations & Repos',
109+
title: 'Organizations',
115110
key: 'org',
116-
icon: '🏢',
117111
description: 'Manage organizations and repositories',
118112
content: () => {
119-
logger.log(colors.cyan('\n🏢 Organization & Repository Commands\n'))
113+
logger.log(colors.cyan('\nOrganization & Repository Commands\n'))
120114
logger.log('')
121115
logger.log(colors.bold('Organizations:'))
122116
logger.log(' socket org list List your organizations')
@@ -129,18 +123,17 @@ const helpCategories: HelpCategory[] = [
129123
logger.log(' socket repo create <name> Create repository')
130124
logger.log(' socket repo view <name> View repository details')
131125
logger.log('')
132-
logger.log(colors.gray('Examples:'))
126+
logger.log(colors.bold('Examples:'))
133127
logger.log(' socket org list --json')
134128
logger.log(' socket repo create my-project')
135129
},
136130
},
137131
{
138132
title: 'Configuration',
139133
key: 'config',
140-
icon: '⚙️',
141-
description: 'CLI settings and configuration',
134+
description: 'CLI settings and configuration management',
142135
content: () => {
143-
logger.log(colors.cyan('\n⚙️ Configuration\n'))
136+
logger.log(colors.cyan('\nConfiguration\n'))
144137
logger.log('')
145138
logger.log(colors.bold('Commands:'))
146139
logger.log(' socket login Authenticate with Socket')
@@ -156,7 +149,7 @@ const helpCategories: HelpCategory[] = [
156149
logger.log(' apiToken Stored API token')
157150
logger.log(' apiBaseUrl API endpoint URL')
158151
logger.log('')
159-
logger.log(colors.gray('Examples:'))
152+
logger.log(colors.bold('Examples:'))
160153
logger.log(' socket config set defaultOrg my-org')
161154
logger.log(' socket config list --json')
162155
logger.log(' socket config get apiToken')
@@ -165,10 +158,9 @@ const helpCategories: HelpCategory[] = [
165158
{
166159
title: 'Environment Variables',
167160
key: 'env',
168-
icon: '🌍',
169-
description: 'Environment variables and settings',
161+
description: 'Environment variables for advanced configuration',
170162
content: () => {
171-
logger.log(colors.cyan('\n🌍 Environment Variables\n'))
163+
logger.log(colors.cyan('\nEnvironment Variables\n'))
172164
logger.log('')
173165
logger.log(colors.bold('Authentication:'))
174166
logger.log(' SOCKET_CLI_API_TOKEN Set the Socket API token')
@@ -205,7 +197,7 @@ const helpCategories: HelpCategory[] = [
205197
logger.log(' SOCKET_VERBOSE=1 Show verbose output')
206198
logger.log(' DEBUG NPM debug package pattern')
207199
logger.log('')
208-
logger.log(colors.gray('Examples:'))
200+
logger.log(colors.bold('Examples:'))
209201
logger.log(' SOCKET_CLI_API_TOKEN=xxx socket scan create')
210202
logger.log(' SOCKET_OFFLINE=1 socket scan list')
211203
logger.log(' SOCKET_CLI_DEBUG=1 socket fix --dry-run')
@@ -214,10 +206,9 @@ const helpCategories: HelpCategory[] = [
214206
{
215207
title: 'Common Flags',
216208
key: 'flags',
217-
icon: '🚩',
218-
description: 'Command-line flags and options',
209+
description: 'Global command-line flags and options',
219210
content: () => {
220-
logger.log(colors.cyan('\n🚩 Common Flags & Options\n'))
211+
logger.log(colors.cyan('\nCommon Flags & Options\n'))
221212
logger.log('')
222213
logger.log(colors.bold('Output Formats:'))
223214
logger.log(' --json Output results as JSON')
@@ -244,7 +235,7 @@ const helpCategories: HelpCategory[] = [
244235
logger.log(' --help, -h Show help for command')
245236
logger.log(' --help=<topic> Show help for specific topic')
246237
logger.log('')
247-
logger.log(colors.gray('Examples:'))
238+
logger.log(colors.bold('Examples:'))
248239
logger.log(' socket scan create --json')
249240
logger.log(' socket fix --dry-run --verbose')
250241
logger.log(' socket optimize --org my-org --force')
@@ -253,38 +244,36 @@ const helpCategories: HelpCategory[] = [
253244
{
254245
title: 'Natural Language',
255246
key: 'ask',
256-
icon: '💬',
257-
description: 'Use plain English commands',
247+
description: 'Use plain English to interact with Socket',
258248
content: () => {
259-
logger.log(colors.cyan('\n💬 Natural Language Interface\n'))
249+
logger.log(colors.cyan('\nNatural Language Interface\n'))
260250
logger.log('')
261251
logger.log(' socket ask "<question>" Ask in plain English')
262252
logger.log('')
263-
logger.log(colors.gray('Examples:'))
253+
logger.log(colors.bold('Examples:'))
264254
logger.log(' socket ask "scan for vulnerabilities"')
265255
logger.log(' socket ask "fix critical issues"')
266256
logger.log(' socket ask "is express safe to use"')
267257
logger.log(' socket ask "show production vulnerabilities"')
268258
logger.log(' socket ask "optimize my dependencies"')
269259
logger.log('')
270-
logger.log(colors.gray('Options:'))
260+
logger.log(colors.bold('Options:'))
271261
logger.log(' --execute, -e Execute the command directly')
272262
logger.log(' --explain Show detailed explanation')
273263
logger.log('')
274-
logger.log(colors.gray('Tips:'))
275-
logger.log(' • Be specific about what you want')
276-
logger.log(' • Mention "production" or "dev" to filter')
277-
logger.log(' • Use severity levels: critical, high, medium, low')
278-
logger.log(' • Say "dry run" to preview changes')
264+
logger.log(colors.bold('Tips:'))
265+
logger.log(' - Be specific about what you want')
266+
logger.log(' - Mention "production" or "dev" to filter')
267+
logger.log(' - Use severity levels: critical, high, medium, low')
268+
logger.log(' - Say "dry run" to preview changes')
279269
},
280270
},
281271
{
282272
title: 'All Commands',
283273
key: 'all',
284-
icon: '📚',
285-
description: 'Show complete command list',
274+
description: 'Complete list of all available commands',
286275
content: () => {
287-
logger.log(colors.cyan('\n📚 All Socket CLI Commands\n'))
276+
logger.log(colors.cyan('\nAll Socket CLI Commands\n'))
288277

289278
const commands = [
290279
{ cmd: 'analytics', desc: 'View security analytics' },
@@ -325,10 +314,9 @@ const helpCategories: HelpCategory[] = [
325314
{
326315
title: 'Quick Start',
327316
key: 'quick',
328-
icon: '🚀',
329-
description: 'Get started quickly',
317+
description: 'Get started with Socket CLI in minutes',
330318
content: () => {
331-
logger.log(colors.cyan('\n🚀 Quick Start Guide\n'))
319+
logger.log(colors.cyan('\nQuick Start Guide\n'))
332320
logger.log(colors.bold('New to Socket CLI?'))
333321
logger.log('')
334322
logger.log(colors.bold('1. First-time setup:'))
@@ -366,17 +354,17 @@ export async function showInteractiveHelp(): Promise<void> {
366354
logger.log(colors.gray('Or use: socket --help=<category>'))
367355
logger.log(colors.gray('Categories: scan, fix, pm, pkg, org, config, env, flags, ask, all, quick'))
368356
logger.log('')
369-
logger.log(colors.bold('💡 New user? Try: socket --help=quick'))
357+
logger.log(colors.bold('New user? Try: socket --help=quick'))
370358
return
371359
}
372360

373-
// Interactive mode
361+
// Interactive mode - simple prompt-based navigation
374362
const rl = readline.createInterface({ input: stdin, output: stdout })
375363

376364
try {
377365
while (true) {
378366
logger.log(colors.bold('What can I help you with?'))
379-
logger.log(colors.dim('💡 New user? Select "Quick Start" to get started!\n'))
367+
logger.log('New user? Select "Quick Start" to get started!\n')
380368
showCategoryList()
381369
logger.log('')
382370

@@ -412,10 +400,41 @@ export async function showInteractiveHelp(): Promise<void> {
412400
}
413401

414402
function showCategoryList(): void {
403+
// Calculate column widths
404+
const termWidth = process.stdout.columns || 80
405+
const numColumns = termWidth >= 120 ? 3 : termWidth >= 80 ? 2 : 1
406+
const columnWidth = Math.floor(termWidth / numColumns) - 2
407+
408+
// Group categories into columns
409+
const itemsPerColumn = Math.ceil(helpCategories.length / numColumns)
410+
const columns: HelpCategory[][] = []
411+
412+
for (let i = 0; i < numColumns; i++) {
413+
const start = i * itemsPerColumn
414+
const end = Math.min(start + itemsPerColumn, helpCategories.length)
415+
columns.push(helpCategories.slice(start, end))
416+
}
417+
418+
// Print rows
419+
for (let row = 0; row < itemsPerColumn; row++) {
420+
let line = ''
421+
for (let col = 0; col < numColumns; col++) {
422+
const category = columns[col]?.[row]
423+
if (category) {
424+
const num = helpCategories.indexOf(category) + 1
425+
const entry = `[${num}] ${category.title}`
426+
line += entry.padEnd(columnWidth)
427+
}
428+
}
429+
if (line.trim()) {
430+
logger.log(line)
431+
}
432+
}
433+
434+
// Print descriptions below in a more compact format
435+
logger.log('')
415436
helpCategories.forEach((cat, index) => {
416-
const num = colors.dim(`[${index + 1}]`)
417-
logger.log(` ${num} ${cat.icon} ${colors.bold(cat.title)}`)
418-
logger.log(` ${colors.gray(cat.description)}`)
437+
logger.log(` ${colors.gray(`[${index + 1}]`)} ${cat.description}`)
419438
})
420439
}
421440

0 commit comments

Comments
 (0)