Merge pull request #7648 from Kilo-Org/mark/7601-workflows-subtab

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

packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/settings/agent-behaviour-agents-chromium-linux.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bb1fd55e0eb2c59616fe618a02fd91f8c7ab004d886a7ffa13e9f37b4f3ed8be
-size 25128
+oid sha256:41df17f60c5361a230839c07a9bd29d9dbf645a9750db6fa00e37c0bd06eff11
+size 25424

packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/settings/agent-behaviour-edit-custom-mode-chromium-linux.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:84a03047098fe237bcd3e278e66c07d9e75c222c306e4e7ac9cf065cb58fb5b5
-size 40689
+oid sha256:efb6975f1abb96f56667d7efa907061bf9a30457cc077c6d6353fe6e46581170
+size 41301

packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/settings/agent-behaviour-workflows-chromium-linux.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:73e777b0e52be0bb66ae3dfdcf793a7496de4cdc0e49b1d20da2877a6632257b
+size 23171

packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/settings/agent-behaviour-workflows-empty-chromium-linux.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cb348d4f380e432a92bfb43100f3b9949d4be97d2c9b62439f8862d5c1db1c2d
+size 21344

packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/settings/settings-panel-chromium-linux.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fa33db84c78a093d9e3c850a8f26674fbbbfe823460f363a8b331c93d0bd4696
-size 25952
+oid sha256:b2b55baed16075ce7e53185de00d0661e2ba4850a4f7672ea771048898c3905a
+size 25742

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":

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

@@ -1102,6 +1102,12 @@ export const dict = {
   "settings.agentBehaviour.mcpEmpty":
     "Ingen MCP-servere konfigurert. Rediger opencode-konfigurasjonsfilen for å legge til MCP-servere.",
   "settings.agentBehaviour.workflowsPlaceholder": "Arbeidsflyter administreres via arbeidsflytfiler i arbeidsområdet.",
+  "settings.agentBehaviour.workflows.description":
+    "Arbeidsflyter er egendefinerte skråstrekkommandoer definert i konfigurasjonen din. Skriv /command-name i chatten for å kjøre dem. Kommandoer konfigureres i opencode.json under seksjonen 'command'.",
+  "settings.agentBehaviour.workflows.empty":
+    "Ingen egendefinerte kommandoer konfigurert. Legg til kommandoer i opencode.json for å se dem her.",
+  "settings.agentBehaviour.workflows.detail.description": "Beskrivelse",
+  "settings.agentBehaviour.workflows.detail.template": "Mal",
   "settings.agentBehaviour.notImplemented": "Ikke implementert ennå.",
   "settings.autoApprove.description":
     "Definer hvordan verktøy kan kjøre. De fleste verktøy har Tillat som standard. doom_loop og external_directory har Spør som standard.",

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

@@ -1104,6 +1104,12 @@ export const dict = {
   "settings.agentBehaviour.mcpEmpty":
     "Brak skonfigurowanych serwerów MCP. Edytuj plik konfiguracyjny opencode, aby dodać serwery MCP.",
   "settings.agentBehaviour.workflowsPlaceholder": "Przepływy pracy zarządzane są za pomocą plików przepływów pracy.",
+  "settings.agentBehaviour.workflows.description":
+    "Przepływy pracy to niestandardowe komendy slash zdefiniowane w konfiguracji. Wpisz /command-name na czacie, aby je uruchomić. Komendy konfiguruje się w opencode.json w sekcji 'command'.",
+  "settings.agentBehaviour.workflows.empty":
+    "Brak skonfigurowanych niestandardowych komend. Dodaj komendy do opencode.json, aby je tu zobaczyć.",
+  "settings.agentBehaviour.workflows.detail.description": "Opis",
+  "settings.agentBehaviour.workflows.detail.template": "Szablon",
   "settings.agentBehaviour.notImplemented": "Jeszcze nie zaimplementowano.",
   "settings.autoApprove.description":
     "Zdefiniuj, jak narzędzia mogą być uruchamiane. Większość narzędzi domyślnie ma ustawienie Zezwalaj. doom_loop i external_directory domyślnie mają ustawienie Pytaj.",

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

@@ -1106,6 +1106,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/th.ts

@@ -1091,6 +1091,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/tr.ts

@@ -1085,6 +1085,12 @@ export const dict = {
   "settings.agentBehaviour.mcpEmpty":
     "Yapılandırılmış MCP sunucusu yok. MCP sunucuları eklemek için opencode yapılandırma dosyasını düzenleyin.",
   "settings.agentBehaviour.workflowsPlaceholder": "İş akışları çalışma alanınızdaki iş akışı dosyaları ile yönetilir.",
+  "settings.agentBehaviour.workflows.description":
+    "İş akışları, yapılandırmanızda tanımlanan özel eğik çizgi komutlarıdır. Çağırmak için sohbette /command-name yazın. Komutlar opencode.json dosyasındaki 'command' bölümünde yapılandırılır.",
+  "settings.agentBehaviour.workflows.empty":
+    "Yapılandırılmış özel komut yok. Burada görmek için opencode.json dosyasına komutlar ekleyin.",
+  "settings.agentBehaviour.workflows.detail.description": "Açıklama",
+  "settings.agentBehaviour.workflows.detail.template": "Şablon",
   "settings.agentBehaviour.notImplemented": "Henüz uygulanmadı.",
 
   "settings.autoApprove.description":

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

@@ -1078,6 +1078,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/zht.ts

@@ -1080,6 +1080,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/stories/settings.stories.tsx

@@ -10,7 +10,7 @@ import { SessionContext } from "../context/session"
 import Settings from "../components/settings/Settings"
 import ProvidersTab from "../components/settings/ProvidersTab"
 import AgentBehaviourTab from "../components/settings/AgentBehaviourTab"
-import type { AgentConfig } from "../types/messages"
+import type { AgentConfig, CommandConfig } from "../types/messages"
 
 const meta: Meta = {
   title: "Settings",
@@ -37,7 +37,7 @@ export const SettingsPanel: Story = {
   name: "Settings — full panel",
   render: () => (
     <StoryProviders>
-      <div style={{ width: "420px", height: "700px", display: "flex", "flex-direction": "column" }}>
+      <div style={{ height: "700px", display: "flex", "flex-direction": "column" }}>
         <Settings />
       </div>
     </StoryProviders>
@@ -48,7 +48,7 @@ export const ProvidersConfigure: Story = {
   name: "ProvidersTab — no providers configured",
   render: () => (
     <StoryProviders>
-      <div style={{ width: "420px", "max-height": "700px", overflow: "auto" }}>
+      <div style={{ "max-height": "700px", overflow: "auto" }}>
         <ProvidersTab />
       </div>
     </StoryProviders>
@@ -70,7 +70,7 @@ export const AgentBehaviourAgents: Story = {
     return (
       <StoryProviders sessionID="agents-story" status="idle">
         <SessionContext.Provider value={session as any}>
-          <div style={{ width: "420px", "max-height": "700px", overflow: "auto" }}>
+          <div style={{ "max-height": "700px", overflow: "auto" }}>
             <AgentBehaviourTab />
           </div>
         </SessionContext.Provider>
@@ -129,8 +129,88 @@ function EditModeWrapper() {
     })
   })
   return (
-    <div ref={ref} style={{ width: "420px", height: "700px", overflow: "auto" }}>
+    <div ref={ref} style={{ height: "700px", overflow: "auto" }}>
       <AgentBehaviourTab />
     </div>
   )
 }
+
+/** Clicks the given subtab button on mount. */
+function SubtabWrapper(props: { tab: string }) {
+  let ref: HTMLDivElement | undefined
+  onMount(() => {
+    requestAnimationFrame(() => {
+      if (!ref) return
+      const buttons = Array.from(ref.querySelectorAll<HTMLButtonElement>("button"))
+      for (const btn of buttons) {
+        if (btn.textContent?.toLowerCase().includes(props.tab.toLowerCase())) {
+          btn.click()
+          return
+        }
+      }
+    })
+  })
+  return (
+    <div ref={ref} style={{ height: "700px", overflow: "auto" }}>
+      <AgentBehaviourTab />
+    </div>
+  )
+}
+
+const MOCK_COMMANDS: Record<string, CommandConfig> = {
+  review: {
+    template: "Review the changes in the current branch and provide feedback on code quality.",
+    description: "Run a code review on the current branch",
+  },
+  deploy: {
+    template: "Build and deploy the application to the staging environment.",
+    description: "Deploy to staging",
+  },
+  test: {
+    template: "Run the full test suite and report any failures.",
+  },
+}
+
+export const AgentBehaviourWorkflows: Story = {
+  name: "AgentBehaviourTab — workflows with commands",
+  render: () => {
+    const session = {
+      ...mockSessionValue({ id: "workflows-story", status: "idle" }),
+      agents: () => MOCK_AGENTS,
+      removeMode: noop,
+      removeMcp: noop,
+      skills: () => [],
+      refreshSkills: noop,
+      removeSkill: noop,
+    }
+    return (
+      <StoryProviders sessionID="workflows-story" status="idle" config={{ command: MOCK_COMMANDS } as any}>
+        <SessionContext.Provider value={session as any}>
+          <SubtabWrapper tab="workflows" />
+        </SessionContext.Provider>
+      </StoryProviders>
+    )
+  },
+}
+
+export const AgentBehaviourWorkflowsEmpty: Story = {
+  name: "AgentBehaviourTab — workflows empty state",
+  render: () => {
+    const session = {
+      ...mockSessionValue({ id: "workflows-empty-story", status: "idle" }),
+      agents: () => MOCK_AGENTS,
+      removeMode: noop,
+      removeMcp: noop,
+      skills: () => [],
+      refreshSkills: noop,
+      removeSkill: noop,
+    }
+    return (
+      <StoryProviders sessionID="workflows-empty-story" status="idle">
+        <SessionContext.Provider value={session as any}>
+          <SubtabWrapper tab="workflows" />
+        </SessionContext.Provider>
+      </StoryProviders>
+    )
+  },
+}

packages/kilo-vscode/webview-ui/src/types/messages.ts

@@ -352,8 +352,10 @@ export interface McpConfig {
 }
 
 export interface CommandConfig {
-  command: string
+  template: string
   description?: string
+  agent?: string
+  model?: string
 }
 
 export interface SkillsConfig {