feat(vscode): implement Workflows sub-tab in Agent Behaviour settings

packages/kilo-vscode/webview-ui/src/components/settings/AgentBehaviourTab.tsx

@@ -13,6 +13,7 @@ import { useLanguage } from "../../context/language"
 import type { AgentInfo, SkillInfo } from "../../types/messages"
 import ModeEditView from "./ModeEditView"
 import ModeCreateView from "./ModeCreateView"
+import WorkflowsTab from "./agent-behaviour/WorkflowsTab"
 
 type SubtabId = "agents" | "mcpServers" | "rules" | "workflows" | "skills"
 
@@ -807,7 +808,7 @@ const AgentBehaviourTab: Component = () => {
       case "rules":
         return renderRulesSubtab()
       case "workflows":
-        return <Placeholder text={language.t("settings.agentBehaviour.workflowsPlaceholder")} />
+        return <WorkflowsTab />
       case "skills":
         return renderSkillsSubtab()
       default:

packages/kilo-vscode/webview-ui/src/components/settings/agent-behaviour/WorkflowsTab.tsx

@@ -0,0 +1,151 @@
+import { Component, createMemo, createSignal, For, Show } from "solid-js"
+import { Card } from "@kilocode/kilo-ui/card"
+import { IconButton } from "@kilocode/kilo-ui/icon-button"
+
+import { useConfig } from "../../../context/config"
+import { useLanguage } from "../../../context/language"
+
+const WorkflowsTab: Component = () => {
+  const language = useLanguage()
+  const { config } = useConfig()
+
+  const cmds = createMemo(() => Object.entries(config().command ?? {}))
+  const [expanded, setExpanded] = createSignal<Record<string, boolean>>({})
+
+  const toggle = (name: string) => {
+    setExpanded((prev) => ({ ...prev, [name]: !prev[name] }))
+  }
+
+  return (
+    <div>
+      {/* Description */}
+      <div
+        style={{
+          "font-size": "12px",
+          color: "var(--text-weak-base, var(--vscode-descriptionForeground))",
+          "margin-bottom": "12px",
+          "line-height": "1.5",
+        }}
+      >
+        {language.t("settings.agentBehaviour.workflows.description")}
+      </div>
+
+      <Show
+        when={cmds().length > 0}
+        fallback={
+          <Card>
+            <div
+              style={{
+                "font-size": "12px",
+                color: "var(--text-weak-base, var(--vscode-descriptionForeground))",
+              }}
+            >
+              {language.t("settings.agentBehaviour.workflows.empty")}
+            </div>
+          </Card>
+        }
+      >
+        <Card>
+          <For each={cmds()}>
+            {([name, cmd], index) => {
+              const open = () => expanded()[name] ?? false
+              return (
+                <div
+                  style={{
+                    "border-bottom": index() < cmds().length - 1 ? "1px solid var(--border-weak-base)" : "none",
+                  }}
+                >
+                  {/* Header row */}
+                  <div
+                    style={{
+                      display: "flex",
+                      "align-items": "center",
+                      "justify-content": "space-between",
+                      padding: "8px 0",
+                      cursor: "pointer",
+                    }}
+                    onClick={() => toggle(name)}
+                  >
+                    <div style={{ display: "flex", "align-items": "center", gap: "6px", flex: 1, "min-width": 0 }}>
+                      <IconButton
+                        size="small"
+                        variant="ghost"
+                        icon={open() ? "chevron-down" : "chevron-right"}
+                        onClick={(e: MouseEvent) => {
+                          e.stopPropagation()
+                          toggle(name)
+                        }}
+                      />
+                      <span
+                        style={{
+                          "font-weight": "500",
+                          "font-family": "var(--vscode-editor-font-family, monospace)",
+                        }}
+                      >
+                        /{name}
+                      </span>
+                      <Show when={cmd.description}>
+                        <span
+                          style={{
+                            "font-size": "12px",
+                            color: "var(--text-weak-base, var(--vscode-descriptionForeground))",
+                            overflow: "hidden",
+                            "text-overflow": "ellipsis",
+                            "white-space": "nowrap",
+                          }}
+                        >
+                          {cmd.description}
+                        </span>
+                      </Show>
+                    </div>
+                  </div>
+
+                  {/* Expandable detail */}
+                  <Show when={open()}>
+                    <div
+                      style={{
+                        "padding-left": "28px",
+                        "padding-bottom": "8px",
+                        "font-size": "12px",
+                        color: "var(--text-weak-base, var(--vscode-descriptionForeground))",
+                      }}
+                    >
+                      <Show when={cmd.description}>
+                        <div style={{ "margin-bottom": "4px" }}>
+                          <span style={{ "font-weight": "500" }}>
+                            {language.t("settings.agentBehaviour.workflows.detail.description")}:{" "}
+                          </span>
+                          {cmd.description}
+                        </div>
+                      </Show>
+                      <Show when={cmd.template}>
+                        <div>
+                          <span style={{ "font-weight": "500" }}>
+                            {language.t("settings.agentBehaviour.workflows.detail.template")}:{" "}
+                          </span>
+                          <div
+                            style={{
+                              "margin-top": "4px",
+                              "font-family": "var(--vscode-editor-font-family, monospace)",
+                              "font-size": "11px",
+                              "white-space": "pre-wrap",
+                              "word-break": "break-word",
+                            }}
+                          >
+                            {cmd.template}
+                          </div>
+                        </div>
+                      </Show>
+                    </div>
+                  </Show>
+                </div>
+              )
+            }}
+          </For>
+        </Card>
+      </Show>
+    </div>
+  )
+}
+
+export default WorkflowsTab

packages/kilo-vscode/webview-ui/src/i18n/ar.ts

@@ -1089,6 +1089,11 @@ export const dict = {
   "settings.agentBehaviour.mcpDetail.disabled": "هذا الخادم معطّل.",
   "settings.agentBehaviour.mcpEmpty": "لم يتم تهيئة خوادم MCP. قم بتحرير ملف تهيئة opencode لإضافة خوادم MCP.",
   "settings.agentBehaviour.workflowsPlaceholder": "تُدار سير العمل عبر ملفات سير العمل في مساحة العمل.",
+  "settings.agentBehaviour.workflows.description":
+    "سير العمل هي أوامر شرطة مائلة مخصصة محددة في التهيئة الخاصة بك. اكتب /command-name في الدردشة لتشغيلها. يتم تهيئة الأوامر في opencode.json ضمن قسم 'command'.",
+  "settings.agentBehaviour.workflows.empty": "لم يتم تهيئة أوامر مخصصة. أضف أوامر إلى opencode.json لرؤيتها هنا.",
+  "settings.agentBehaviour.workflows.detail.description": "الوصف",
+  "settings.agentBehaviour.workflows.detail.template": "القالب",
   "settings.agentBehaviour.notImplemented": "لم يتم التنفيذ بعد.",
   "settings.autoApprove.description":
     "تحديد كيفية السماح بتشغيل الأدوات. معظم الأدوات معينة افتراضياً على السماح. doom_loop و external_directory معينة افتراضياً على السؤال.",

packages/kilo-vscode/webview-ui/src/i18n/br.ts

@@ -1106,6 +1106,12 @@ export const dict = {
     "Nenhum servidor MCP configurado. Edite o arquivo de configuração do opencode para adicionar servidores MCP.",
   "settings.agentBehaviour.workflowsPlaceholder":
     "Fluxos de trabalho são gerenciados por arquivos de fluxo de trabalho no espaço de trabalho.",
+  "settings.agentBehaviour.workflows.description":
+    "Fluxos de trabalho são comandos de barra personalizados definidos na sua configuração. Digite /command-name no chat para invocá-los. Os comandos são configurados no opencode.json na seção 'command'.",
+  "settings.agentBehaviour.workflows.empty":
+    "Nenhum comando personalizado configurado. Adicione comandos ao opencode.json para vê-los aqui.",
+  "settings.agentBehaviour.workflows.detail.description": "Descrição",
+  "settings.agentBehaviour.workflows.detail.template": "Modelo",
   "settings.agentBehaviour.notImplemented": "Ainda não implementado.",
   "settings.autoApprove.description":
     "Defina como as ferramentas têm permissão para serem executadas. A maioria das ferramentas tem o padrão Permitir. doom_loop e external_directory têm o padrão Perguntar.",

packages/kilo-vscode/webview-ui/src/i18n/bs.ts

@@ -1104,6 +1104,12 @@ export const dict = {
   "settings.agentBehaviour.mcpEmpty":
     "Nema konfiguriranih MCP servera. Uredite konfiguracijsku datoteku opencode za dodavanje MCP servera.",
   "settings.agentBehaviour.workflowsPlaceholder": "Tokovi rada se upravljaju putem datoteka tokova rada.",
+  "settings.agentBehaviour.workflows.description":
+    "Tokovi rada su prilagođene slash komande definirane u vašoj konfiguraciji. Upišite /command-name u chat da ih pokrenete. Komande se konfiguriraju u opencode.json pod sekcijom 'command'.",
+  "settings.agentBehaviour.workflows.empty":
+    "Nema konfiguriranih prilagođenih komandi. Dodajte komande u opencode.json da ih vidite ovdje.",
+  "settings.agentBehaviour.workflows.detail.description": "Opis",
+  "settings.agentBehaviour.workflows.detail.template": "Predložak",
   "settings.agentBehaviour.notImplemented": "Još nije implementirano.",
   "settings.autoApprove.description":
     "Definišite kako je dozvoljeno pokretanje alata. Većina alata je podrazumijevano na Dozvoli. doom_loop i external_directory su podrazumijevano na Pitaj.",

packages/kilo-vscode/webview-ui/src/i18n/da.ts

@@ -1099,6 +1099,12 @@ export const dict = {
   "settings.agentBehaviour.mcpEmpty":
     "Ingen MCP-servere konfigureret. Rediger opencode-konfigurationsfilen for at tilføje MCP-servere.",
   "settings.agentBehaviour.workflowsPlaceholder": "Workflows administreres via workflow-filer i dit arbejdsområde.",
+  "settings.agentBehaviour.workflows.description":
+    "Workflows er brugerdefinerede slash-kommandoer defineret i din konfiguration. Skriv /command-name i chatten for at aktivere dem. Kommandoer konfigureres i opencode.json under sektionen 'command'.",
+  "settings.agentBehaviour.workflows.empty":
+    "Ingen brugerdefinerede kommandoer konfigureret. Tilføj kommandoer til opencode.json for at se dem her.",
+  "settings.agentBehaviour.workflows.detail.description": "Beskrivelse",
+  "settings.agentBehaviour.workflows.detail.template": "Skabelon",
   "settings.agentBehaviour.notImplemented": "Endnu ikke implementeret.",
   "settings.autoApprove.description":
     "Definer, hvordan værktøjer må køre. De fleste værktøjer er som standard indstillet til Tillad. doom_loop og external_directory er som standard indstillet til Spørg.",

packages/kilo-vscode/webview-ui/src/i18n/de.ts

@@ -1119,6 +1119,12 @@ export const dict = {
     "Keine MCP-Server konfiguriert. Bearbeiten Sie die opencode-Konfigurationsdatei, um MCP-Server hinzuzufügen.",
   "settings.agentBehaviour.workflowsPlaceholder":
     "Workflows werden über Workflow-Dateien in Ihrem Arbeitsbereich verwaltet.",
+  "settings.agentBehaviour.workflows.description":
+    "Workflows sind benutzerdefinierte Slash-Befehle, die in Ihrer Konfiguration definiert sind. Geben Sie /command-name im Chat ein, um sie aufzurufen. Befehle werden in opencode.json im Abschnitt 'command' konfiguriert.",
+  "settings.agentBehaviour.workflows.empty":
+    "Keine benutzerdefinierten Befehle konfiguriert. Fügen Sie Befehle zu opencode.json hinzu, um sie hier zu sehen.",
+  "settings.agentBehaviour.workflows.detail.description": "Beschreibung",
+  "settings.agentBehaviour.workflows.detail.template": "Vorlage",
   "settings.agentBehaviour.notImplemented": "Noch nicht implementiert.",
   "settings.autoApprove.description":
     "Legen Sie fest, wie Tools ausgeführt werden dürfen. Die meisten Tools sind standardmäßig auf Zulassen eingestellt. doom_loop und external_directory sind standardmäßig auf Fragen eingestellt.",

packages/kilo-vscode/webview-ui/src/i18n/en.ts

@@ -1079,6 +1079,12 @@ export const dict = {
   "settings.agentBehaviour.mcpDetail.disabled": "This server is disabled.",
   "settings.agentBehaviour.mcpEmpty": "No MCP servers configured. Edit the opencode config file to add MCP servers.",
   "settings.agentBehaviour.workflowsPlaceholder": "Workflows are managed via workflow files in your workspace.",
+  "settings.agentBehaviour.workflows.description":
+    "Workflows are custom slash commands defined in your config. Type /command-name in the chat to invoke them. Commands are configured in opencode.json under the 'command' section.",
+  "settings.agentBehaviour.workflows.empty":
+    "No custom commands configured. Add commands to your opencode.json to see them here.",
+  "settings.agentBehaviour.workflows.detail.description": "Description",
+  "settings.agentBehaviour.workflows.detail.template": "Template",
   "settings.agentBehaviour.notImplemented": "Not yet implemented.",
   "settings.agentBehaviour.createMode": "Create New Mode",
   "settings.agentBehaviour.createMode.name": "Name",

packages/kilo-vscode/webview-ui/src/i18n/es.ts

@@ -1110,6 +1110,12 @@ export const dict = {
     "No hay servidores MCP configurados. Edite el archivo de configuración de opencode para añadir servidores MCP.",
   "settings.agentBehaviour.workflowsPlaceholder":
     "Los flujos de trabajo se gestionan mediante archivos de flujo de trabajo en su espacio de trabajo.",
+  "settings.agentBehaviour.workflows.description":
+    "Los flujos de trabajo son comandos de barra personalizados definidos en su configuración. Escriba /command-name en el chat para invocarlos. Los comandos se configuran en opencode.json en la sección 'command'.",
+  "settings.agentBehaviour.workflows.empty":
+    "No hay comandos personalizados configurados. Añada comandos a opencode.json para verlos aquí.",
+  "settings.agentBehaviour.workflows.detail.description": "Descripción",
+  "settings.agentBehaviour.workflows.detail.template": "Plantilla",
   "settings.agentBehaviour.notImplemented": "Aún no implementado.",
   "settings.autoApprove.description":
     "Defina cómo se permite la ejecución de las herramientas. La mayoría de las herramientas tienen como valor predeterminado Permitir. doom_loop y external_directory tienen como valor predeterminado Preguntar.",

packages/kilo-vscode/webview-ui/src/i18n/fr.ts

@@ -1122,6 +1122,12 @@ export const dict = {
     "Aucun serveur MCP configuré. Modifiez le fichier de configuration opencode pour ajouter des serveurs MCP.",
   "settings.agentBehaviour.workflowsPlaceholder":
     "Les workflows sont gérés via les fichiers de workflow dans votre espace de travail.",
+  "settings.agentBehaviour.workflows.description":
+    "Les workflows sont des commandes slash personnalisées définies dans votre configuration. Tapez /command-name dans le chat pour les invoquer. Les commandes sont configurées dans opencode.json dans la section 'command'.",
+  "settings.agentBehaviour.workflows.empty":
+    "Aucune commande personnalisée configurée. Ajoutez des commandes à opencode.json pour les voir ici.",
+  "settings.agentBehaviour.workflows.detail.description": "Description",
+  "settings.agentBehaviour.workflows.detail.template": "Modèle",
   "settings.agentBehaviour.notImplemented": "Pas encore implémenté.",
   "settings.autoApprove.description":
     "Définissez comment les outils sont autorisés à s'exécuter. La plupart des outils sont définis sur Autoriser par défaut. doom_loop et external_directory sont définis sur Demander par défaut.",

packages/kilo-vscode/webview-ui/src/i18n/ja.ts

@@ -1099,6 +1099,12 @@ export const dict = {
     "MCPサーバーが設定されていません。opencode設定ファイルを編集してMCPサーバーを追加してください。",
   "settings.agentBehaviour.workflowsPlaceholder":
     "ワークフローはワークスペース内のワークフローファイルを通じて管理されます。",
+  "settings.agentBehaviour.workflows.description":
+    "ワークフローは設定で定義されたカスタムスラッシュコマンドです。チャットで /command-name と入力して呼び出します。コマンドは opencode.json の 'command' セクションで設定します。",
+  "settings.agentBehaviour.workflows.empty":
+    "カスタムコマンドが設定されていません。opencode.json にコマンドを追加するとここに表示されます。",
+  "settings.agentBehaviour.workflows.detail.description": "説明",
+  "settings.agentBehaviour.workflows.detail.template": "テンプレート",
   "settings.agentBehaviour.notImplemented": "まだ実装されていません。",
   "settings.autoApprove.description":
     "ツールの実行許可を定義します。ほとんどのツールはデフォルトで「許可」されます。doom_loop と external_directory はデフォルトで「確認」になります。",

packages/kilo-vscode/webview-ui/src/i18n/ko.ts

@@ -1094,6 +1094,12 @@ export const dict = {
   "settings.agentBehaviour.mcpEmpty":
     "MCP 서버가 구성되지 않았습니다. opencode 구성 파일을 편집하여 MCP 서버를 추가하세요.",
   "settings.agentBehaviour.workflowsPlaceholder": "워크플로우는 워크스페이스의 워크플로우 파일을 통해 관리됩니다.",
+  "settings.agentBehaviour.workflows.description":
+    "워크플로우는 구성에서 정의된 사용자 정의 슬래시 명령입니다. 채팅에서 /command-name을 입력하여 실행합니다. 명령은 opencode.json의 'command' 섹션에서 구성됩니다.",
+  "settings.agentBehaviour.workflows.empty":
+    "구성된 사용자 정의 명령이 없습니다. opencode.json에 명령을 추가하면 여기에 표시됩니다.",
+  "settings.agentBehaviour.workflows.detail.description": "설명",
+  "settings.agentBehaviour.workflows.detail.template": "템플릿",
   "settings.agentBehaviour.notImplemented": "아직 구현되지 않았습니다.",
   "settings.autoApprove.description":
     "도구 실행 허용 방식을 정의합니다. 대부분의 도구 기본값은 '허용'입니다. doom_loop 및 external_directory의 기본값은 '확인'입니다.",

packages/kilo-vscode/webview-ui/src/i18n/nl.ts

@@ -1086,6 +1086,12 @@ export const dict = {
   "settings.agentBehaviour.mcpEmpty":
     "Geen MCP-servers geconfigureerd. Bewerk het opencode configuratiebestand om MCP-servers toe te voegen.",
   "settings.agentBehaviour.workflowsPlaceholder": "Workflows worden beheerd via workflowbestanden in je workspace.",
+  "settings.agentBehaviour.workflows.description":
+    "Workflows zijn aangepaste slash-commando's gedefinieerd in je configuratie. Typ /command-name in de chat om ze aan te roepen. Commando's worden geconfigureerd in opencode.json onder de sectie 'command'.",
+  "settings.agentBehaviour.workflows.empty":
+    "Geen aangepaste commando's geconfigureerd. Voeg commando's toe aan opencode.json om ze hier te zien.",
+  "settings.agentBehaviour.workflows.detail.description": "Beschrijving",
+  "settings.agentBehaviour.workflows.detail.template": "Sjabloon",
   "settings.agentBehaviour.notImplemented": "Nog niet geïmplementeerd.",
 
   "settings.autoApprove.description":