feat: show description for active setting in /settings dialog

[wenshao]

Problem

The /settings dialog only shows setting labels (e.g. "Vim Mode") and their values, but no explanation of what each setting does. Users have to guess or check external docs to understand the purpose of each option.

Solution

Display the description from the settings schema below the settings list for the currently highlighted item. The description updates as the user navigates between settings.

╭ Settings ─────────────────────────────────────────╮
│                                                   │
│  ● Vim Mode                                  off  │
│    Language: UI                              auto  │
│    Language: Model                           auto  │
│                                                   │
│  Enable Vim keybindings                           │
│  (Use Enter to select, Tab to configure scope)    │
╰───────────────────────────────────────────────────╯

Changes

• Pass description field from settings schema into dialog items, with i18n support via t()
• Reserve height for description area in terminal height calculations to prevent layout overflow
• Render description in secondary color with italic style between settings list and help text

Test plan

• Run /settings and verify a description line appears below the settings list for the highlighted item
• Navigate up/down and verify the description updates to match the selected setting
• Verify layout is correct when terminal height is small (description area is accounted for in height calculations)
• Switch to scope selector view (Tab) and verify description is hidden

🤖 Generated with Claude Code

[github-actions]

📋 Review Summary

This PR adds a helpful UX improvement to display the description of the currently highlighted setting in the /settings dialog. The implementation is clean, follows existing patterns from the ThemeDialog, and includes proper height calculations for the UI layout. Overall, this is a well-executed feature that enhances usability.

🔍 General Feedback

• The implementation follows the existing pattern established in ThemeDialog for height calculations, which is good for consistency
• The changes are minimal and focused, touching only the necessary parts of the SettingsDialog component
• The description is properly hidden when switching to scope selector view (Tab), as specified in the test plan
• Good use of the translation function t() for internationalization support
• The conditional rendering and margin adjustments are handled cleanly

🎯 Specific Feedback

🟢 Medium

• File: packages/cli/src/ui/components/SettingsDialog.tsx:132-134 - The description fallback logic could be simplified. Currently it reads:

  description: definition?.description
    ? t(definition.description) || definition.description
    : undefined,

  Consider extracting this into a helper function for consistency across the codebase, especially if this pattern might be reused elsewhere.

• File: packages/cli/src/ui/components/SettingsDialog.tsx:391-395 - The activeDescription variable could benefit from a comment explaining why we check mode === 'settings' here, since this check is repeated in the JSX rendering. This would improve maintainability for future developers.

🔵 Low

• File: packages/cli/src/ui/components/SettingsDialog.tsx:397 - The DESCRIPTION_HEIGHT = 2 constant includes a comment "// Description line + margin", but it's not immediately clear what the "2" represents (1 line for text + 1 for margin?). Consider being more explicit: const DESCRIPTION_HEIGHT = 2; // 1 line for description text + 1 line margin.

• File: packages/cli/src/ui/components/SettingsDialog.tsx:895-901 - The description box uses wrap="truncate-end" which is appropriate, but consider whether wrap="wrap" might be better for longer descriptions that could span multiple lines within the allocated space. This depends on the design intent, but worth verifying with the UI/UX requirements.

✅ Highlights

• Excellent adherence to the existing codebase patterns and conventions
• The height calculation for the dialog is well-structured and accounts for the new description area properly
• Clean separation of concerns: the description logic is added without disrupting existing functionality
• The conditional margin on the help text box (marginTop={activeDescription && mode === 'settings' ? 0 : 1}) is a nice touch to maintain consistent spacing