From e48c534978e5864662f9f155815c029cfe549f30 Mon Sep 17 00:00:00 2001
From: Josh Lambert <josh@kilocode.ai>
Date: Mon, 10 Aug 2026 10:32:19 -0400
Subject: [PATCH] fix(tui): separate autocomplete descriptions from labels

---
 .changeset/tidy-autocomplete-labels.md             | 5 +++++
 packages/tui/src/component/prompt/autocomplete.tsx | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tidy-autocomplete-labels.md

diff --git a/.changeset/tidy-autocomplete-labels.md b/.changeset/tidy-autocomplete-labels.md
new file mode 100644
index 00000000000..df7c9a8c347
--- /dev/null
+++ b/.changeset/tidy-autocomplete-labels.md
@@ -0,0 +1,5 @@
+---
+"@kilocode/cli": patch
+---
+
+Separate autocomplete item names from their descriptions in the TUI.
diff --git a/packages/tui/src/component/prompt/autocomplete.tsx b/packages/tui/src/component/prompt/autocomplete.tsx
index 8f9f983c7bc..489e6ae76d9 100644
--- a/packages/tui/src/component/prompt/autocomplete.tsx
+++ b/packages/tui/src/component/prompt/autocomplete.tsx
@@ -831,13 +831,14 @@ export function Autocomplete(props: {
                 moveTo(index)
               }}
               onMouseUp={() => select()}
+              gap={1} // kilocode_change - keep descriptions separated from labels in flex layout
             >
               <text fg={index === store.selected ? selectedForeground(theme) : theme.text} flexShrink={0}>
                 {option().display}
               </text>
               <Show when={option().description}>
                 <text fg={index === store.selected ? selectedForeground(theme) : theme.textMuted} wrapMode="none">
-                  {" " + option().description?.trimStart()}
+                  {option().description?.trimStart()}{/* kilocode_change */}
                 </text>
               </Show>
             </box>