feat(vscode): add workflow management and slash command support

packages/kilo-vscode/src/services/cli-backend/http-client.ts

@@ -15,6 +15,7 @@ import type {
   CloudSessionsResponse,
   CloudSessionData,
   EditorContext,
+  CommandInfo,
   WorktreeFileDiff,
 } from "./types"
 import { extractHttpErrorMessage, parseSSEDataLine } from "./http-utils"
@@ -210,6 +211,40 @@ export class HttpClient {
     return this.request<Config>("PATCH", "/global/config", config)
   }
 
+  // ============================================
+  // Command/Workflow Methods
+  // ============================================
+
+  /**
+   * List all available commands (includes workflows, skills, MCP prompts).
+   */
+  async listCommands(directory: string): Promise<CommandInfo[]> {
+    return this.request<CommandInfo[]>("GET", "/command", undefined, { directory })
+  }
+
+  /**
+   * Execute a command (workflow) in a session.
+   */
+  async executeCommand(
+    sessionId: string,
+    command: string,
+    args: string,
+    directory: string,
+    options?: { agent?: string; model?: string },
+  ): Promise<void> {
+    await this.request<void>(
+      "POST",
+      `/session/${sessionId}/command`,
+      {
+        command,
+        arguments: args,
+        agent: options?.agent,
+        model: options?.model,
+      },
+      { directory, allowEmpty: true },
+    )
+  }
+
   // ============================================
   // Messaging Methods
   // ============================================

packages/kilo-vscode/src/services/cli-backend/types.ts

@@ -298,6 +298,15 @@ export interface CommandConfig {
   description?: string
 }
 
+/** Command/workflow info returned by GET /command */
+export interface CommandInfo {
+  name: string
+  description?: string
+  source?: "command" | "mcp" | "skill"
+  hints: string[]
+  workflowScope?: "project" | "global"
+}
+
 /** Skills configuration */
 export interface SkillsConfig {
   paths?: string[]

packages/kilo-vscode/webview-ui/agent-manager/AgentManagerApp.tsx

@@ -57,6 +57,7 @@ import { VSCodeProvider, useVSCode } from "../src/context/vscode"
 import { ServerProvider } from "../src/context/server"
 import { ProviderProvider } from "../src/context/provider"
 import { ConfigProvider } from "../src/context/config"
+import { CommandsProvider } from "../src/context/commands"
 import { SessionProvider, useSession } from "../src/context/session"
 import { WorktreeModeProvider } from "../src/context/worktree-mode"
 import { ChatView } from "../src/components/chat"
@@ -2806,13 +2807,15 @@ export const AgentManagerApp: Component = () => {
                   <CodeComponentProvider component={Code}>
                     <ProviderProvider>
                       <ConfigProvider>
-                        <SessionProvider>
-                          <WorktreeModeProvider>
-                            <DataBridge>
-                              <AgentManagerContent />
-                            </DataBridge>
-                          </WorktreeModeProvider>
-                        </SessionProvider>
+                        <CommandsProvider>
+                          <SessionProvider>
+                            <WorktreeModeProvider>
+                              <DataBridge>
+                                <AgentManagerContent />
+                              </DataBridge>
+                            </WorktreeModeProvider>
+                          </SessionProvider>
+                        </CommandsProvider>
                       </ConfigProvider>
                     </ProviderProvider>
                   </CodeComponentProvider>

packages/kilo-vscode/webview-ui/src/App.tsx

@@ -14,6 +14,7 @@ import { VSCodeProvider, useVSCode } from "./context/vscode"
 import { ServerProvider, useServer } from "./context/server"
 import { ProviderProvider, useProvider } from "./context/provider"
 import { ConfigProvider } from "./context/config"
+import { CommandsProvider } from "./context/commands"
 import { SessionProvider, useSession } from "./context/session"
 import { LanguageProvider } from "./context/language"
 import { ChatView } from "./components/chat"
@@ -260,13 +261,15 @@ const App: Component = () => {
                   <CodeComponentProvider component={Code}>
                     <ProviderProvider>
                       <ConfigProvider>
-                        <NotificationsProvider>
-                          <SessionProvider>
-                            <DataBridge>
-                              <AppContent />
-                            </DataBridge>
-                          </SessionProvider>
-                        </NotificationsProvider>
+                        <CommandsProvider>
+                          <NotificationsProvider>
+                            <SessionProvider>
+                              <DataBridge>
+                                <AppContent />
+                              </DataBridge>
+                            </SessionProvider>
+                          </NotificationsProvider>
+                        </CommandsProvider>
                       </ConfigProvider>
                     </ProviderProvider>
                   </CodeComponentProvider>

packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx

@@ -15,6 +15,8 @@ import { ModelSelector } from "../shared/ModelSelector"
 import { ModeSwitcher } from "../shared/ModeSwitcher"
 import { ThinkingSelector } from "../shared/ThinkingSelector"
 import { useFileMention } from "../../hooks/useFileMention"
+import { useSlashCommand } from "../../hooks/useSlashCommand"
+import { useCommands } from "../../context/commands"
 import { useImageAttachments } from "../../hooks/useImageAttachments"
 import { fileName, dirName, buildHighlightSegments } from "./prompt-input-utils"
 
@@ -30,6 +32,8 @@ export const PromptInput: Component = () => {
   const language = useLanguage()
   const vscode = useVSCode()
   const mention = useFileMention(vscode)
+  const { commands } = useCommands()
+  const slash = useSlashCommand(commands)
   const imageAttach = useImageAttachments()
 
   const sessionKey = () => session.currentSessionID() ?? "__new__"
@@ -40,6 +44,7 @@ export const PromptInput: Component = () => {
   let textareaRef: HTMLTextAreaElement | undefined
   let highlightRef: HTMLDivElement | undefined
   let dropdownRef: HTMLDivElement | undefined
+  let slashDropdownRef: HTMLDivElement | undefined
   let debounceTimer: ReturnType<typeof setTimeout> | undefined
   let requestCounter = 0
   // Save/restore input text when switching sessions.
@@ -154,6 +159,13 @@ export const PromptInput: Component = () => {
     if (active) active.scrollIntoView({ block: "nearest" })
   }
 
+  const scrollToActiveSlashItem = () => {
+    if (!slashDropdownRef) return
+    const items = slashDropdownRef.querySelectorAll(".slash-command-item")
+    const active = items[slash.index()] as HTMLElement | undefined
+    if (active) active.scrollIntoView({ block: "nearest" })
+  }
+
   const syncHighlightScroll = () => {
     if (highlightRef && textareaRef) {
       highlightRef.scrollTop = textareaRef.scrollTop
@@ -186,8 +198,9 @@ export const PromptInput: Component = () => {
     syncHighlightScroll()
 
     mention.onInput(val, target.selectionStart ?? val.length)
+    slash.onInput(val)
 
-    if (mention.showMention()) {
+    if (mention.showMention() || slash.show()) {
       setGhostText("")
       if (debounceTimer) clearTimeout(debounceTimer)
       return
@@ -204,6 +217,12 @@ export const PromptInput: Component = () => {
       return
     }
 
+    if (slash.onKeyDown(e, textareaRef, setText, adjustHeight)) {
+      setGhostText("")
+      queueMicrotask(scrollToActiveSlashItem)
+      return
+    }
+
     if ((e.key === "Tab" || e.key === "ArrowRight") && ghostText()) {
       e.preventDefault()
       acceptSuggestion()
@@ -233,6 +252,29 @@ export const PromptInput: Component = () => {
     const imgs = imageAttach.images()
     if ((!message && imgs.length === 0) || isBusy() || isDisabled()) return
 
+    if (message.startsWith("/")) {
+      const parts = message.slice(1).split(/\s+/)
+      const command = parts[0]
+      const args = parts.slice(1).join(" ")
+      // kilocode_change start
+      const known = commands().some((cmd) => cmd.name === command)
+      if (command && known) {
+        const sel = session.selected()
+        session.sendCommand(command, args, sel?.providerID, sel?.modelID)
+        requestCounter++
+        setText("")
+        setGhostText("")
+        imageAttach.clear()
+        if (debounceTimer) clearTimeout(debounceTimer)
+        slash.close()
+        mention.closeMention()
+        drafts.delete(sessionKey())
+        if (textareaRef) textareaRef.style.height = "auto"
+        return
+      }
+      // kilocode_change end
+    }
+
     const mentionFiles = mention.parseFileAttachments(message)
     const imgFiles = imgs.map((img) => ({ mime: img.mime, url: img.dataUrl }))
     const allFiles = [...mentionFiles, ...imgFiles]
@@ -248,6 +290,7 @@ export const PromptInput: Component = () => {
     imageAttach.clear()
     if (debounceTimer) clearTimeout(debounceTimer)
     mention.closeMention()
+    slash.close()
     drafts.delete(sessionKey())
 
     if (textareaRef) textareaRef.style.height = "auto"
@@ -287,6 +330,50 @@ export const PromptInput: Component = () => {
           </Show>
         </div>
       </Show>
+      <Show when={slash.show()}>
+        <div class="slash-command-dropdown" ref={slashDropdownRef}>
+          <Show
+            when={slash.filtered().length > 0}
+            fallback={<div class="slash-command-empty">{language.t("prompt.popover.emptyCommands")}</div>}
+          >
+            <For each={slash.filtered()}>
+              {(cmd, index) => (
+                <div
+                  class="slash-command-item"
+                  classList={{ "slash-command-item--active": index() === slash.index() }}
+                  onMouseDown={(e) => {
+                    e.preventDefault()
+                    const newText = `/${cmd.name} `
+                    setText(newText)
+                    if (textareaRef) {
+                      textareaRef.value = newText
+                      textareaRef.setSelectionRange(newText.length, newText.length)
+                      textareaRef.focus()
+                    }
+                    slash.close()
+                    adjustHeight()
+                  }}
+                  onMouseEnter={() => slash.setIndex(index())}
+                >
+                  <span class="slash-command-name">/{cmd.name}</span>
+                  <Show when={cmd.description}>
+                    <span class="slash-command-description">{cmd.description}</span>
+                  </Show>
+                  <Show when={cmd.source && cmd.source !== "command"}>
+                    <span class="slash-command-badge">
+                      {cmd.source === "skill"
+                        ? language.t("prompt.slash.badge.skill")
+                        : cmd.source === "mcp"
+                          ? language.t("prompt.slash.badge.mcp")
+                          : language.t("prompt.slash.badge.custom")}
+                    </span>
+                  </Show>
+                </div>
+              )}
+            </For>
+          </Show>
+        </div>
+      </Show>
       <Show when={imageAttach.images().length > 0}>
         <div class="image-attachments">
           <For each={imageAttach.images()}>