Mirror: feat(slash-commands): type/source indicators (#5696)

.changeset/slash-command-enhancements.md

@@ -0,0 +1,12 @@
+---
+"kilo-code": minor
+---
+
+feat: Enhance slash command menu with type indicators, source badges, skill invocation, and argument hints
+
+- Add type badges (command, mode, workflow, skill) with distinct colors to the "/" slash command dropdown
+- Add source labels (project, global, organization) for non-built-in items
+- Add skills to the "/" slash command menu, allowing discovery and invocation of installed skills
+- Color-code slash command highlights in the text input to match their type
+- Support Claude Code's `argument-hint` SKILL.md frontmatter field (from the Agent Skills specification), displayed as ghost text in the input after selecting a skill command to guide usage (e.g. `[-a] [-x] <task description>`)
+- Parse and propagate `argument-hint` from skill frontmatter through the full data pipeline (SkillsManager → ExtensionStateContext → SlashCommand)

cli/src/constants/providers/labels.ts

@@ -52,7 +52,6 @@ export const PROVIDER_LABELS: Record<ProviderName, string> = {
 	synthetic: "Synthetic",
 	"sap-ai-core": "SAP AI Core",
 	baseten: "BaseTen",
-	apertis: "Apertis", // kilocode_change
 	corethink: "Corethink",
 }
 

cli/src/constants/providers/settings.ts

@@ -1110,7 +1110,6 @@ export const PROVIDER_DEFAULT_MODELS: Record<ProviderName, string> = {
 	synthetic: "synthetic-model",
 	"sap-ai-core": "gpt-4o",
 	baseten: "zai-org/GLM-4.6",
-	apertis: "claude-sonnet-4-20250514", // kilocode_change
 	corethink: "corethink",
 }
 

cli/src/constants/providers/validation.ts

@@ -53,6 +53,5 @@ export const PROVIDER_REQUIRED_FIELDS: Record<ProviderName, string[]> = {
 	"virtual-quota-fallback": [], // Has array validation
 	minimax: ["minimaxBaseUrl", "minimaxApiKey", "apiModelId"],
 	baseten: ["basetenApiKey", "apiModelId"],
-	apertis: ["apertisApiKey", "apertisModelId"], // kilocode_change
 	corethink: ["corethinkApiKey", "corethinkModelId"],
 }

packages/types/src/providers/fireworks.ts

@@ -207,7 +207,7 @@ export const fireworksModels = {
 		supportsImages: false,
 		supportsPromptCache: false,
 		supportsNativeTools: true,
-    defaultToolProtocol: "native",
+		defaultToolProtocol: "native",
 		inputPrice: 0.22,
 		outputPrice: 0.88,
 		displayName: "GLM-4.5 Air",
@@ -243,7 +243,7 @@ export const fireworksModels = {
 		supportsImages: false,
 		supportsPromptCache: true,
 		supportsNativeTools: true,
-    defaultToolProtocol: "native",
+		defaultToolProtocol: "native",
 		inputPrice: 0.05,
 		outputPrice: 0.2,
 		cacheReadsPrice: 0.04,

src/core/slash-commands/kilo.ts

@@ -1,6 +1,7 @@
 // kilocode_change whole file
 
 import { ClineRulesToggles } from "../../shared/cline-rules"
+import { SkillMetadata } from "../../shared/skills"
 import fs from "fs/promises"
 import path from "path"
 import {
@@ -27,6 +28,7 @@ export async function parseKiloSlashCommands(
 	text: string,
 	localWorkflowToggles: ClineRulesToggles,
 	globalWorkflowToggles: ClineRulesToggles,
+	skills: SkillMetadata[] = [],
 ): Promise<{ processedText: string; needsRulesFileCheck: boolean }> {
 	const condenseAliases = condenseToolResponse
 
@@ -75,6 +77,22 @@ export async function parseKiloSlashCommands(
 				console.error(`Error reading workflow file ${matchingWorkflow.fullPath}: ${error}`)
 			}
 		}
+
+		// Check for matching skill
+		const matchingSkill = skills.find((skill) => skill.name === commandName)
+		if (matchingSkill) {
+			try {
+				const skillContent = (await fs.readFile(matchingSkill.path, "utf8")).trim()
+
+				const processedText =
+					`<explicit_instructions type="${matchingSkill.name}">\n${skillContent}\n</explicit_instructions>\n` +
+					textWithoutSlashCommand
+
+				return { processedText, needsRulesFileCheck: false }
+			} catch (error) {
+				console.error(`Error reading skill file ${matchingSkill.path}: ${error}`)
+			}
+		}
 	}
 
 	// if no supported commands are found, return the original text

src/core/task/Task.ts

@@ -4124,10 +4124,14 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 							)
 
 							// when parsing slash commands, we still want to allow the user to provide their desired context
+							const currentMode = await this.getTaskMode()
+							const skillsForMode =
+								this.providerRef.deref()?.getSkillsManager()?.getSkillsForMode(currentMode) ?? []
 							const { processedText, needsRulesFileCheck: needsCheck } = await parseKiloSlashCommands(
 								parsedText.text,
 								localWorkflowToggles,
 								globalWorkflowToggles,
+								skillsForMode,
 							)
 
 							if (needsCheck) {

src/core/webview/webviewMessageHandler.ts

@@ -527,6 +527,7 @@ export const webviewMessageHandler = async (
 
 			provider.postStateToWebview()
 			provider.postRulesDataToWebview() // kilocode_change: send workflows and rules immediately
+			provider.postSkillsDataToWebview() // kilocode_change: send skills data for slash command dropdown
 			provider.workspaceTracker?.initializeFilePaths() // Don't await.
 
 			getTheme().then((theme) => provider.postMessageToWebview({ type: "theme", text: JSON.stringify(theme) }))

src/services/autocomplete/AutocompleteServiceManager.ts

@@ -36,7 +36,9 @@ export class AutocompleteServiceManager {
 
 	constructor(context: vscode.ExtensionContext, cline: ClineProvider) {
 		if (AutocompleteServiceManager._instance) {
-			throw new Error("AutocompleteServiceManager is a singleton. Use AutocompleteServiceManager.getInstance() instead.")
+			throw new Error(
+				"AutocompleteServiceManager is a singleton. Use AutocompleteServiceManager.getInstance() instead.",
+			)
 		}
 
 		this.context = context

src/services/autocomplete/classic-auto-complete/HoleFiller.ts

@@ -16,7 +16,11 @@ export type { HoleFillerAutocompletePrompt, FillInAtCursorSuggestion, ChatComple
  * Parse the response - only handles responses with <COMPLETION> tags
  * Returns a FillInAtCursorSuggestion with the extracted text, or an empty string if nothing found
  */
-export function parseAutocompleteResponse(fullResponse: string, prefix: string, suffix: string): FillInAtCursorSuggestion {
+export function parseAutocompleteResponse(
+	fullResponse: string,
+	prefix: string,
+	suffix: string,
+): FillInAtCursorSuggestion {
 	let fimText: string = ""
 
 	// Match content strictly between <COMPLETION> and </COMPLETION> tags

src/services/skills/SkillsManager.ts

@@ -165,6 +165,10 @@ export class SkillsManager {
 				return
 			}
 
+			// Extract optional argument-hint from frontmatter
+			const argumentHint =
+				typeof frontmatter["argument-hint"] === "string" ? frontmatter["argument-hint"].trim() : undefined
+
 			// Create unique key combining name, source, and mode for override resolution
 			const skillKey = this.getSkillKey(effectiveSkillName, source, mode)
 
@@ -174,6 +178,7 @@ export class SkillsManager {
 				path: skillMdPath,
 				source,
 				mode, // undefined for generic skills, string for mode-specific
+				...(argumentHint && { argumentHint }),
 			})
 		} catch (error) {
 			console.error(`Failed to load skill at ${skillDir}:`, error)

src/shared/skills.ts

@@ -8,6 +8,7 @@ export interface SkillMetadata {
 	path: string // Absolute path to SKILL.md
 	source: "global" | "project" // Where the skill was discovered
 	mode?: string // If set, skill is only available in this mode
+	argumentHint?: string // Optional: usage hint shown after command selection (from frontmatter argument-hint)
 }
 
 /**

src/test-llm-autocompletion/mock-context-provider.ts

@@ -130,7 +130,9 @@ export function createProviderForTesting(
 	costTrackingCallback: CostTrackingCallback = () => {},
 	getSettings: () => AutocompleteServiceSettings | null = () => null,
 ): AutocompleteInlineCompletionProvider {
-	const instance = Object.create(AutocompleteInlineCompletionProvider.prototype) as AutocompleteInlineCompletionProvider
+	const instance = Object.create(
+		AutocompleteInlineCompletionProvider.prototype,
+	) as AutocompleteInlineCompletionProvider
 	// Initialize private fields using Object.assign to bypass TypeScript private access
 	Object.assign(instance, {
 		suggestionsHistory: [],

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -49,7 +49,7 @@ import {
 	shouldShowSlashCommandsMenu,
 	getMatchingSlashCommands,
 	insertSlashCommand,
-	validateSlashCommand,
+	findSlashCommand,
 } from "@/utils/slash-commands"
 // kilocode_change end
 
@@ -159,6 +159,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			togglePinnedApiConfig,
 			localWorkflows, // kilocode_change
 			globalWorkflows, // kilocode_change
+			skills, // kilocode_change
 			taskHistoryVersion, // kilocode_change
 			clineMessages,
 			ghostServiceSettings, // kilocode_change
@@ -691,6 +692,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								customModes,
 								localWorkflows,
 								globalWorkflows,
+								skills,
 							) // kilocode_change
 
 							if (commands.length === 0) {
@@ -710,6 +712,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							customModes,
 							localWorkflows,
 							globalWorkflows,
+							skills,
 						)
 						if (commands.length > 0) {
 							handleSlashCommandsSelect(commands[selectedSlashCommandsIndex])
@@ -886,6 +889,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				showSlashCommandsMenu, // kilocode_change start
 				localWorkflows,
 				globalWorkflows,
+				skills,
 				customModes,
 				handleSlashCommandsSelect,
 				selectedSlashCommandsIndex,
@@ -949,6 +953,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					customModes,
 					localWorkflows,
 					globalWorkflows,
+					skills,
 				)
 				// kilocode_change end
 
@@ -1024,10 +1029,11 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 				}
 			},
 			[
-				// kilocode_change start: workflow toggles dependencies
+				// kilocode_change start: workflow toggles and skills dependencies
 				customModes,
 				localWorkflows,
 				globalWorkflows,
+				skills,
 				// kilocode_change end
 				setInputValue,
 				setSearchRequestId,
@@ -1187,12 +1193,27 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 
 				// extract and validate the exact command text
 				const commandText = processedText.substring(slashIndex + 1, endIndex)
-				const isValidCommand = validateSlashCommand(commandText, customModes)
+				const matchedCommand = findSlashCommand(
+					commandText,
+					customModes,
+					localWorkflows,
+					globalWorkflows,
+					skills,
+				)
 
-				if (isValidCommand) {
+				if (matchedCommand) {
 					const fullCommand = processedText.substring(slashIndex, endIndex) // includes slash
+					const typeClass = matchedCommand.type ? ` slash-command-type-${matchedCommand.type}` : ""
+
+					let highlighted = `<mark class="slash-command-match-textarea-highlight${typeClass}">${fullCommand}</mark>`
+
+					// Show argument hint as ghost text when command has one and user hasn't typed args yet
+					// Skip if FIM autocomplete ghost text is active to avoid overlapping hints
+					const textAfterCommand = processedText.substring(endIndex).trim()
+					if (matchedCommand.argumentHint && !textAfterCommand && !autocompleteText) {
+						highlighted += ` <span class="slash-command-argument-hint">${escapeHtml(matchedCommand.argumentHint)}</span>`
+					}
 
-					const highlighted = `<mark class="slash-command-match-textarea-highlight">${fullCommand}</mark>`
 					processedText =
 						processedText.substring(0, slashIndex) + highlighted + processedText.substring(endIndex)
 				}
@@ -1225,7 +1246,16 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			highlightLayerRef.current.innerHTML = processedText
 			highlightLayerRef.current.scrollTop = textAreaRef.current.scrollTop
 			highlightLayerRef.current.scrollLeft = textAreaRef.current.scrollLeft
-		}, [customModes, autocompleteText, inputValue, isRecording, previewRanges]) // kilocode_change - merged dependencies
+		}, [
+			customModes,
+			localWorkflows,
+			globalWorkflows,
+			skills,
+			autocompleteText,
+			inputValue,
+			isRecording,
+			previewRanges,
+		]) // kilocode_change - merged dependencies
 
 		useLayoutEffect(() => {
 			updateHighlights()

webview-ui/src/components/chat/SlashCommandMenu.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useEffect } from "react"
-import { SlashCommand, getMatchingSlashCommands } from "@/utils/slash-commands"
+import { SlashCommand, SlashCommandSource, SlashCommandType, getMatchingSlashCommands } from "@/utils/slash-commands"
 import { useExtensionState } from "@/context/ExtensionStateContext" // kilocode_change
 
 interface SlashCommandMenuProps {
@@ -11,6 +11,33 @@ interface SlashCommandMenuProps {
 	customModes?: any[]
 }
 
+const typeBadgeColors: Record<string, { bg: string; text: string }> = {
+	command: { bg: "rgba(58, 150, 221, 0.15)", text: "rgba(58, 150, 221, 0.9)" },
+	mode: { bg: "rgba(160, 100, 230, 0.15)", text: "rgba(160, 100, 230, 0.9)" },
+	workflow: { bg: "rgba(80, 180, 100, 0.15)", text: "rgba(80, 180, 100, 0.9)" },
+	skill: { bg: "rgba(220, 160, 50, 0.15)", text: "rgba(220, 160, 50, 0.9)" },
+}
+
+const defaultBadgeColors = { bg: "rgba(128, 128, 128, 0.15)", text: "var(--vscode-descriptionForeground)" }
+
+function getTypeBadgeColors(type?: SlashCommandType): { bg: string; text: string } {
+	return (type && typeBadgeColors[type]) || defaultBadgeColors
+}
+
+function getSourceLabel(source?: SlashCommandSource): string | null {
+	switch (source) {
+		case "project":
+			return "project"
+		case "global":
+			return "global"
+		case "organization":
+			return "org"
+		case "built-in":
+		default:
+			return null
+	}
+}
+
 const SlashCommandMenu: React.FC<SlashCommandMenuProps> = ({
 	onSelect,
 	selectedIndex,
@@ -19,7 +46,7 @@ const SlashCommandMenu: React.FC<SlashCommandMenuProps> = ({
 	query,
 	customModes,
 }) => {
-	const { localWorkflows, globalWorkflows } = useExtensionState() // kilocode_change
+	const { localWorkflows, globalWorkflows, skills } = useExtensionState() // kilocode_change
 	const menuRef = useRef<HTMLDivElement>(null)
 
 	const handleClick = useCallback(
@@ -47,7 +74,7 @@ const SlashCommandMenu: React.FC<SlashCommandMenuProps> = ({
 	}, [selectedIndex])
 
 	// Filter commands based on query
-	const filteredCommands = getMatchingSlashCommands(query, customModes, localWorkflows, globalWorkflows) // kilocode_change
+	const filteredCommands = getMatchingSlashCommands(query, customModes, localWorkflows, globalWorkflows, skills) // kilocode_change
 
 	return (
 		<div
@@ -69,8 +96,27 @@ const SlashCommandMenu: React.FC<SlashCommandMenuProps> = ({
 							} hover:bg-[var(--vscode-list-hoverBackground)]`}
 							onClick={() => handleClick(command)}
 							onMouseEnter={() => setSelectedIndex(index)}>
-							<div className="font-bold whitespace-nowrap overflow-hidden text-ellipsis">
-								/{command.name}
+							<div className="flex items-center justify-between gap-2">
+								<div className="font-bold whitespace-nowrap overflow-hidden text-ellipsis">
+									/{command.name}
+								</div>
+								<div className="flex items-center gap-1 shrink-0">
+									{command.type && (
+										<span
+											className="text-[0.7em] px-1.5 py-0.5 rounded-sm leading-none"
+											style={{
+												backgroundColor: getTypeBadgeColors(command.type).bg,
+												color: getTypeBadgeColors(command.type).text,
+											}}>
+											{command.type}
+										</span>
+									)}
+									{getSourceLabel(command.source) && (
+										<span className="text-[0.65em] text-[var(--vscode-descriptionForeground)] opacity-70 leading-none">
+											{getSourceLabel(command.source)}
+										</span>
+									)}
+								</div>
 							</div>
 							<div className="text-[0.85em] text-[var(--vscode-descriptionForeground)] whitespace-normal overflow-hidden text-ellipsis">
 								{command.description}

webview-ui/src/components/chat/hooks/useChatAutocompleteText.ts

@@ -53,7 +53,10 @@ export function useChatAutocompleteText({
 		// 2. The cursor is at the end of the text
 		// 3. We have saved autocomplete text that matches the current prefix
 		const shouldShowAutocompleteText =
-			isFocusedRef.current && isCursorAtEnd && savedAutocompleteTextRef.current && currentText === savedPrefixRef.current
+			isFocusedRef.current &&
+			isCursorAtEnd &&
+			savedAutocompleteTextRef.current &&
+			currentText === savedPrefixRef.current
 
 		if (shouldShowAutocompleteText) {
 			setAutocompleteText(savedAutocompleteTextRef.current)

webview-ui/src/components/kilocode/hooks/useProviderModels.ts

@@ -371,7 +371,7 @@ export const getOptionsForProvider = (provider: ProviderName, apiConfiguration?:
 				isChina:
 					apiConfiguration?.zaiApiLine === "china_coding" || apiConfiguration?.zaiApiLine === "china_api",
 			}
-			// kilocode_change end
+		// kilocode_change end
 		default:
 			return {}
 	}