From f3494e3f4e73baf56237c27a944f77458db9cdc4 Mon Sep 17 00:00:00 2001
From: Mark IJbema <mark@kilocode.ai>
Date: Thu, 26 Mar 2026 11:30:33 +0100
Subject: [PATCH] refactor(vscode): wire WorkflowsTab and remove inline
 renderWorkflowsSubtab

Replace the inline renderWorkflowsSubtab function in AgentBehaviourTab
with the extracted WorkflowsTab component from agent-behaviour/.
---
 .../components/settings/AgentBehaviourTab.tsx | 89 +------------------
 1 file changed, 2 insertions(+), 87 deletions(-)

diff --git a/packages/kilo-vscode/webview-ui/src/components/settings/AgentBehaviourTab.tsx b/packages/kilo-vscode/webview-ui/src/components/settings/AgentBehaviourTab.tsx
index a00f333db13..83dd16956e7 100644
--- a/packages/kilo-vscode/webview-ui/src/components/settings/AgentBehaviourTab.tsx
+++ b/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"
 
@@ -798,92 +799,6 @@ const AgentBehaviourTab: Component = () => {
     </div>
   )
 
-  const renderWorkflowsSubtab = () => {
-    const cmds = createMemo(() => Object.entries(config().command ?? {}))
-
-    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) => (
-                <div
-                  style={{
-                    padding: "8px 0",
-                    "border-bottom": index() < cmds().length - 1 ? "1px solid var(--border-weak-base)" : "none",
-                  }}
-                >
-                  <div style={{ display: "flex", "align-items": "center", gap: "6px" }}>
-                    <span
-                      style={{
-                        "font-weight": "500",
-                        "font-family": "var(--vscode-editor-font-family, monospace)",
-                      }}
-                    >
-                      /{name}
-                    </span>
-                  </div>
-                  <Show when={cmd.description}>
-                    <div
-                      style={{
-                        "font-size": "12px",
-                        color: "var(--text-weak-base, var(--vscode-descriptionForeground))",
-                        "margin-top": "2px",
-                      }}
-                    >
-                      {cmd.description}
-                    </div>
-                  </Show>
-                  <Show when={cmd.template}>
-                    <div
-                      style={{
-                        "font-size": "11px",
-                        "font-family": "var(--vscode-editor-font-family, monospace)",
-                        color: "var(--text-weak-base, var(--vscode-descriptionForeground))",
-                        "margin-top": "4px",
-                        overflow: "hidden",
-                        "text-overflow": "ellipsis",
-                        "white-space": "nowrap",
-                      }}
-                    >
-                      {cmd.template}
-                    </div>
-                  </Show>
-                </div>
-              )}
-            </For>
-          </Card>
-        </Show>
-      </div>
-    )
-  }
-
   const renderSubtabContent = () => {
     switch (activeSubtab()) {
       case "agents":
@@ -893,7 +808,7 @@ const AgentBehaviourTab: Component = () => {
       case "rules":
         return renderRulesSubtab()
       case "workflows":
-        return renderWorkflowsSubtab()
+        return <WorkflowsTab />
       case "skills":
         return renderSkillsSubtab()
       default: