feat: UX updates (#3318)

* ux changes

* small fixes

* use consts for colors

Author: zixlin7

crates/chat-cli/src/cli/chat/cli/checkpoint.rs

@@ -26,6 +26,7 @@ use crate::cli::experiment::experiment_manager::{
     ExperimentManager,
     ExperimentName,
 };
+use crate::constants::CLI_NAME;
 use crate::os::Os;
 use crate::theme::StyledText;
 use crate::util::directories::get_shadow_repo_dir;
@@ -91,7 +92,9 @@ impl CheckpointSubcommand {
             execute!(
                 session.stderr,
                 StyledText::error_fg(),
-                style::Print("\nCheckpoint is disabled. Enable it with: kiro-cli settings chat.enableCheckpoint true\n"),
+                style::Print(&format!(
+                    "\nCheckpoint is disabled. Enable it with: {CLI_NAME} settings chat.enableCheckpoint true\n"
+                )),
                 StyledText::reset(),
             )?;
             return Ok(ChatState::PromptUser {

crates/chat-cli/src/cli/chat/cli/context.rs

@@ -19,8 +19,9 @@ use crate::cli::chat::{
     ChatSession,
     ChatState,
 };
+use crate::constants::context_text;
 use crate::constants::help_text::{
-    CONTEXT_DESCRIPTION,
+    context_description,
     context_long_help,
 };
 use crate::os::Os;
@@ -29,7 +30,7 @@ use crate::theme::StyledText;
 #[deny(missing_docs)]
 #[derive(Debug, PartialEq, Subcommand)]
 #[command(
-    about = CONTEXT_DESCRIPTION,
+    about = context_description(),
     before_long_help = context_long_help()
 )]
 /// Context subcommands
@@ -238,7 +239,8 @@ impl ContextSubcommand {
                                 session.stderr,
                                 StyledText::warning_fg(),
                                 style::Print(format!(
-                                    "Total token count exceeds limit: {context_files_max_size}. The following files will be automatically dropped when interacting with Kiro. Consider removing them. \n\n"
+                                    "{} \n\n",
+                                    context_text::context_limit_warning(context_files_max_size)
                                 )),
                                 StyledText::reset(),
                             )?;

crates/chat-cli/src/cli/chat/cli/mod.rs

@@ -56,9 +56,11 @@ use crate::cli::issue;
 use crate::constants::ui_text;
 use crate::os::Os;
 
-/// q (Kiro Chat)
+/// Use any of these commands to manage your Kiro session. All commands start with '/'.
 #[derive(Debug, PartialEq, Parser)]
-#[command(color = clap::ColorChoice::Always, term_width = 0, after_long_help = &ui_text::extra_help())]
+#[command(
+    color = clap::ColorChoice::Always, term_width = 0, after_long_help = &ui_text::extra_help(), override_usage = "/<COMMAND>",
+)]
 pub enum SlashCommand {
     /// Quit the application
     #[command(aliases = ["q", "exit"])]

crates/chat-cli/src/cli/chat/cli/model.rs

@@ -109,20 +109,36 @@ pub async fn select_model(os: &Os, session: &mut ChatSession) -> Result<Option<C
             let description = model.description();
             if Some(model.model_id.as_str()) == active_model_id {
                 if let Some(desc) = description {
-                    format!("{display_name} (active) | {desc}")
+                    if desc.to_lowercase().contains("experimental") {
+                        format!(
+                            "{display_name} {} {}",
+                            StyledText::current_item("(current)"),
+                            StyledText::secondary("-- experimental")
+                        )
+                    } else {
+                        format!("{display_name} {} | {desc}", StyledText::current_item("(current)"))
+                    }
                 } else {
-                    format!("{display_name} (active)")
+                    format!("{display_name} {}", StyledText::current_item("(current)"))
                 }
             } else if let Some(desc) = description {
-                format!("{display_name} | {desc}")
+                if desc.to_lowercase().contains("experimental") {
+                    format!("{display_name} {}", StyledText::secondary("-- experimental"))
+                } else {
+                    format!("{display_name} | {desc}")
+                }
             } else {
                 display_name.to_string()
             }
         })
         .collect();
 
     let selection: Option<_> = match Select::with_theme(&crate::util::dialoguer_theme())
-        .with_prompt("Select a model for this chat session")
+        .with_prompt(format!(
+            "Press ({}) to navigate · Enter({}) to select model",
+            StyledText::current_item("↑↓"),
+            StyledText::current_item("⏎")
+        ))
         .items(&labels)
         .default(0)
         .interact_on_opt(&dialoguer::console::Term::stdout())

crates/chat-cli/src/cli/chat/cli/subscribe.rs

@@ -16,17 +16,12 @@ use crate::cli::chat::{
     get_subscription_status_with_spinner,
     with_spinner,
 };
+use crate::constants::subscription_text;
 use crate::os::Os;
 use crate::theme::StyledText;
 use crate::util::system_info::is_remote;
 
-const SUBSCRIBE_TITLE_TEXT: &str = color_print::cstr! { "<white!,bold>Subscribe to Kiro Developer Pro</white!,bold>" };
-
-const SUBSCRIBE_TEXT: &str = color_print::cstr! { "During the upgrade, you'll be asked to link your Builder ID to the AWS account that will be billed the monthly subscription fee.
-
-Need help? Visit our subscription support page> <blue!>https://docs.aws.amazon.com/console/amazonq/upgrade-builder-id</blue!>" };
-
-/// Arguments for the subscribe command to manage Kiro Developer Pro subscriptions
+/// Arguments for the subscribe command to manage Developer Pro subscriptions
 #[deny(missing_docs)]
 #[derive(Debug, PartialEq, Args)]
 pub struct SubscribeArgs {
@@ -41,7 +36,7 @@ impl SubscribeArgs {
             execute!(
                 session.stderr,
                 StyledText::warning_fg(),
-                style::Print("\nYour Kiro Developer Pro subscription is managed through IAM Identity Center.\n\n"),
+                style::Print(format!("\n{}\n\n", subscription_text::idc_subscription_message())),
                 StyledText::reset(),
             )?;
         } else if self.manage {
@@ -52,7 +47,7 @@ impl SubscribeArgs {
                         queue!(
                             session.stderr,
                             StyledText::warning_fg(),
-                            style::Print("You don't seem to have a Kiro Developer Pro subscription. "),
+                            style::Print(format!("{}. ", subscription_text::no_subscription_message())),
                             StyledText::secondary_fg(),
                             style::Print("Use "),
                             StyledText::success_fg(),
@@ -109,7 +104,7 @@ async fn upgrade_to_pro(os: &mut Os, session: &mut ChatSession) -> Result<(), Ch
                 queue!(
                     session.stderr,
                     StyledText::warning_fg(),
-                    style::Print("Your Builder ID already has a Kiro Developer Pro subscription.\n\n"),
+                    style::Print(format!("{}\n\n", subscription_text::already_subscribed_message())),
                     StyledText::reset(),
                 )?;
                 return Ok(());
@@ -129,9 +124,10 @@ async fn upgrade_to_pro(os: &mut Os, session: &mut ChatSession) -> Result<(), Ch
     // Upgrade information
     queue!(
         session.stderr,
-        style::Print(SUBSCRIBE_TITLE_TEXT),
+        StyledText::primary_fg(),
+        style::Print(subscription_text::subscribe_title()),
         StyledText::secondary_fg(),
-        style::Print(format!("\n\n{SUBSCRIBE_TEXT}\n\n")),
+        style::Print(format!("\n\n{}\n\n", subscription_text::SUBSCRIBE_INFO)),
         StyledText::reset(),
         cursor::Show
     )?;

crates/chat-cli/src/cli/chat/cli/tangent.rs

@@ -16,6 +16,7 @@ use crate::cli::experiment::experiment_manager::{
     ExperimentManager,
     ExperimentName,
 };
+use crate::constants::CLI_NAME;
 use crate::os::Os;
 use crate::theme::StyledText;
 
@@ -53,7 +54,9 @@ impl TangentArgs {
             execute!(
                 session.stderr,
                 StyledText::error_fg(),
-                style::Print("\nTangent mode is disabled. Enable it with: kiro-cli settings chat.enableTangentMode true\n"),
+                style::Print(&format!(
+                    "\nTangent mode is disabled. Enable it with: {CLI_NAME} settings chat.enableTangentMode true\n"
+                )),
                 StyledText::reset(),
             )?;
             return Ok(ChatState::PromptUser {

crates/chat-cli/src/cli/chat/mod.rs

@@ -3447,7 +3447,7 @@ impl ChatSession {
                         self.stderr,
                         style::Print(format!(
                             "\n(To exit the CLI, press Ctrl+C or Ctrl+D again or type {})\n\n",
-                            "/quit".green()
+                            StyledText::brand("/quit")
                         ))
                     )
                     .unwrap_or_default();

crates/chat-cli/src/cli/chat/skim_integration.rs

@@ -67,11 +67,19 @@ pub fn get_available_commands(os: &Os) -> Vec<String> {
 /// Format commands for skim display
 /// Create a standard set of skim options with consistent styling
 fn create_skim_options(prompt: &str, multi: bool) -> Result<SkimOptions> {
+    use crate::theme::{
+        BRAND_COLOR_ANSI,
+        SECONDARY_COLOR_ANSI,
+    };
+
     SkimOptionsBuilder::default()
         .height("100%".to_string())
         .prompt(prompt.to_string())
         .reverse(true)
         .multi(multi)
+        .color(Some(format!(
+            "current:{BRAND_COLOR_ANSI}:bold,pointer:{BRAND_COLOR_ANSI},prompt:{SECONDARY_COLOR_ANSI}"
+        )))
         .build()
         .map_err(|e| eyre!("Failed to build skim options: {}", e))
 }
@@ -210,7 +218,11 @@ pub fn select_context_paths_with_skim(context_manager: &ContextManager) -> Resul
 pub fn select_command(os: &Os, context_manager: &ContextManager, tools: &[String]) -> Result<Option<String>> {
     let commands = get_available_commands(os);
 
-    match launch_skim_selector(&commands, "Select command: ", false)? {
+    match launch_skim_selector(
+        &commands,
+        "Commands: Press (↑↓) to navigate · Enter(⏎) to select command",
+        false,
+    )? {
         Some(selections) if !selections.is_empty() => {
             let selected_command = &selections[0];