Feature Request: Add Guided Credential Setup Instructions for Services

[utkarsh232005]

Summary

When users configure integrations using kdm config setup, the CLI should provide detailed guidance on how to obtain the required credentials for the selected service.

Currently, users are prompted to enter credentials (such as API keys, webhook URLs, tokens, etc.) without instructions on where or how to generate them. This can create confusion, especially for first-time users.

---

Problem

Different services require different credentials, and many users may not know:

• What credential is required
• Where to find it
• How to generate it
• Which permissions/settings are needed

For example, Discord integration requires a Webhook URL, but users may not know how to create a Discord webhook.

---

Proposed Solution

After a user selects a service during kdm config setup, display step-by-step instructions for generating the required credentials before prompting for input.

Example flow:

Select Service:
> Discord

[utkarsh232005]

@CodeRabbit plan

[coderabbitai]

Coding Plan

Summary

• Insert instructional console.log blocks in src/commands/config.ts at the identified points between service selection and credential input prompts
• Reuse the visual separator pattern (chalk.gray) already established in the config list subcommand for consistent styling
• Keep instructions inline in the command file rather than extracting to a separate module, matching the existing codebase simplicity
• Extend existing tests with console.log assertions using loose string matching patterns

Implementation Steps

Add Guided Credential Instructions to Setup Flow

This phase adds instructional guidance blocks for each service that requires credentials, displaying them after service selection but before credential prompts. The implementation follows existing output patterns already used elsewhere in the config command.

Task 1: Add Discord Webhook Setup Instructions

Display step-by-step instructions for creating a Discord webhook before prompting for the webhook URL.

• Insert a guidance block in src/commands/config.ts within the Discord branch, after the if (choice === 'discord') check but before the input() call for the webhook URL
• Use the visual separator pattern from the config list subcommand (chalk.gray('────...')) to frame the instructions
• Include clear numbered steps: opening Server Settings, navigating to Integrations > Webhooks, creating a new webhook, selecting the target channel, and copying the URL
• Use chalk.cyan or chalk.blue for the instruction header and chalk.dim for supplementary details to maintain visual hierarchy

Task 2: Add Email SMTP Setup Instructions

Display guidance on SMTP configuration requirements before prompting for SMTP credentials.

• Insert a guidance block in src/commands/config.ts within the Email branch, before the first input() call for SMTP Host
• Include information about common SMTP hosts (e.g., smtp.gmail.com for Gmail, smtp.office365.com for Outlook)
• Mention that the SMTP password must be set via the KDM_SMTP_PASSWORD environment variable upfront (currently this is only shown after all prompts)
• Note any provider-specific requirements (e.g., Gmail may require an App Password if 2FA is enabled)
• Use consistent visual formatting with the Discord instructions (same separator style, color scheme)

Task 3: Update Tests for Guidance Output

Add test assertions to verify that credential setup instructions are displayed for each service.

• In src/__tests__/config.test.ts, add assertions in the Discord setup test to verify console.log was called with content indicating Discord webhook instructions were shown (use stringContaining or stringMatching for flexibility)
• Add similar assertions in the Email setup test to verify SMTP guidance was displayed
• Follow the existing test pattern of using loose string matching rather than exact text comparison to avoid brittle tests

🤖 Prompt for AI agents

This phase adds instructional guidance blocks to `src/commands/config.ts` for
each service requiring credentials, displayed after service selection but before
credential input prompts. The goal is to guide users on how to obtain the
necessary credentials before they are asked to enter them.

**Task 1: Discord Webhook Setup Instructions (`src/commands/config.ts`)**
- Locate the Discord branch (the `if (choice === 'discord')` block)
- After the branch check and before the `input()` call for the webhook URL,
insert a `console.log` guidance block
- Frame the block using the existing visual separator pattern:
`chalk.gray('────...')`
- Use `chalk.cyan` or `chalk.blue` for the instruction header
- Use `chalk.dim` for supplementary details
- Include numbered steps covering: opening Server Settings, navigating to
Integrations > Webhooks, creating a new webhook, selecting the target channel,
and copying the URL

**Task 2: Email SMTP Setup Instructions (`src/commands/config.ts`)**
- Locate the Email branch and insert a `console.log` guidance block before the
first `input()` call for SMTP Host
- Use the same visual separator style (`chalk.gray('────...')`) and color scheme
as the Discord block
- Include common SMTP host examples: `smtp.gmail.com` for Gmail,
`smtp.office365.com` for Outlook
- Mention upfront that the SMTP password must be set via the `KDM_SMTP_PASSWORD`
environment variable (move this notice before the prompts)
- Note provider-specific requirements such as Gmail requiring an App Password
when 2FA is enabled

**Task 3: Update Tests (`src/__tests__/config.test.ts`)**
- In the Discord setup test, add assertions that `console.log` was called with
content indicating Discord webhook instructions were shown; use
`stringContaining` or `stringMatching` for loose matching
- In the Email setup test, add similar assertions verifying SMTP guidance was
displayed
- Follow the existing pattern of loose string matching to avoid brittle tests

Research

The CLI uses @vr_patel/tui for interactive prompts (select and input). The kdm config setup command in src/commands/config.ts presents a service selection menu (Discord, Email SMTP, None), then branches into service-specific credential prompts. Informational output uses chalk directly with console.log, and the config list subcommand demonstrates a visual separator pattern using chalk.gray('────...') that can be reused for instruction blocks. Tests mock the TUI prompts and spy on console.log for assertions.

---

🚀 Next Steps

🤖 All AI agent prompts combined

This phase adds instructional guidance blocks to `src/commands/config.ts` for
each service requiring credentials, displayed after service selection but before
credential input prompts. The goal is to guide users on how to obtain the
necessary credentials before they are asked to enter them.

**Task 1: Discord Webhook Setup Instructions (`src/commands/config.ts`)**
- Locate the Discord branch (the `if (choice === 'discord')` block)
- After the branch check and before the `input()` call for the webhook URL,
insert a `console.log` guidance block
- Frame the block using the existing visual separator pattern:
`chalk.gray('────...')`
- Use `chalk.cyan` or `chalk.blue` for the instruction header
- Use `chalk.dim` for supplementary details
- Include numbered steps covering: opening Server Settings, navigating to
Integrations > Webhooks, creating a new webhook, selecting the target channel,
and copying the URL

**Task 2: Email SMTP Setup Instructions (`src/commands/config.ts`)**
- Locate the Email branch and insert a `console.log` guidance block before the
first `input()` call for SMTP Host
- Use the same visual separator style (`chalk.gray('────...')`) and color scheme
as the Discord block
- Include common SMTP host examples: `smtp.gmail.com` for Gmail,
`smtp.office365.com` for Outlook
- Mention upfront that the SMTP password must be set via the `KDM_SMTP_PASSWORD`
environment variable (move this notice before the prompts)
- Note provider-specific requirements such as Gmail requiring an App Password
when 2FA is enabled

**Task 3: Update Tests (`src/__tests__/config.test.ts`)**
- In the Discord setup test, add assertions that `console.log` was called with
content indicating Discord webhook instructions were shown; use
`stringContaining` or `stringMatching` for loose matching
- In the Email setup test, add similar assertions verifying SMTP guidance was
displayed
- Follow the existing pattern of loose string matching to avoid brittle tests

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!