diff --git a/packages/dashboard/app/App.tsx b/packages/dashboard/app/App.tsx
index ec73184f45..34504f4f09 100644
--- a/packages/dashboard/app/App.tsx
+++ b/packages/dashboard/app/App.tsx
@@ -1227,9 +1227,9 @@ function AppInner() {
     pushNav({ type: "modal", close: modalManager.closeScripts });
   }, [modalManager, pushNav]);
 
-  const openWorkflowStepsWithNav = useCallback(() => {
-    modalManager.openWorkflowSteps();
-    pushNav({ type: "modal", close: modalManager.closeWorkflowSteps });
+  const openWorkflowEditorWithNav = useCallback(() => {
+    modalManager.openWorkflowEditor();
+    pushNav({ type: "modal", close: modalManager.closeWorkflowEditor });
   }, [modalManager, pushNav]);
 
   const openUsageWithNav = useCallback((anchorRect?: DOMRect | null) => {
@@ -1803,7 +1803,7 @@ function AppInner() {
         onOpenGitManager={openGitManagerWithNav}
         onOpenNodes={handleOpenNodesWithNav}
         showNodesButton={nodesEnabled}
-        onOpenWorkflowSteps={openWorkflowStepsWithNav}
+        onOpenWorkflowEditor={openWorkflowEditorWithNav}
         onOpenScripts={openScriptsWithNav}
         onRunScript={runScriptWithNav}
         onToggleTerminal={toggleTerminalWithNav}
@@ -2007,7 +2007,7 @@ function AppInner() {
         chatHasUnreadResponse={chatHasUnreadResponse}
         stashOrphanCount={stashOrphanCount}
         onOpenGitManager={openGitManagerWithNav}
-        onOpenWorkflowSteps={openWorkflowStepsWithNav}
+        onOpenWorkflowEditor={openWorkflowEditorWithNav}
         onOpenSchedules={openSchedulesWithNav}
         onOpenScripts={openScriptsWithNav}
         onToggleTerminal={toggleTerminalWithNav}
diff --git a/packages/dashboard/app/__tests__/mobile-feature-access-regression.test.tsx b/packages/dashboard/app/__tests__/mobile-feature-access-regression.test.tsx
index b6688642a8..6a56028d42 100644
--- a/packages/dashboard/app/__tests__/mobile-feature-access-regression.test.tsx
+++ b/packages/dashboard/app/__tests__/mobile-feature-access-regression.test.tsx
@@ -49,7 +49,7 @@ const createDefaultMobileNavProps = () => ({
   onOpenNodes: vi.fn(),
   mailboxUnreadCount: 0,
   onOpenGitManager: vi.fn(),
-  onOpenWorkflowSteps: vi.fn(),
+  onOpenWorkflowEditor: vi.fn(),
   onOpenSchedules: vi.fn(),
   onOpenScripts: vi.fn(),
   onToggleTerminal: vi.fn(),
diff --git a/packages/dashboard/app/__tests__/tablet-header-controls.test.tsx b/packages/dashboard/app/__tests__/tablet-header-controls.test.tsx
index bcb2e9fb32..eca5a3e11f 100644
--- a/packages/dashboard/app/__tests__/tablet-header-controls.test.tsx
+++ b/packages/dashboard/app/__tests__/tablet-header-controls.test.tsx
@@ -178,9 +178,9 @@ describe("tablet header controls", () => {
     expect(screen.queryByTitle("Git Manager")).toBeNull();
   });
 
-  it("does not render workflow steps button inline on tablet", () => {
-    renderTabletHeader({ onOpenWorkflowSteps: noop });
-    expect(screen.queryByTitle("Workflow Steps")).toBeNull();
+  it("does not render workflows button inline on tablet", () => {
+    renderTabletHeader({ onOpenWorkflowEditor: noop });
+    expect(screen.queryByTitle("Workflows")).toBeNull();
   });
 
   // ── Overflow menu on tablet ────────────────────────────────────
@@ -254,8 +254,8 @@ describe("tablet header controls", () => {
     expect(screen.getByTestId("overflow-git-btn")).toBeDefined();
   });
 
-  it("overflow menu contains workflow steps on tablet when provided", () => {
-    renderTabletHeader({ onOpenWorkflowSteps: noop });
+  it("overflow menu contains workflows on tablet when provided", () => {
+    renderTabletHeader({ onOpenWorkflowEditor: noop });
     fireEvent.click(screen.getByTitle("More header actions"));
     expect(screen.getByTestId("overflow-workflow-steps-btn")).toBeDefined();
   });
@@ -538,7 +538,7 @@ describe("tablet header controls", () => {
       const { container } = renderTabletHeader({
         onOpenUsage: noop,
         onOpenActivityLog: noop,
-        onOpenWorkflowSteps: noop,
+        onOpenWorkflowEditor: noop,
         onOpenFiles: noop,
         onOpenGitManager: noop,
       });
diff --git a/packages/dashboard/app/components/AppModals.tsx b/packages/dashboard/app/components/AppModals.tsx
index 9b543557c1..3b266568f4 100644
--- a/packages/dashboard/app/components/AppModals.tsx
+++ b/packages/dashboard/app/components/AppModals.tsx
@@ -20,7 +20,6 @@ import { NewTaskModal } from "./NewTaskModal";
 import { SystemStatsModal } from "./SystemStatsModal";
 import { ActivityLogModal } from "./ActivityLogModal";
 import { GitManagerModal } from "./GitManagerModal";
-import { WorkflowStepManager } from "./WorkflowStepManager";
 import { AgentListModal } from "./AgentListModal";
 import { ModelOnboardingModal } from "./ModelOnboardingModal";
 import { ToastContainer } from "./ToastContainer";
@@ -373,19 +372,6 @@ export function AppModals({
         />
       </ModalErrorBoundary>
 
-      <ModalErrorBoundary>
-        <WorkflowStepManager
-          isOpen={modalManager.workflowStepsOpen}
-          onClose={modalManager.closeWorkflowSteps}
-          addToast={addToast}
-          projectId={projectId}
-          onOpenGraphEditor={() => {
-            modalManager.closeWorkflowSteps();
-            modalManager.openWorkflowEditor();
-          }}
-        />
-      </ModalErrorBoundary>
-
       {modalManager.workflowEditorOpen && (
         <ModalErrorBoundary>
           <Suspense fallback={null}>
diff --git a/packages/dashboard/app/components/Header.tsx b/packages/dashboard/app/components/Header.tsx
index 17e3143235..034afa89a4 100644
--- a/packages/dashboard/app/components/Header.tsx
+++ b/packages/dashboard/app/components/Header.tsx
@@ -197,7 +197,7 @@ export interface HeaderProps {
   onOpenNodes?: () => void;
   /** When false, hides the Nodes management button. Defaults to true for backward compat. */
   showNodesButton?: boolean;
-  onOpenWorkflowSteps?: () => void;
+  onOpenWorkflowEditor?: () => void;
   onOpenScripts?: () => void;
   onRunScript?: (name: string, command: string) => void;
   onToggleTerminal?: () => void;
@@ -266,7 +266,7 @@ export function Header({
   onOpenGitManager,
   onOpenNodes,
   showNodesButton,
-  onOpenWorkflowSteps,
+  onOpenWorkflowEditor,
   onOpenScripts,
   onRunScript,
   onToggleTerminal,
@@ -1593,12 +1593,12 @@ export function Header({
           </button>
         )}
 
-        {/* Workflow Steps - desktop only (moved to overflow on mobile/tablet) */}
-        {!isCompact && onOpenWorkflowSteps && (
+        {/* Workflows - desktop only (moved to overflow on mobile/tablet) */}
+        {!isCompact && onOpenWorkflowEditor && (
           <button
             className="btn-icon"
-            onClick={onOpenWorkflowSteps}
-            title={t("header.workflowSteps", "Workflow Steps")}
+            onClick={onOpenWorkflowEditor}
+            title={t("header.workflows", "Workflows")}
             data-testid="workflow-steps-btn"
           >
             <Workflow size={16} />
@@ -1938,16 +1938,16 @@ export function Header({
                 <span>{t("header.viewUsage", "View Usage")}</span>
               </button>
             )}
-            {/* Workflow Steps - in overflow on mobile */}
-            {onOpenWorkflowSteps && (
+            {/* Workflows - in overflow on mobile */}
+            {onOpenWorkflowEditor && (
               <button
                 className="mobile-overflow-item"
-                onClick={() => handleOverflowAction(onOpenWorkflowSteps)}
+                onClick={() => handleOverflowAction(onOpenWorkflowEditor)}
                 role="menuitem"
                 data-testid="overflow-workflow-steps-btn"
               >
                 <Workflow size={16} />
-                <span>{t("header.workflowSteps", "Workflow Steps")}</span>
+                <span>{t("header.workflows", "Workflows")}</span>
               </button>
             )}
             {/* Settings - always last in overflow menu */}
diff --git a/packages/dashboard/app/components/MobileNavBar.tsx b/packages/dashboard/app/components/MobileNavBar.tsx
index ac421e502d..6ae76d6df0 100644
--- a/packages/dashboard/app/components/MobileNavBar.tsx
+++ b/packages/dashboard/app/components/MobileNavBar.tsx
@@ -60,7 +60,7 @@ export interface MobileNavBarProps {
   chatHasUnreadResponse?: boolean;
   stashOrphanCount?: number;
   onOpenGitManager?: () => void;
-  onOpenWorkflowSteps?: () => void;
+  onOpenWorkflowEditor?: () => void;
   onOpenSchedules?: () => void;
   onOpenScripts?: () => void;
   onToggleTerminal?: () => void;
@@ -127,7 +127,7 @@ export function MobileNavBar({
   chatHasUnreadResponse = false,
   stashOrphanCount = 0,
   onOpenGitManager,
-  onOpenWorkflowSteps,
+  onOpenWorkflowEditor,
   onOpenSchedules,
   onOpenScripts,
   onToggleTerminal,
@@ -590,10 +590,10 @@ export function MobileNavBar({
               type="button"
               className="mobile-more-item"
               data-testid="mobile-more-item-workflow"
-              onClick={() => handleMoreAction(onOpenWorkflowSteps)}
+              onClick={() => handleMoreAction(onOpenWorkflowEditor)}
             >
               <Workflow />
-              <span>{t("nav.workflowSteps", "Workflow Steps")}</span>
+              <span>{t("nav.workflows", "Workflows")}</span>
             </button>
 
             <button
diff --git a/packages/dashboard/app/components/WorkflowStepManager.css b/packages/dashboard/app/components/WorkflowStepManager.css
deleted file mode 100644
index f331f59eb1..0000000000
--- a/packages/dashboard/app/components/WorkflowStepManager.css
+++ /dev/null
@@ -1,566 +0,0 @@
-/* === Workflow Step Manager Modal === */
-.modal.workflow-step-manager-modal {
-  width: min(900px, 95vw);
-  max-width: 95vw;
-  min-width: 480px;
-  height: 80vh;
-  min-height: 480px;
-  max-height: calc(100dvh - var(--overlay-padding-top, 10vh) - 16px);
-  overflow: hidden;
-  resize: both;
-}
-
-.wfm-body {
-  padding: var(--space-md);
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-}
-
-/* Loading / empty states */
-.wfm-empty {
-  text-align: center;
-  padding: var(--space-xl);
-  color: var(--text-muted);
-  font-size: 14px;
-}
-
-.wfm-loading {
-  text-align: center;
-  padding: var(--space-xl);
-  color: var(--text-muted);
-}
-
-/* Tab navigation row */
-.wfm-tab-row {
-  display: flex;
-  gap: var(--space-sm);
-  margin-bottom: var(--space-md);
-  border-bottom: 1px solid var(--border);
-  padding-bottom: var(--space-sm);
-}
-
-.wfm-tab-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  padding: 6px 12px;
-}
-
-/* Step list */
-.wfm-step-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-}
-
-/* Step card */
-.wfm-step-card {
-  padding: 12px 16px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--bg-secondary);
-}
-
-.wfm-step-card-top {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
-.wfm-step-card-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.wfm-step-card-title-row {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  margin-bottom: 4px;
-}
-
-.wfm-step-card-name {
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.wfm-step-card-desc {
-  font-size: 12px;
-  color: var(--text-muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.wfm-step-card-actions {
-  display: flex;
-  gap: 4px;
-  margin-left: var(--space-sm);
-  flex-shrink: 0;
-}
-
-.wfm-delete-confirm {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-}
-
-/* Badges */
-.wfm-badge {
-  font-size: 11px;
-  padding: 2px 6px;
-  border-radius: var(--radius-sm);
-}
-
-.wfm-badge-enabled {
-  background: color-mix(in srgb, var(--ws-success) 15%, transparent);
-  color: var(--ws-success);
-}
-
-.wfm-badge-disabled {
-  background: var(--bg-tertiary);
-  color: var(--text-muted);
-}
-
-.wfm-badge-prompt {
-  background: color-mix(in srgb, var(--ws-pre-merge) 15%, transparent);
-  color: var(--ws-pre-merge);
-}
-
-.wfm-badge-script {
-  background: color-mix(in srgb, var(--ws-post-merge) 15%, transparent);
-  color: var(--ws-post-merge);
-}
-
-.wfm-badge-pre-merge {
-  background: color-mix(in srgb, var(--ws-pre-merge) 15%, transparent);
-  color: var(--ws-pre-merge);
-}
-
-.wfm-badge-post-merge {
-  background: color-mix(in srgb, var(--ws-info) 15%, transparent);
-  color: var(--ws-info);
-}
-
-.wfm-badge-default-on {
-  background: color-mix(in srgb, var(--ws-warning) 15%, transparent);
-  color: var(--ws-warning);
-}
-
-.wfm-badge-gate {
-  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
-  color: var(--color-warning);
-}
-
-.wfm-badge-advisory {
-  background: color-mix(in srgb, var(--color-info) 15%, transparent);
-  color: var(--color-info);
-}
-
-.wfm-badge-category {
-  font-size: 11px;
-  padding: 2px 6px;
-  border-radius: var(--radius-sm);
-}
-
-.wfm-badge-category-quality {
-  background: color-mix(in srgb, var(--ws-quality) 15%, transparent);
-  color: var(--ws-quality);
-}
-
-.wfm-badge-category-security {
-  background: color-mix(in srgb, var(--ws-security) 15%, transparent);
-  color: var(--ws-security);
-}
-
-.wfm-badge-category-plugin {
-  background: color-mix(in srgb, var(--color-info) 15%, transparent);
-  color: var(--color-info);
-}
-
-.wfm-delete-confirm-btn {
-  color: var(--ws-error);
-}
-
-/* Template cards */
-.wfm-template-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.wfm-template-card {
-  padding: var(--space-md);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--bg-secondary);
-}
-
-.wfm-template-inner {
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-}
-
-.wfm-template-icon {
-  padding: var(--space-sm);
-  border-radius: var(--radius-sm);
-  background: var(--bg-tertiary);
-  color: var(--text);
-  flex-shrink: 0;
-}
-
-.wfm-template-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.wfm-template-title-row {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  margin-bottom: 4px;
-}
-
-.wfm-template-name {
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.wfm-template-desc {
-  font-size: 12px;
-  color: var(--text-muted);
-  margin-bottom: var(--space-sm);
-}
-
-.wfm-template-add-btn {
-  font-size: 12px;
-  padding: 4px 12px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-/* Create chooser */
-.wfm-create-chooser {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
-  padding: var(--space-md);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--bg-secondary);
-}
-
-.wfm-create-chooser-hint {
-  margin: 0;
-  color: var(--text-muted);
-}
-
-.wfm-create-custom-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-xs);
-}
-
-/* Edit/create form */
-.wfm-form {
-  padding: var(--space-md);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--bg-secondary);
-}
-
-.wfm-form-title {
-  margin: 0 0 12px;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.wfm-form-fields {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
-}
-
-.wfm-field label,
-.wfm-field-label {
-  display: block;
-  font-size: 12px;
-  color: var(--text-muted);
-  margin-bottom: 4px;
-}
-
-.wfm-field input[type="text"],
-.wfm-field textarea,
-.wfm-field select {
-  width: 100%;
-  padding: 8px 12px;
-  border-radius: var(--radius-md);
-  border: 1px solid var(--border);
-  background: var(--bg);
-  color: var(--text);
-  font-size: 13px;
-  font-family: inherit;
-  outline: none;
-  transition:
-    border-color var(--transition-fast),
-    box-shadow var(--transition-fast);
-}
-
-.wfm-field input[type="text"]:focus,
-.wfm-field textarea:focus,
-.wfm-field select:focus {
-  border-color: var(--todo);
-  box-shadow: var(--focus-ring);
-}
-
-.wfm-field textarea {
-  resize: vertical;
-}
-
-.wfm-field textarea.wfm-prompt-textarea {
-  font-family: var(--font-mono, monospace);
-}
-
-/* Mode selector */
-.wfm-mode-selector {
-  display: flex;
-  gap: var(--space-sm);
-}
-
-.wfm-mode-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  padding: 6px 12px;
-  flex: 1;
-  justify-content: center;
-}
-
-/* Prompt header row (label + refine button) */
-.wfm-prompt-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 4px;
-}
-
-.wfm-refine-btn {
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.wfm-refine-btn span {
-  font-size: 11px;
-}
-
-/* No-scripts placeholder */
-.wfm-no-scripts {
-  padding: 8px 12px;
-  border-radius: var(--radius-md);
-  border: 1px solid var(--border);
-  background: var(--bg-tertiary);
-  color: var(--text-muted);
-  font-size: 12px;
-}
-
-/* Checkbox toggle */
-.wfm-checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  font-size: 13px;
-  cursor: pointer;
-}
-
-.wfm-checkbox-label input[type="checkbox"] {
-  accent-color: var(--todo);
-}
-
-/* Form actions */
-.wfm-form-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--space-sm);
-  margin-top: 4px;
-}
-
-/* Footer */
-.wfm-footer {
-  padding: 12px 16px;
-  border-top: 1px solid var(--border);
-}
-
-.wfm-footer-add-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-/* Spinner */
-.wfm-spinner {
-  margin: 0 auto var(--space-sm);
-}
-
-.wfm-model-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.wfm-model-header label {
-  margin-bottom: 0;
-}
-
-.wfm-model-clear-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 11px;
-  color: var(--text-tertiary);
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 2px 6px;
-  border-radius: 4px;
-}
-
-.wfm-model-clear-btn:hover {
-  color: var(--text-muted);
-  background: var(--bg-tertiary);
-}
-
-.wfm-model-hint {
-  display: block;
-  font-size: 11px;
-  color: var(--text-tertiary);
-  margin-bottom: 6px;
-}
-
-.wfm-field-hint {
-  font-size: 11px;
-  color: var(--text-tertiary);
-  margin-top: 4px;
-}
-
-@media (max-width: 768px) {
-  /* Full-screen sheet on mobile — drop the overlay's top padding so the
-     modal fills the viewport instead of being pushed below it. */
-  .modal-overlay:has(.workflow-step-manager-modal) {
-    padding-top: 0;
-    align-items: stretch;
-    justify-content: stretch;
-  }
-
-  .modal.workflow-step-manager-modal {
-    width: 100vw;
-    min-width: 0;
-    max-width: 100vw;
-    height: 100dvh;
-    min-height: 0;
-    max-height: 100dvh;
-    margin: 0;
-    border: none;
-    border-radius: 0;
-    resize: none;
-  }
-
-  .wfm-body {
-    flex: 1;
-    min-height: 0;
-    max-height: none;
-    overflow-y: auto;
-  }
-
-  .wfm-tab-row {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-  }
-
-  .wfm-tab-row::-webkit-scrollbar {
-    display: none;
-  }
-
-  .wfm-tab-btn {
-    flex-shrink: 0;
-    white-space: nowrap;
-  }
-
-  .wfm-step-card-top {
-    flex-wrap: wrap;
-    gap: var(--space-sm);
-  }
-
-  .wfm-step-card-title-row {
-    flex-wrap: wrap;
-  }
-
-  .wfm-step-card-actions {
-    flex-wrap: wrap;
-    margin-left: 0;
-    width: 100%;
-    justify-content: flex-end;
-  }
-
-  .wfm-step-card-desc {
-    overflow: visible;
-    text-overflow: clip;
-    white-space: normal;
-    word-break: break-word;
-  }
-
-  .wfm-template-inner {
-    flex-direction: column;
-  }
-
-  .wfm-mode-selector {
-    flex-wrap: wrap;
-  }
-
-  .wfm-form-actions {
-    flex-direction: column;
-  }
-
-  .wfm-form-actions .btn {
-    width: 100%;
-  }
-
-  .wfm-create-custom-btn {
-    width: 100%;
-  }
-
-  .wfm-footer {
-    padding: 12px 14px;
-  }
-}
-
-.wfm-header-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-}
-
-.wfm-graph-editor-link {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-xs);
-  padding: var(--space-xs) var(--space-sm);
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text);
-  cursor: pointer;
-}
-
-.wfm-graph-editor-link:hover {
-  background: var(--bg-tertiary);
-}
diff --git a/packages/dashboard/app/components/WorkflowStepManager.tsx b/packages/dashboard/app/components/WorkflowStepManager.tsx
deleted file mode 100644
index 4a81970388..0000000000
--- a/packages/dashboard/app/components/WorkflowStepManager.tsx
+++ /dev/null
@@ -1,984 +0,0 @@
-import "./WorkflowStepManager.css";
-import { useState, useEffect, useCallback, useRef } from "react";
-import { useTranslation } from "react-i18next";
-import { useOverlayDismiss } from "../hooks/useOverlayDismiss";
-import type { WorkflowStep, WorkflowStepInput, WorkflowStepMode, WorkflowStepPhase, WorkflowStepGateMode } from "@fusion/core";
-import { getErrorMessage } from "@fusion/core";
-import {
-  fetchWorkflowSteps,
-  createWorkflowStep,
-  updateWorkflowStep,
-  deleteWorkflowStep,
-  refineWorkflowStepPrompt,
-  fetchWorkflowStepTemplates,
-  fetchPluginWorkflowStepTemplates,
-  createWorkflowStepFromTemplate,
-  fetchScripts,
-  fetchModels,
-  type WorkflowStepTemplate,
-  type ModelInfo,
-} from "../api";
-import type { ToastType } from "../hooks/useToast";
-import { useModalResizePersist } from "../hooks/useModalResizePersist";
-import {
-  X,
-  Plus,
-  Pencil,
-  Trash2,
-  Sparkles,
-  Check,
-  Loader2,
-  FileText,
-  CheckCircle,
-  Shield,
-  Zap,
-  Eye,
-  Globe,
-  LayoutGrid,
-  BookOpen,
-  Terminal,
-  MessageSquare,
-  Puzzle,
-} from "lucide-react";
-import { CustomModelDropdown } from "./CustomModelDropdown";
-
-interface WorkflowStepManagerProps {
-  isOpen: boolean;
-  onClose: () => void;
-  addToast: (message: string, type?: ToastType) => void;
-  projectId?: string;
-  /** Optional: open the visual graph workflow editor. */
-  onOpenGraphEditor?: () => void;
-}
-
-interface StepFormData {
-  name: string;
-  description: string;
-  mode: WorkflowStepMode;
-  phase: WorkflowStepPhase;
-  prompt: string;
-  gateMode: WorkflowStepGateMode;
-  scriptName: string;
-  enabled: boolean;
-  defaultOn: boolean;
-  modelProvider: string;
-  modelId: string;
-}
-
-type TabId = "my-steps" | "templates";
-
-const EMPTY_FORM: StepFormData = {
-  name: "",
-  description: "",
-  mode: "prompt",
-  phase: "pre-merge" as WorkflowStepPhase,
-  prompt: "",
-  gateMode: "advisory",
-  scriptName: "",
-  enabled: true,
-  defaultOn: false,
-  modelProvider: "",
-  modelId: "",
-};
-
-/** Build the combined "provider/modelId" value for CustomModelDropdown */
-function getModelDropdownValue(provider: string, modelId: string): string {
-  return provider && modelId ? `${provider}/${modelId}` : "";
-}
-
-/** Parse "provider/modelId" dropdown value back into separate fields */
-function parseModelDropdownValue(value: string): { provider: string; modelId: string } {
-  if (!value) return { provider: "", modelId: "" };
-  const slashIndex = value.indexOf("/");
-  if (slashIndex === -1) return { provider: "", modelId: "" };
-  return { provider: value.slice(0, slashIndex), modelId: value.slice(slashIndex + 1) };
-}
-
-/** Map template icon names to Lucide components */
-function getTemplateIcon(iconName: string | undefined) {
-  switch (iconName) {
-    case "file-text":
-      return FileText;
-    case "check-circle":
-      return CheckCircle;
-    case "shield":
-      return Shield;
-    case "zap":
-      return Zap;
-    case "eye":
-      return Eye;
-    case "globe":
-      return Globe;
-    case "layout-grid":
-      return LayoutGrid;
-    case "puzzle":
-      return Puzzle;
-    default:
-      return CheckCircle;
-  }
-}
-
-/** Get category badge class name */
-function getCategoryClassName(category: string): string {
-  switch (category.toLowerCase()) {
-    case "quality":
-      return "wfm-badge-category wfm-badge-category-quality";
-    case "security":
-      return "wfm-badge-category wfm-badge-category-security";
-    default:
-      return "wfm-badge-category";
-  }
-}
-
-export function WorkflowStepManager({ isOpen, onClose, addToast, projectId, onOpenGraphEditor }: WorkflowStepManagerProps) {
-  const { t } = useTranslation("app");
-  const [steps, setSteps] = useState<WorkflowStep[]>([]);
-  const [templates, setTemplates] = useState<WorkflowStepTemplate[]>([]);
-  const [pluginTemplateOwners, setPluginTemplateOwners] = useState<Record<string, string>>({});
-  const [loading, setLoading] = useState(true);
-  const [templatesLoading, setTemplatesLoading] = useState(true);
-  const [activeTab, setActiveTab] = useState<TabId>("my-steps");
-  const [editingId, setEditingId] = useState<string | null>(null);
-  const [isCreating, setIsCreating] = useState(false);
-  const [showCreateChooser, setShowCreateChooser] = useState(false);
-  const [form, setForm] = useState<StepFormData>(EMPTY_FORM);
-  const [saving, setSaving] = useState(false);
-  const [refining, setRefining] = useState(false);
-  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
-  const [addingTemplateId, setAddingTemplateId] = useState<string | null>(null);
-  const [availableScripts, setAvailableScripts] = useState<Record<string, string>>({});
-  const [availableModels, setAvailableModels] = useState<ModelInfo[]>([]);
-
-  const modalRef = useRef<HTMLDivElement>(null);
-  useModalResizePersist(modalRef, isOpen, "fusion:workflow-steps-modal-size");
-
-  const loadSteps = useCallback(async () => {
-    try {
-      setLoading(true);
-      const data = await fetchWorkflowSteps(projectId);
-      setSteps(data);
-    } catch (err) {
-      addToast(getErrorMessage(err) || t("workflow.errorLoadSteps", "Failed to load workflow steps"), "error");
-    } finally {
-      setLoading(false);
-    }
-  }, [addToast, projectId]);
-
-  const loadScripts = useCallback(async () => {
-    try {
-      const scripts = await fetchScripts(projectId);
-      setAvailableScripts(scripts || {});
-    } catch {
-      // Silently ignore — scripts are optional
-    }
-  }, [projectId]);
-
-  const loadModels = useCallback(async () => {
-    try {
-      const response = await fetchModels();
-      setAvailableModels(response.models || []);
-    } catch {
-      // Silently ignore — models are optional, dropdown will be empty
-    }
-  }, []);
-
-  const loadTemplates = useCallback(async () => {
-    try {
-      setTemplatesLoading(true);
-      const [response, pluginResponse] = await Promise.all([
-        fetchWorkflowStepTemplates(),
-        fetchPluginWorkflowStepTemplates(),
-      ]);
-      setTemplates(response.templates);
-      const owners = Object.fromEntries(pluginResponse.templates.map(({ pluginId, template }) => [template.id, pluginId]));
-      setPluginTemplateOwners(owners);
-    } catch (err) {
-      addToast(getErrorMessage(err) || t("workflow.errorLoadTemplates", "Failed to load templates"), "error");
-    } finally {
-      setTemplatesLoading(false);
-    }
-  }, [addToast]);
-
-  useEffect(() => {
-    if (isOpen) {
-      loadSteps();
-      loadTemplates();
-      loadScripts();
-      loadModels();
-    }
-  }, [isOpen, loadSteps, loadTemplates, loadScripts, loadModels]);
-
-  const handleCreate = useCallback(() => {
-    setShowCreateChooser(true);
-    setIsCreating(false);
-    setEditingId(null);
-    setForm(EMPTY_FORM);
-  }, []);
-
-  const handleCreateCustom = useCallback(() => {
-    setShowCreateChooser(false);
-    setIsCreating(true);
-    setEditingId(null);
-    setForm(EMPTY_FORM);
-  }, []);
-
-  const handleEdit = useCallback((step: WorkflowStep) => {
-    setEditingId(step.id);
-    setIsCreating(false);
-    setForm({
-      name: step.name,
-      description: step.description,
-      mode: step.mode || "prompt",
-      phase: step.phase || "pre-merge",
-      prompt: step.prompt,
-      gateMode: step.gateMode || ((step.mode || "prompt") === "script" ? "gate" : "advisory"),
-      scriptName: step.scriptName || "",
-      enabled: step.enabled,
-      defaultOn: step.defaultOn || false,
-      modelProvider: step.modelProvider || "",
-      modelId: step.modelId || "",
-    });
-  }, []);
-
-  const handleCancel = useCallback(() => {
-    setEditingId(null);
-    setIsCreating(false);
-    setShowCreateChooser(false);
-    setForm(EMPTY_FORM);
-  }, []);
-
-  const handleSave = useCallback(async () => {
-    if (!form.name.trim() || !form.description.trim()) {
-      addToast(t("workflow.errorNameDescRequired", "Name and description are required"), "error");
-      return;
-    }
-
-    setSaving(true);
-    try {
-      // Build model override: only include when both fields are set (prompt mode)
-      const modelFields = form.mode === "prompt" && form.modelProvider && form.modelId
-        ? { modelProvider: form.modelProvider, modelId: form.modelId }
-        : form.mode === "prompt"
-          ? { modelProvider: undefined, modelId: undefined }
-          : {};
-
-      if (isCreating) {
-        const input: WorkflowStepInput = {
-          name: form.name.trim(),
-          description: form.description.trim(),
-          mode: form.mode,
-          phase: form.phase,
-          prompt: form.mode === "prompt" ? (form.prompt.trim() || undefined) : undefined,
-          gateMode: form.gateMode,
-          scriptName: form.mode === "script" ? form.scriptName.trim() : undefined,
-          enabled: form.enabled,
-          defaultOn: form.defaultOn || undefined,
-          ...modelFields,
-        };
-        await createWorkflowStep(input, projectId);
-        addToast(t("workflow.stepCreated", "Workflow step created"), "success");
-      } else if (editingId) {
-        await updateWorkflowStep(editingId, {
-          name: form.name.trim(),
-          description: form.description.trim(),
-          mode: form.mode,
-          phase: form.phase,
-          prompt: form.mode === "prompt" ? form.prompt : "",
-          gateMode: form.gateMode,
-          scriptName: form.mode === "script" ? form.scriptName.trim() : undefined,
-          enabled: form.enabled,
-          defaultOn: form.defaultOn,
-          ...modelFields,
-        }, projectId);
-        addToast(t("workflow.stepUpdated", "Workflow step updated"), "success");
-      }
-
-      setIsCreating(false);
-      setEditingId(null);
-      setForm(EMPTY_FORM);
-      await loadSteps();
-    } catch (err) {
-      addToast(getErrorMessage(err) || t("workflow.errorSaveStep", "Failed to save workflow step"), "error");
-    } finally {
-      setSaving(false);
-    }
-  }, [form, isCreating, editingId, addToast, loadSteps]);
-
-  const handleDelete = useCallback(async (id: string) => {
-    try {
-      await deleteWorkflowStep(id, projectId);
-      addToast(t("workflow.stepDeleted", "Workflow step deleted"), "success");
-      setDeleteConfirmId(null);
-      if (editingId === id) {
-        setEditingId(null);
-        setForm(EMPTY_FORM);
-      }
-      await loadSteps();
-    } catch (err) {
-      addToast(getErrorMessage(err) || t("workflow.errorDeleteStep", "Failed to delete workflow step"), "error");
-    }
-  }, [editingId, addToast, loadSteps]);
-
-  const handleRefine = useCallback(async () => {
-    if (!editingId && !isCreating) return;
-    // Refine only works for prompt mode
-    if (form.mode !== "prompt") return;
-
-    // For new steps being created, we need to save first then refine
-    if (isCreating) {
-      if (!form.name.trim() || !form.description.trim()) {
-        addToast(t("workflow.errorNameDescRequiredRefine", "Name and description are required before refining"), "error");
-        return;
-      }
-
-      setSaving(true);
-      try {
-        // Build model override for the intermediate create-then-refine flow
-        const modelFields = form.modelProvider && form.modelId
-          ? { modelProvider: form.modelProvider, modelId: form.modelId }
-          : {};
-        const input: WorkflowStepInput = {
-          name: form.name.trim(),
-          description: form.description.trim(),
-          mode: "prompt",
-          prompt: form.prompt.trim() || undefined,
-          gateMode: form.gateMode,
-          enabled: form.enabled,
-          defaultOn: form.defaultOn || undefined,
-          ...modelFields,
-        };
-        const created = await createWorkflowStep(input, projectId);
-        setIsCreating(false);
-        setEditingId(created.id);
-
-        // Now refine
-        setRefining(true);
-        const result = await refineWorkflowStepPrompt(created.id, projectId);
-        setForm((prev) => ({ ...prev, prompt: result.prompt }));
-        addToast(t("workflow.promptRefined", "Prompt refined with AI"), "success");
-        await loadSteps();
-      } catch (err) {
-        addToast(getErrorMessage(err) || t("workflow.errorRefinePrompt", "Failed to refine prompt"), "error");
-      } finally {
-        setSaving(false);
-        setRefining(false);
-      }
-      return;
-    }
-
-    if (!editingId) return;
-
-    setRefining(true);
-    try {
-      const result = await refineWorkflowStepPrompt(editingId, projectId);
-      setForm((prev) => ({ ...prev, prompt: result.prompt }));
-      addToast(t("workflow.promptRefined", "Prompt refined with AI"), "success");
-      await loadSteps();
-    } catch (err) {
-      addToast(getErrorMessage(err) || t("workflow.errorRefinePrompt", "Failed to refine prompt"), "error");
-    } finally {
-      setRefining(false);
-    }
-  }, [editingId, isCreating, form, addToast, loadSteps]);
-
-  const handleAddTemplate = useCallback(async (template: WorkflowStepTemplate) => {
-    setAddingTemplateId(template.id);
-    try {
-      await createWorkflowStepFromTemplate(template.id, projectId);
-      addToast(t("workflow.templateAdded", "Added {{name}} workflow step", { name: template.name }), "success");
-      await loadSteps();
-      // Switch to "My Workflow Steps" tab to show the newly added step
-      setActiveTab("my-steps");
-      setShowCreateChooser(false);
-    } catch (err) {
-      const msg = getErrorMessage(err);
-      if (msg?.includes("already exists")) {
-        addToast(t("workflow.errorTemplateAlreadyExists", "A workflow step named '{{name}}' already exists", { name: template.name }), "error");
-      } else {
-        addToast(msg || t("workflow.errorAddTemplate", "Failed to add workflow step from template"), "error");
-      }
-    } finally {
-      setAddingTemplateId(null);
-    }
-  }, [addToast, loadSteps]);
-
-  // useOverlayDismiss MUST be called before any early return — otherwise the
-  // hook count differs between isOpen=false (returns early after the existing
-  // useState/useEffect/useCallback hooks) and isOpen=true (also calls
-  // useOverlayDismiss), which trips React error #310 the moment the modal
-  // is opened. That bug currently breaks the workflow steps panel from
-  // loading at all.
-  const overlayDismissProps = useOverlayDismiss(onClose);
-
-  if (!isOpen) return null;
-
-  const isEditing = isCreating || editingId !== null;
-
-  return (
-    <div className="modal-overlay open" {...overlayDismissProps} data-testid="workflow-step-manager">
-      <div
-        ref={modalRef}
-        className="modal workflow-step-manager-modal"
-        role="dialog"
-        aria-modal="true"
-        aria-label={t("workflow.modalAriaLabel", "Workflow Steps")}
-      >
-        {/* Header */}
-        <div className="modal-header">
-          <h2>{t("workflow.modalTitle", "Workflow Steps")}</h2>
-          <div className="wfm-header-actions">
-            {onOpenGraphEditor && (
-              <button className="wfm-graph-editor-link" onClick={onOpenGraphEditor}>
-                <LayoutGrid size={14} /> {t("workflow.graphEditor", "Graph editor")}
-              </button>
-            )}
-            <button className="modal-close" onClick={onClose} aria-label={t("common.close", "Close")}>
-              &times;
-            </button>
-          </div>
-        </div>
-
-        <div className="wfm-body">
-          {loading ? (
-            <div className="wfm-loading">{t("common.loading", "Loading...")}</div>
-          ) : (
-            <>
-              {/* Tab Navigation */}
-              {!isEditing && (
-                <div className="wfm-tab-row">
-                  <button
-                    className={`btn ${activeTab === "my-steps" ? "btn-primary" : "btn-secondary"} wfm-tab-btn`}
-                    onClick={() => setActiveTab("my-steps")}
-                    data-testid="tab-my-steps"
-                  >
-                    <BookOpen size={14} />
-                    {t("workflow.tabMySteps", "My Workflow Steps ({{count}})", { count: steps.length })}
-                  </button>
-                  <button
-                    className={`btn ${activeTab === "templates" ? "btn-primary" : "btn-secondary"} wfm-tab-btn`}
-                    onClick={() => setActiveTab("templates")}
-                    data-testid="tab-templates"
-                  >
-                    <LayoutGrid size={14} />
-                    {t("workflow.tabTemplates", "Templates ({{count}})", { count: templates.length })}
-                  </button>
-                </div>
-              )}
-
-              {/* My Workflow Steps Tab */}
-              {activeTab === "my-steps" && !isEditing && !showCreateChooser && (
-                <>
-                  {steps.length === 0 && (
-                    <div className="wfm-empty" data-testid="empty-state">
-                      {t("workflow.emptySteps", "No workflow steps defined. Create one to get started, or add one from the Templates tab.")}
-                    </div>
-                  )}
-
-                  {steps.length > 0 && (
-                    <div className="wfm-step-list">
-                      {steps.map((step) => (
-                        <div
-                          key={step.id}
-                          className="wfm-step-card"
-                          data-testid={`workflow-step-${step.id}`}
-                        >
-                          <div className="wfm-step-card-top">
-                            <div className="wfm-step-card-info">
-                              <div className="wfm-step-card-title-row">
-                                <span className="wfm-step-card-name">{step.name}</span>
-                                <span className={`wfm-badge ${step.enabled ? "wfm-badge-enabled" : "wfm-badge-disabled"}`}>
-                                  {step.enabled ? t("workflow.badgeEnabled", "Enabled") : t("workflow.badgeDisabled", "Disabled")}
-                                </span>
-                                <span className={`wfm-badge ${(step.mode || "prompt") === "script" ? "wfm-badge-script" : "wfm-badge-prompt"}`}>
-                                  {(step.mode || "prompt") === "script" ? t("workflow.badgeScript", "Script") : t("workflow.badgeAiPrompt", "AI Prompt")}
-                                </span>
-                                <span className={`wfm-badge ${(step.phase || "pre-merge") === "post-merge" ? "wfm-badge-post-merge" : "wfm-badge-pre-merge"}`}>
-                                  {(step.phase || "pre-merge") === "post-merge" ? t("workflow.badgePostMerge", "Post-merge") : t("workflow.badgePreMerge", "Pre-merge")}
-                                </span>
-                                <span className={`wfm-badge ${(step.gateMode || ((step.mode || "prompt") === "script" ? "gate" : "advisory")) === "gate" ? "wfm-badge-gate" : "wfm-badge-advisory"}`}>
-                                  {(step.gateMode || ((step.mode || "prompt") === "script" ? "gate" : "advisory")) === "gate" ? t("workflow.badgeGate", "Gate") : t("workflow.badgeAdvisory", "Advisory")}
-                                </span>
-                                {step.defaultOn && (
-                                  <span className="wfm-badge wfm-badge-default-on">
-                                    {t("workflow.badgeDefaultOn", "Default on")}
-                                  </span>
-                                )}
-                              </div>
-                              <div className="wfm-step-card-desc">
-                                {step.description}
-                              </div>
-                            </div>
-                            <div className="wfm-step-card-actions">
-                              <button
-                                className="btn-icon"
-                                onClick={() => handleEdit(step)}
-                                title={t("common.edit", "Edit")}
-                                aria-label={t("workflow.editStepAriaLabel", "Edit {{name}}", { name: step.name })}
-                              >
-                                <Pencil size={14} />
-                              </button>
-                              {deleteConfirmId === step.id ? (
-                                <div className="wfm-delete-confirm">
-                                  <button
-                                    className="btn-icon wfm-delete-confirm-btn"
-                                    onClick={() => handleDelete(step.id)}
-                                    title={t("workflow.confirmDeleteTitle", "Confirm delete")}
-                                    aria-label={t("workflow.confirmDeleteAriaLabel", "Confirm delete {{name}}", { name: step.name })}
-                                  >
-                                    <Check size={14} />
-                                  </button>
-                                  <button
-                                    className="btn-icon"
-                                    onClick={() => setDeleteConfirmId(null)}
-                                    title={t("workflow.cancelDeleteTitle", "Cancel delete")}
-                                    aria-label={t("workflow.cancelDeleteAriaLabel", "Cancel delete")}
-                                  >
-                                    <X size={14} />
-                                  </button>
-                                </div>
-                              ) : (
-                                <button
-                                  className="btn-icon"
-                                  onClick={() => setDeleteConfirmId(step.id)}
-                                  title={t("common.delete", "Delete")}
-                                  aria-label={t("workflow.deleteStepAriaLabel", "Delete {{name}}", { name: step.name })}
-                                >
-                                  <Trash2 size={14} />
-                                </button>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </>
-              )}
-
-              {/* Templates Tab */}
-              {activeTab === "templates" && !isEditing && !showCreateChooser && (
-                <>
-                  {templatesLoading ? (
-                    <div className="wfm-loading">
-                      <Loader2 size={24} className="spin wfm-spinner" />
-                      {t("workflow.loadingTemplates", "Loading templates...")}
-                    </div>
-                  ) : templates.length === 0 ? (
-                    <div className="wfm-empty" data-testid="no-templates-state">
-                      {t("workflow.noTemplates", "No templates available.")}
-                    </div>
-                  ) : (
-                    <div className="wfm-template-list">
-                      {templates.map((template) => {
-                        const IconComponent = getTemplateIcon(template.icon);
-                        const categoryClassName = getCategoryClassName(template.category);
-                        const isAdding = addingTemplateId === template.id;
-
-                        return (
-                          <div
-                            key={template.id}
-                            className="wfm-template-card"
-                            data-testid={`template-${template.id}`}
-                          >
-                            <div className="wfm-template-inner">
-                              {/* Icon */}
-                              <div className="wfm-template-icon">
-                                <IconComponent size={20} />
-                              </div>
-
-                              {/* Content */}
-                              <div className="wfm-template-content">
-                                <div className="wfm-template-title-row">
-                                  <span className="wfm-template-name">
-                                    {template.name}
-                                  </span>
-                                  <span className={categoryClassName}>
-                                    {template.category}
-                                  </span>
-                                  {pluginTemplateOwners[template.id] && (
-                                    <span className="wfm-badge-category wfm-badge-category-plugin">
-                                      {pluginTemplateOwners[template.id]}
-                                    </span>
-                                  )}
-                                </div>
-                                <div className="wfm-template-desc">
-                                  {template.description}
-                                </div>
-                                <button
-                                  className="btn btn-primary wfm-template-add-btn"
-                                  onClick={() => handleAddTemplate(template)}
-                                  disabled={isAdding}
-                                  data-testid={`add-template-${template.id}`}
-                                >
-                                  {isAdding ? (
-                                    <>
-                                      <Loader2 size={12} className="spin" />
-                                      {t("workflow.adding", "Adding...")}
-                                    </>
-                                  ) : (
-                                    <>
-                                      <Plus size={12} />
-                                      {t("workflow.add", "Add")}
-                                    </>
-                                  )}
-                                </button>
-                              </div>
-                            </div>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  )}
-                </>
-              )}
-
-              {/* Create chooser */}
-              {showCreateChooser && !isEditing && (
-                <div className="wfm-create-chooser" data-testid="workflow-step-create-chooser">
-                  <h3 className="wfm-form-title">{t("workflow.createChooserTitle", "How would you like to create this workflow step?")}</h3>
-                  <p className="wfm-create-chooser-hint">
-                    {t("workflow.createChooserHint", "Start from a built-in template or create a fully custom workflow step.")}
-                  </p>
-
-                  <button
-                    className="btn wfm-create-custom-btn"
-                    onClick={handleCreateCustom}
-                    data-testid="create-custom-step"
-                  >
-                    <Plus size={14} />
-                    {t("workflow.createCustomStep", "Custom workflow step")}
-                  </button>
-
-                  {templatesLoading ? (
-                    <div className="wfm-loading" data-testid="create-chooser-template-loading">
-                      <Loader2 size={24} className="spin wfm-spinner" />
-                      {t("workflow.loadingBuiltInTemplates", "Loading built-in templates...")}
-                    </div>
-                  ) : templates.length === 0 ? (
-                    <div className="wfm-empty" data-testid="create-chooser-no-templates">
-                      {t("workflow.noBuiltInTemplates", "No built-in templates are available right now. You can still create a custom step.")}
-                    </div>
-                  ) : (
-                    <div className="wfm-template-list" data-testid="create-chooser-templates">
-                      {templates.map((template) => {
-                        const IconComponent = getTemplateIcon(template.icon);
-                        const categoryClassName = getCategoryClassName(template.category);
-                        const isAdding = addingTemplateId === template.id;
-
-                        return (
-                          <div
-                            key={template.id}
-                            className="wfm-template-card"
-                            data-testid={`chooser-template-${template.id}`}
-                          >
-                            <div className="wfm-template-inner">
-                              <div className="wfm-template-icon">
-                                <IconComponent size={20} />
-                              </div>
-
-                              <div className="wfm-template-content">
-                                <div className="wfm-template-title-row">
-                                  <span className="wfm-template-name">{template.name}</span>
-                                  <span className={categoryClassName}>{template.category}</span>
-                                  {pluginTemplateOwners[template.id] && (
-                                    <span className="wfm-badge-category wfm-badge-category-plugin">
-                                      {pluginTemplateOwners[template.id]}
-                                    </span>
-                                  )}
-                                </div>
-                                <div className="wfm-template-desc">{template.description}</div>
-                                <button
-                                  className="btn btn-primary wfm-template-add-btn"
-                                  onClick={() => handleAddTemplate(template)}
-                                  disabled={isAdding}
-                                  data-testid={`chooser-add-template-${template.id}`}
-                                >
-                                  {isAdding ? (
-                                    <>
-                                      <Loader2 size={12} className="spin" />
-                                      {t("workflow.adding", "Adding...")}
-                                    </>
-                                  ) : (
-                                    <>
-                                      <Plus size={12} />
-                                      {t("workflow.addTemplate", "Add template")}
-                                    </>
-                                  )}
-                                </button>
-                              </div>
-                            </div>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  )}
-                </div>
-              )}
-
-              {/* Edit / Create form */}
-              {isEditing && (
-                <div className="wfm-form" data-testid="workflow-step-form">
-                  <h3 className="wfm-form-title">
-                    {isCreating ? t("workflow.newStepTitle", "New Workflow Step") : t("workflow.editStepTitle", "Edit Workflow Step")}
-                  </h3>
-
-                  <div className="wfm-form-fields">
-                    {/* Name */}
-                    <div className="wfm-field">
-                      <label>{t("workflow.formNameLabel", "Name")}</label>
-                      <input
-                        type="text"
-                        value={form.name}
-                        onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
-                        placeholder={t("workflow.formNamePlaceholder", "e.g. Documentation Review")}
-                        data-testid="workflow-step-name"
-                      />
-                    </div>
-
-                    {/* Description */}
-                    <div className="wfm-field">
-                      <label>{t("workflow.formDescriptionLabel", "Description")}</label>
-                      <textarea
-                        value={form.description}
-                        onChange={(e) => setForm((prev) => ({ ...prev, description: e.target.value }))}
-                        placeholder={t("workflow.formDescriptionPlaceholder", "Brief description of what this step does")}
-                        rows={2}
-                        data-testid="workflow-step-description"
-                      />
-                    </div>
-
-                    {/* Mode Selector */}
-                    <div className="wfm-field">
-                      <label>{t("workflow.executionModeLabel", "Execution Mode")}</label>
-                      <div className="wfm-mode-selector" data-testid="workflow-step-mode-selector">
-                        <button
-                          className={`btn ${form.mode === "prompt" ? "btn-primary" : "btn-secondary"} wfm-mode-btn`}
-                          onClick={() => setForm((prev) => ({ ...prev, mode: "prompt", gateMode: prev.gateMode || "advisory", scriptName: "" }))}
-                          data-testid="mode-prompt"
-                        >
-                          <MessageSquare size={14} />
-                          {t("workflow.modeAiPrompt", "AI Prompt")}
-                        </button>
-                        <button
-                          className={`btn ${form.mode === "script" ? "btn-primary" : "btn-secondary"} wfm-mode-btn`}
-                          onClick={() => setForm((prev) => ({ ...prev, mode: "script", gateMode: "gate", prompt: "", modelProvider: "", modelId: "" }))}
-                          data-testid="mode-script"
-                        >
-                          <Terminal size={14} />
-                          {t("workflow.modeScript", "Run Script")}
-                        </button>
-                      </div>
-                    </div>
-
-                    {/* Phase Selector */}
-                    <div className="wfm-field">
-                      <label>{t("workflow.executionPhaseLabel", "Execution Phase")}</label>
-                      <div className="wfm-mode-selector" data-testid="workflow-step-phase-selector">
-                        <button
-                          className={`btn ${form.phase === "pre-merge" ? "btn-primary" : "btn-secondary"} wfm-mode-btn`}
-                          onClick={() => setForm((prev) => ({ ...prev, phase: "pre-merge" }))}
-                          data-testid="phase-pre-merge"
-                        >
-                          {t("workflow.phasePreMerge", "Pre-merge")}
-                        </button>
-                        <button
-                          className={`btn ${form.phase === "post-merge" ? "btn-primary" : "btn-secondary"} wfm-mode-btn`}
-                          onClick={() => setForm((prev) => ({ ...prev, phase: "post-merge" }))}
-                          data-testid="phase-post-merge"
-                        >
-                          {t("workflow.phasePostMerge", "Post-merge")}
-                        </button>
-                      </div>
-                      <div className="wfm-field-hint">
-                        {form.phase === "pre-merge"
-                          ? t("workflow.phasePreMergeHint", "Runs before merge — can block merge on failure")
-                          : t("workflow.phasePostMergeHint", "Runs after merge success — failures are logged but do not block")}
-                      </div>
-                    </div>
-
-                    {/* Gate mode */}
-                    <div className="wfm-field">
-                      <label>{t("workflow.failureBehaviorLabel", "Failure Behavior")}</label>
-                      <div className="wfm-mode-selector" data-testid="workflow-step-gate-mode-selector">
-                        <button
-                          className={`btn ${form.gateMode === "advisory" ? "btn-primary" : "btn-secondary"} wfm-mode-btn`}
-                          onClick={() => setForm((prev) => ({ ...prev, gateMode: "advisory" }))}
-                          data-testid="gate-mode-advisory"
-                        >
-                          {t("workflow.gateModeAdvisory", "Advisory")}
-                        </button>
-                        <button
-                          className={`btn ${form.gateMode === "gate" ? "btn-primary" : "btn-secondary"} wfm-mode-btn`}
-                          onClick={() => setForm((prev) => ({ ...prev, gateMode: "gate" }))}
-                          data-testid="gate-mode-gate"
-                        >
-                          {t("workflow.gateModeGate", "Gate")}
-                        </button>
-                      </div>
-                      <div className="wfm-field-hint">
-                        {form.gateMode === "gate"
-                          ? t("workflow.gateModeGateHint", "Failures block merge and request remediation.")
-                          : t("workflow.gateModeAdvisoryHint", "Failures are recorded as advisory and do not block merge.")}
-                      </div>
-                    </div>
-
-                    {/* Prompt (AI mode only) */}
-                    {form.mode === "prompt" && (
-                      <div className="wfm-field">
-                        <div className="wfm-prompt-header">
-                          <label>{t("workflow.agentPromptLabel", "Agent Prompt")}</label>
-                          <button
-                            className="btn-icon wfm-refine-btn"
-                            onClick={handleRefine}
-                            disabled={!form.description.trim() || refining}
-                            title={t("workflow.refineWithAiTitle", "Refine with AI")}
-                            aria-label={t("workflow.refineWithAiAriaLabel", "Refine prompt with AI")}
-                            data-testid="refine-btn"
-                          >
-                            {refining ? (
-                              <Loader2 size={12} className="spin" />
-                            ) : (
-                              <Sparkles size={12} />
-                            )}
-                            <span>{t("workflow.refineWithAi", "Refine with AI")}</span>
-                          </button>
-                        </div>
-                        <textarea
-                          value={form.prompt}
-                          onChange={(e) => setForm((prev) => ({ ...prev, prompt: e.target.value }))}
-                          placeholder={t("workflow.agentPromptPlaceholder", "Leave empty to use AI refinement")}
-                          rows={6}
-                          className="wfm-prompt-textarea"
-                          data-testid="workflow-step-prompt"
-                        />
-                      </div>
-                    )}
-
-                    {/* Model override (prompt mode only) */}
-                    {form.mode === "prompt" && (
-                      <div className="wfm-field" data-testid="workflow-step-model-field">
-                        <div className="wfm-model-header">
-                          <label>{t("workflow.modelOverrideLabel", "Model Override")}</label>
-                          {form.modelProvider && form.modelId && (
-                            <button
-                              type="button"
-                              className="btn-icon wfm-model-clear-btn"
-                              onClick={() => setForm((prev) => ({ ...prev, modelProvider: "", modelId: "" }))}
-                              title={t("workflow.clearModelOverrideTitle", "Clear model override (use global default)")}
-                              data-testid="clear-model-override"
-                            >
-                              <X size={12} />
-                              <span>{t("workflow.useDefault", "Use default")}</span>
-                            </button>
-                          )}
-                        </div>
-                        <span className="wfm-model-hint">
-                          {form.modelProvider && form.modelId
-                            ? t("workflow.modelHintCustom", "Using {{provider}}/{{modelId}}", { provider: form.modelProvider, modelId: form.modelId })
-                            : t("workflow.modelHintDefault", "Using global default model")}
-                        </span>
-                        <div data-testid="workflow-step-model-select">
-                          <CustomModelDropdown
-                            models={availableModels}
-                            value={getModelDropdownValue(form.modelProvider, form.modelId)}
-                            onChange={(value: string) => {
-                              const parsed = parseModelDropdownValue(value);
-                              setForm((prev) => ({ ...prev, modelProvider: parsed.provider, modelId: parsed.modelId }));
-                            }}
-                            placeholder={t("workflow.modelOverridePlaceholder", "Select a model override…")}
-                            label={t("workflow.modelOverrideDropdownLabel", "Model override for this workflow step")}
-                          />
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Script selector (script mode only) */}
-                    {form.mode === "script" && (
-                      <div className="wfm-field">
-                        <label>{t("workflow.scriptLabel", "Script")}</label>
-                        {Object.keys(availableScripts).length === 0 ? (
-                          <div className="wfm-no-scripts" data-testid="no-scripts-message">
-                            {t("workflow.noScripts", "No scripts configured. Add scripts in Settings → Scripts first.")}
-                          </div>
-                        ) : (
-                          <select
-                            value={form.scriptName}
-                            onChange={(e) => setForm((prev) => ({ ...prev, scriptName: e.target.value }))}
-                            data-testid="workflow-step-script-select"
-                          >
-                            <option value="">{t("workflow.selectScript", "Select a script…")}</option>
-                            {Object.entries(availableScripts).map(([name, command]) => (
-                              <option key={name} value={name}>
-                                {name} ({command})
-                              </option>
-                            ))}
-                          </select>
-                        )}
-                      </div>
-                    )}
-
-                    {/* Enabled toggle */}
-                    <label className="wfm-checkbox-label">
-                      <input
-                        type="checkbox"
-                        checked={form.enabled}
-                        onChange={(e) => setForm((prev) => ({ ...prev, enabled: e.target.checked }))}
-                        data-testid="workflow-step-enabled"
-                      />
-                      {t("workflow.enabledCheckbox", "Enabled (available for selection on new tasks)")}
-                    </label>
-
-                    {/* Default on toggle */}
-                    <label className="wfm-checkbox-label">
-                      <input
-                        type="checkbox"
-                        checked={form.defaultOn}
-                        onChange={(e) => setForm((prev) => ({ ...prev, defaultOn: e.target.checked }))}
-                        data-testid="workflow-step-default-on"
-                      />
-                      {t("workflow.defaultOnCheckbox", "Default on for new tasks")}
-                    </label>
-
-                    {/* Form actions */}
-                    <div className="wfm-form-actions">
-                      <button className="btn btn-secondary" onClick={handleCancel} disabled={saving}>
-                        {t("common.cancel", "Cancel")}
-                      </button>
-                      <button
-                        className="btn btn-primary"
-                        onClick={handleSave}
-                        disabled={
-                          saving ||
-                          !form.name.trim() ||
-                          !form.description.trim() ||
-                          (form.mode === "script" && !form.scriptName.trim())
-                        }
-                        data-testid="save-workflow-step"
-                      >
-                        {saving ? t("common.saving", "Saving...") : isCreating ? t("common.create", "Create") : t("common.save", "Save")}
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              )}
-            </>
-          )}
-        </div>
-
-        {/* Footer */}
-        {!isEditing && !showCreateChooser && (
-          <div className="wfm-footer">
-            <button
-              className="btn btn-primary wfm-footer-add-btn"
-              onClick={handleCreate}
-              data-testid="add-workflow-step"
-            >
-              <Plus size={14} />
-              {t("workflow.addWorkflowStep", "Add Workflow Step")}
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/packages/dashboard/app/components/__tests__/AppModals.test.tsx b/packages/dashboard/app/components/__tests__/AppModals.test.tsx
index aed12902a7..bb4c71c44c 100644
--- a/packages/dashboard/app/components/__tests__/AppModals.test.tsx
+++ b/packages/dashboard/app/components/__tests__/AppModals.test.tsx
@@ -100,10 +100,6 @@ vi.mock("../GitManagerModal", () => ({
   GitManagerModal: () => null,
 }));
 
-vi.mock("../WorkflowStepManager", () => ({
-  WorkflowStepManager: () => null,
-}));
-
 vi.mock("../AgentListModal", () => ({
   AgentListModal: () => null,
 }));
@@ -190,7 +186,6 @@ describe("AppModals", () => {
     newTaskModalOpen: false,
     activityLogOpen: false,
     gitManagerOpen: false,
-    workflowStepsOpen: false,
     agentsOpen: false,
     setupWizardOpen: false,
     modelOnboardingOpen: false,
@@ -234,8 +229,6 @@ describe("AppModals", () => {
     closeActivityLog: vi.fn(),
     openGitManager: vi.fn(),
     closeGitManager: vi.fn(),
-    openWorkflowSteps: vi.fn(),
-    closeWorkflowSteps: vi.fn(),
     openAgents: vi.fn(),
     closeAgents: vi.fn(),
     openSetupWizard: vi.fn(),
diff --git a/packages/dashboard/app/components/__tests__/Header.test.tsx b/packages/dashboard/app/components/__tests__/Header.test.tsx
index 679789cc38..01e8a622e6 100644
--- a/packages/dashboard/app/components/__tests__/Header.test.tsx
+++ b/packages/dashboard/app/components/__tests__/Header.test.tsx
@@ -84,6 +84,25 @@ describe("Header", () => {
     expect(screen.getByTitle("Settings")).toBeDefined();
   });
 
+  describe("workflows button", () => {
+    it("renders the desktop workflows button and opens the editor on click", () => {
+      const onOpenWorkflowEditor = vi.fn();
+      renderHeader({ onOpenWorkflowEditor }, "desktop");
+      const btn = screen.getByTestId("workflow-steps-btn");
+      expect(btn.getAttribute("title")).toBe("Workflows");
+      fireEvent.click(btn);
+      expect(onOpenWorkflowEditor).toHaveBeenCalledTimes(1);
+    });
+
+    it("opens the editor from the mobile overflow menu", () => {
+      const onOpenWorkflowEditor = vi.fn();
+      renderHeader({ onOpenWorkflowEditor }, "mobile");
+      fireEvent.click(screen.getByTitle("More header actions"));
+      fireEvent.click(screen.getByTestId("overflow-workflow-steps-btn"));
+      expect(onOpenWorkflowEditor).toHaveBeenCalledTimes(1);
+    });
+  });
+
   it("hides GitHub import for desktop shell host", () => {
     renderHeader({ shellHost: { kind: "desktop-shell" } });
     expect(screen.queryByTitle("Import from GitHub")).toBeNull();
@@ -1617,7 +1636,7 @@ describe("Header", () => {
       const { container } = renderHeader({
         onOpenUsage: noop,
         onOpenActivityLog: noop,
-        onOpenWorkflowSteps: noop,
+        onOpenWorkflowEditor: noop,
         onOpenFiles: noop,
         onOpenGitManager: noop,
         onOpenScripts: noop,
@@ -1651,7 +1670,7 @@ describe("Header", () => {
       const { container } = renderHeader({
         onOpenUsage: noop,
         onOpenActivityLog: noop,
-        onOpenWorkflowSteps: noop,
+        onOpenWorkflowEditor: noop,
         onOpenFiles: noop,
         onOpenGitManager: noop,
       }, "mobile");
diff --git a/packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx b/packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx
index a62b6d604b..45eca56a80 100644
--- a/packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx
+++ b/packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx
@@ -39,7 +39,7 @@ const createDefaultProps = () => ({
   mailboxUnreadCount: 0,
   mailboxPendingApprovalCount: 0,
   onOpenGitManager: vi.fn(),
-  onOpenWorkflowSteps: vi.fn(),
+  onOpenWorkflowEditor: vi.fn(),
   onOpenSchedules: vi.fn(),
   onOpenScripts: vi.fn(),
   onToggleTerminal: vi.fn(),
diff --git a/packages/dashboard/app/components/__tests__/WorkflowStepManager.test.tsx b/packages/dashboard/app/components/__tests__/WorkflowStepManager.test.tsx
deleted file mode 100644
index ccddd9fc34..0000000000
--- a/packages/dashboard/app/components/__tests__/WorkflowStepManager.test.tsx
+++ /dev/null
@@ -1,1372 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, fireEvent, waitFor, within } from "@testing-library/react";
-import { WorkflowStepManager } from "../WorkflowStepManager";
-import type { WorkflowStep } from "@fusion/core";
-
-const mockSteps: WorkflowStep[] = [
-  {
-    id: "WS-001",
-    name: "Documentation Review",
-    description: "Verify all public APIs have documentation",
-    mode: "prompt",
-    prompt: "Review the task changes and verify docs.",
-    enabled: true,
-    createdAt: "2026-01-01T00:00:00.000Z",
-    updatedAt: "2026-01-01T00:00:00.000Z",
-  },
-  {
-    id: "WS-002",
-    name: "QA Check",
-    description: "Run tests and verify they pass",
-    mode: "prompt",
-    prompt: "Execute the test suite.",
-    enabled: false,
-    createdAt: "2026-01-02T00:00:00.000Z",
-    updatedAt: "2026-01-02T00:00:00.000Z",
-  },
-];
-
-vi.mock("../../api", () => ({
-  fetchWorkflowSteps: vi.fn(() => Promise.resolve([])),
-  createWorkflowStep: vi.fn(() => Promise.resolve({
-    id: "WS-003",
-    name: "New Step",
-    description: "New description",
-    mode: "prompt",
-    prompt: "",
-    enabled: true,
-    createdAt: "2026-01-03T00:00:00.000Z",
-    updatedAt: "2026-01-03T00:00:00.000Z",
-  })),
-  updateWorkflowStep: vi.fn((id: string, updates: Record<string, unknown>) => Promise.resolve({
-    ...mockSteps.find((s) => s.id === id),
-    ...updates,
-    updatedAt: "2026-01-03T00:00:00.000Z",
-  })),
-  deleteWorkflowStep: vi.fn(() => Promise.resolve()),
-  refineWorkflowStepPrompt: vi.fn(() => Promise.resolve({
-    prompt: "AI-generated detailed prompt",
-    workflowStep: { ...mockSteps[0], prompt: "AI-generated detailed prompt" },
-  })),
-  fetchWorkflowStepTemplates: vi.fn(() => Promise.resolve({
-    templates: [
-      {
-        id: "browser-verification",
-        name: "Browser Verification",
-        description: "Verify web application functionality using browser automation",
-        prompt: "Test prompt",
-        category: "Quality",
-        icon: "globe",
-        toolMode: "coding",
-      },
-      {
-        id: "frontend-ux-design",
-        name: "Frontend UX Design",
-        description: "Verify visual polish and consistency with existing UI patterns and design tokens",
-        prompt: "Test prompt",
-        category: "Quality",
-        icon: "layout-grid",
-        toolMode: "readonly",
-      },
-      {
-        id: "plugin:agent-browser:workflow-check",
-        name: "Plugin Workflow Check",
-        description: "Plugin contributed workflow validation",
-        prompt: "Run plugin workflow check",
-        category: "Plugin",
-        icon: "puzzle",
-        toolMode: "coding",
-      },
-    ],
-  })),
-  fetchPluginWorkflowStepTemplates: vi.fn(() => Promise.resolve({
-    templates: [
-      {
-        pluginId: "agent-browser",
-        template: {
-          id: "plugin:agent-browser:workflow-check",
-          name: "Plugin Workflow Check",
-          description: "Plugin contributed workflow validation",
-          prompt: "Run plugin workflow check",
-          category: "Plugin",
-          icon: "puzzle",
-          toolMode: "coding",
-        },
-      },
-    ],
-  })),
-  createWorkflowStepFromTemplate: vi.fn((templateId?: string) => {
-    if (templateId === "frontend-ux-design") {
-      return Promise.resolve({
-        id: "WS-011",
-        templateId: "frontend-ux-design",
-        name: "Frontend UX Design",
-        description: "Verify visual polish and consistency with existing UI patterns and design tokens",
-        mode: "prompt",
-        phase: "pre-merge",
-        prompt: "Test prompt",
-        toolMode: "readonly",
-        enabled: true,
-        createdAt: "2026-01-01T00:00:00.000Z",
-        updatedAt: "2026-01-01T00:00:00.000Z",
-      });
-    }
-    return Promise.resolve({
-      id: "WS-010",
-      templateId: "browser-verification",
-      name: "Browser Verification",
-      description: "Verify web application functionality using browser automation",
-      mode: "prompt",
-      phase: "pre-merge",
-      prompt: "Test prompt",
-      toolMode: "coding",
-      enabled: true,
-      createdAt: "2026-01-01T00:00:00.000Z",
-      updatedAt: "2026-01-01T00:00:00.000Z",
-    });
-  }),
-  fetchScripts: vi.fn(() => Promise.resolve({ test: "pnpm test", lint: "pnpm lint" })),
-  fetchModels: vi.fn(() => Promise.resolve({
-    models: [
-      { provider: "anthropic", id: "claude-sonnet-4-5", name: "Claude Sonnet 4.5", reasoning: false, contextWindow: 200000 },
-      { provider: "openai", id: "gpt-4o", name: "GPT-4o", reasoning: false, contextWindow: 128000 },
-    ],
-    favoriteProviders: [],
-    favoriteModels: [],
-  })),
-}));
-
-// Mock CustomModelDropdown - renders a simple test-friendly control
-vi.mock("../CustomModelDropdown", () => ({
-  CustomModelDropdown: ({
-    value,
-    onChange,
-    label,
-    disabled,
-  }: {
-    value: string;
-    onChange: (value: string) => void;
-    label: string;
-    disabled?: boolean;
-    models?: unknown[];
-    placeholder?: string;
-    id?: string;
-    favoriteProviders?: string[];
-    onToggleFavorite?: (provider: string) => void;
-    favoriteModels?: string[];
-    onToggleModelFavorite?: (modelId: string) => void;
-  }) => (
-    <div data-testid={`custom-model-dropdown-${label}`}>
-      <span data-testid={`dropdown-value-${label}`}>{value || "none"}</span>
-      <button
-        data-testid={`dropdown-select-${label}`}
-        onClick={() => onChange("anthropic/claude-sonnet-4-5")}
-        disabled={disabled}
-      >
-        Select {label}
-      </button>
-      <button
-        data-testid={`dropdown-clear-${label}`}
-        onClick={() => onChange("")}
-      >
-        Clear {label}
-      </button>
-    </div>
-  ),
-}));
-
-import {
-  fetchWorkflowSteps,
-  createWorkflowStep,
-  updateWorkflowStep,
-  deleteWorkflowStep,
-  refineWorkflowStepPrompt,
-  fetchWorkflowStepTemplates,
-  fetchPluginWorkflowStepTemplates,
-  createWorkflowStepFromTemplate,
-  fetchModels,
-} from "../../api";
-import { fetchScripts } from "../../api";
-
-const onClose = vi.fn();
-const addToast = vi.fn();
-
-beforeEach(() => {
-  vi.clearAllMocks();
-});
-
-describe("WorkflowStepManager", () => {
-  it("does not render when closed", () => {
-    const { container } = render(
-      <WorkflowStepManager isOpen={false} onClose={onClose} addToast={addToast} />
-    );
-    expect(container.innerHTML).toBe("");
-  });
-
-  it("renders list of workflow steps", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce(mockSteps);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Documentation Review")).toBeInTheDocument();
-      expect(screen.getByText("QA Check")).toBeInTheDocument();
-    });
-  });
-
-  it("shows empty state when no steps exist", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("empty-state")).toBeInTheDocument();
-      expect(screen.getByText(/No workflow steps defined/)).toBeInTheDocument();
-    });
-  });
-
-  it("shows create chooser first when Add button is clicked", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-
-    expect(screen.getByTestId("workflow-step-create-chooser")).toBeInTheDocument();
-    expect(screen.getByTestId("create-custom-step")).toBeInTheDocument();
-    expect(screen.queryByTestId("workflow-step-form")).not.toBeInTheDocument();
-  });
-
-  it("creates a step from chooser template action", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValue([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await screen.findByTestId("add-workflow-step");
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-
-    const chooserTemplate = await screen.findByTestId("chooser-template-browser-verification");
-    fireEvent.click(within(chooserTemplate).getByTestId("chooser-add-template-browser-verification"));
-
-    await waitFor(() => {
-      expect(createWorkflowStepFromTemplate).toHaveBeenCalledWith("browser-verification", undefined);
-      expect(addToast).toHaveBeenCalledWith("Added Browser Verification workflow step", "success");
-    });
-  });
-
-  it("submits new workflow step", async () => {
-    vi.mocked(fetchWorkflowSteps)
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-
-    const nameInput = screen.getByTestId("workflow-step-name");
-    const descInput = screen.getByTestId("workflow-step-description");
-
-    fireEvent.change(nameInput, { target: { value: "New Step" } });
-    fireEvent.change(descInput, { target: { value: "New description" } });
-
-    fireEvent.click(screen.getByTestId("save-workflow-step"));
-
-    await waitFor(() => {
-      expect(createWorkflowStep).toHaveBeenCalledWith({
-        name: "New Step",
-        description: "New description",
-        mode: "prompt",
-        phase: "pre-merge",
-        prompt: undefined,
-        gateMode: "advisory",
-        scriptName: undefined,
-        enabled: true,
-        defaultOn: undefined,
-        modelProvider: undefined,
-        modelId: undefined,
-      }, undefined);
-      expect(addToast).toHaveBeenCalledWith("Workflow step created", "success");
-    });
-  });
-
-  it("edits existing workflow step", async () => {
-    vi.mocked(fetchWorkflowSteps)
-      .mockResolvedValueOnce(mockSteps)
-      .mockResolvedValueOnce(mockSteps);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Documentation Review")).toBeInTheDocument();
-    });
-
-    // Click edit button for the first step
-    const editBtn = screen.getByLabelText("Edit Documentation Review");
-    fireEvent.click(editBtn);
-
-    // Form should be pre-populated
-    expect(screen.getByTestId("workflow-step-form")).toBeInTheDocument();
-    const nameInput = screen.getByTestId("workflow-step-name") as HTMLInputElement;
-    expect(nameInput.value).toBe("Documentation Review");
-
-    // Change the name
-    fireEvent.change(nameInput, { target: { value: "Updated Name" } });
-    fireEvent.click(screen.getByTestId("save-workflow-step"));
-
-    await waitFor(() => {
-      expect(updateWorkflowStep).toHaveBeenCalledWith("WS-001", expect.objectContaining({
-        name: "Updated Name",
-      }), undefined);
-      expect(addToast).toHaveBeenCalledWith("Workflow step updated", "success");
-    });
-  });
-
-  it("deletes workflow step with confirmation", async () => {
-    vi.mocked(fetchWorkflowSteps)
-      .mockResolvedValueOnce(mockSteps)
-      .mockResolvedValueOnce([mockSteps[1]]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Documentation Review")).toBeInTheDocument();
-    });
-
-    // Click delete (first shows confirm dialog)
-    const deleteBtn = screen.getByLabelText("Delete Documentation Review");
-    fireEvent.click(deleteBtn);
-
-    // Confirm delete
-    const confirmBtn = screen.getByLabelText("Confirm delete Documentation Review");
-    fireEvent.click(confirmBtn);
-
-    await waitFor(() => {
-      expect(deleteWorkflowStep).toHaveBeenCalledWith("WS-001", undefined);
-      expect(addToast).toHaveBeenCalledWith("Workflow step deleted", "success");
-    });
-  });
-
-  it("calls refine API and updates prompt", async () => {
-    vi.mocked(fetchWorkflowSteps)
-      .mockResolvedValueOnce(mockSteps)
-      .mockResolvedValueOnce(mockSteps);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Documentation Review")).toBeInTheDocument();
-    });
-
-    // Edit first step
-    fireEvent.click(screen.getByLabelText("Edit Documentation Review"));
-
-    // Click refine button
-    const refineBtn = screen.getByTestId("refine-btn");
-    fireEvent.click(refineBtn);
-
-    await waitFor(() => {
-      expect(refineWorkflowStepPrompt).toHaveBeenCalledWith("WS-001", undefined);
-      expect(addToast).toHaveBeenCalledWith("Prompt refined with AI", "success");
-    });
-  });
-
-  it("handles API errors gracefully", async () => {
-    vi.mocked(fetchWorkflowSteps).mockRejectedValueOnce(new Error("Network error"));
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(addToast).toHaveBeenCalledWith("Network error", "error");
-    });
-  });
-
-  it("shows enabled/disabled badges", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce(mockSteps);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Enabled")).toBeInTheDocument();
-      expect(screen.getByText("Disabled")).toBeInTheDocument();
-    });
-  });
-
-  it("shows AI Prompt mode badge and Pre-merge phase badge for legacy prompt steps", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce(mockSteps);
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-    await waitFor(() => {
-      expect(screen.getAllByText("AI Prompt")).toHaveLength(2);
-      // Legacy steps without phase default to Pre-merge
-      expect(screen.queryAllByText("Pre-merge")).toHaveLength(2);
-    });
-  });
-
-  it("shows Script mode badge for script steps", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([
-      { ...mockSteps[0], mode: "script" as const, scriptName: "test", prompt: "", phase: "pre-merge" },
-    ]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Script")).toBeInTheDocument();
-    });
-  });
-
-  it("shows Pre-merge and Post-merge phase badges for steps with explicit phases", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([
-      { ...mockSteps[0], phase: "pre-merge" as const },
-      { ...mockSteps[1], phase: "post-merge" as const },
-    ]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Pre-merge")).toBeInTheDocument();
-      expect(screen.getByText("Post-merge")).toBeInTheDocument();
-    });
-  });
-
-  it("shows mode selector when creating a new step", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-
-    expect(screen.getByTestId("workflow-step-mode-selector")).toBeInTheDocument();
-    expect(screen.getByTestId("mode-prompt")).toBeInTheDocument();
-    expect(screen.getByTestId("mode-script")).toBeInTheDocument();
-  });
-
-  it("shows prompt field in prompt mode and script select in script mode", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-
-    // Default is prompt mode — should show prompt field
-    expect(screen.getByTestId("workflow-step-prompt")).toBeInTheDocument();
-    expect(screen.queryByTestId("workflow-step-script-select")).not.toBeInTheDocument();
-
-    // Switch to script mode
-    fireEvent.click(screen.getByTestId("mode-script"));
-
-    expect(screen.queryByTestId("workflow-step-prompt")).not.toBeInTheDocument();
-    expect(screen.getByTestId("workflow-step-script-select")).toBeInTheDocument();
-
-    // Switch back to prompt mode
-    fireEvent.click(screen.getByTestId("mode-prompt"));
-
-    expect(screen.getByTestId("workflow-step-prompt")).toBeInTheDocument();
-    expect(screen.queryByTestId("workflow-step-script-select")).not.toBeInTheDocument();
-  });
-
-  it("renders gate mode dropdown and saves edited gate mode", async () => {
-    const stepsWithGateMode: WorkflowStep[] = [
-      { ...mockSteps[0], gateMode: "gate" as const },
-    ];
-    vi.mocked(fetchWorkflowSteps)
-      .mockResolvedValueOnce(stepsWithGateMode)
-      .mockResolvedValueOnce(stepsWithGateMode);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await screen.findByText("Documentation Review");
-    fireEvent.click(screen.getByLabelText("Edit Documentation Review"));
-
-    expect(screen.getByTestId("gate-mode-gate")).toHaveClass("btn-primary");
-
-    fireEvent.click(screen.getByTestId("gate-mode-advisory"));
-    fireEvent.click(screen.getByTestId("save-workflow-step"));
-
-    await waitFor(() => {
-      expect(updateWorkflowStep).toHaveBeenCalledWith(
-        "WS-001",
-        expect.objectContaining({ gateMode: "advisory" }),
-        undefined,
-      );
-    });
-  });
-
-  it("defaults gate mode by execution mode when creating", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await screen.findByTestId("add-workflow-step");
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-
-    expect(screen.getByTestId("gate-mode-advisory")).toHaveClass("btn-primary");
-
-    fireEvent.click(screen.getByTestId("mode-script"));
-    expect(screen.getByTestId("gate-mode-gate")).toHaveClass("btn-primary");
-  });
-
-  it("loads script name when editing a script-mode step", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValue([
-      { ...mockSteps[0], mode: "script" as const, scriptName: "test", prompt: "" },
-    ]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Documentation Review")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByLabelText("Edit Documentation Review"));
-
-    // Script mode should be selected
-    const scriptSelect = screen.getByTestId("workflow-step-script-select") as HTMLSelectElement;
-    expect(scriptSelect.value).toBe("test");
-  });
-
-  it("disables save when script mode is selected without a script name", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-
-    const nameInput = screen.getByTestId("workflow-step-name");
-    const descInput = screen.getByTestId("workflow-step-description");
-
-    fireEvent.change(nameInput, { target: { value: "Test" } });
-    fireEvent.change(descInput, { target: { value: "Test desc" } });
-
-    // Switch to script mode
-    fireEvent.click(screen.getByTestId("mode-script"));
-
-    // Save should be disabled (no script selected)
-    const saveBtn = screen.getByTestId("save-workflow-step") as HTMLButtonElement;
-    expect(saveBtn.disabled).toBe(true);
-  });
-
-  it("submits new workflow step with post-merge phase", async () => {
-    vi.mocked(fetchWorkflowSteps)
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-
-    const nameInput = screen.getByTestId("workflow-step-name");
-    const descInput = screen.getByTestId("workflow-step-description");
-
-    fireEvent.change(nameInput, { target: { value: "Post Step" } });
-    fireEvent.change(descInput, { target: { value: "Post desc" } });
-
-    // Default phase is pre-merge; switch to post-merge
-    fireEvent.click(screen.getByTestId("phase-post-merge"));
-
-    fireEvent.click(screen.getByTestId("save-workflow-step"));
-
-    await waitFor(() => {
-      expect(createWorkflowStep).toHaveBeenCalledWith({
-        name: "Post Step",
-        description: "Post desc",
-        mode: "prompt",
-        phase: "post-merge",
-        prompt: undefined,
-        gateMode: "advisory",
-        scriptName: undefined,
-        enabled: true,
-        defaultOn: undefined,
-        modelProvider: undefined,
-        modelId: undefined,
-      }, undefined);
-      expect(addToast).toHaveBeenCalledWith("Workflow step created", "success");
-    });
-  });
-
-  it("edits existing workflow step phase from pre-merge to post-merge", async () => {
-    vi.mocked(fetchWorkflowSteps).mockReset();
-    vi.mocked(fetchWorkflowSteps)
-      .mockResolvedValueOnce(mockSteps)
-      .mockResolvedValueOnce(mockSteps);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    // Wait for steps to render (not just the fetch call)
-    await waitFor(() => {
-      expect(screen.getByText("Documentation Review")).toBeInTheDocument();
-    });
-
-    // Click edit button for the first step
-    const editBtn = screen.getByLabelText("Edit Documentation Review");
-    fireEvent.click(editBtn);
-
-    expect(screen.getByTestId("workflow-step-form")).toBeInTheDocument();
-
-    // Switch phase to post-merge
-    fireEvent.click(screen.getByTestId("phase-post-merge"));
-
-    fireEvent.click(screen.getByTestId("save-workflow-step"));
-
-    await waitFor(() => {
-      expect(updateWorkflowStep).toHaveBeenCalledWith("WS-001", expect.objectContaining({
-        phase: "post-merge",
-      }), undefined);
-      expect(addToast).toHaveBeenCalledWith("Workflow step updated", "success");
-    });
-  });
-
-  it("shows defaultOn checkbox in create form", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-
-    const defaultOnCheckbox = screen.getByTestId("workflow-step-default-on") as HTMLInputElement;
-    expect(defaultOnCheckbox).toBeInTheDocument();
-    expect(defaultOnCheckbox.checked).toBe(false);
-  });
-
-  it("creates workflow step with defaultOn true", async () => {
-    vi.mocked(fetchWorkflowSteps)
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-
-    const nameInput = screen.getByTestId("workflow-step-name");
-    const descInput = screen.getByTestId("workflow-step-description");
-    fireEvent.change(nameInput, { target: { value: "Auto Step" } });
-    fireEvent.change(descInput, { target: { value: "Auto-enabled" } });
-
-    // Check the defaultOn checkbox
-    const defaultOnCheckbox = screen.getByTestId("workflow-step-default-on");
-    fireEvent.click(defaultOnCheckbox);
-
-    fireEvent.click(screen.getByTestId("save-workflow-step"));
-
-    await waitFor(() => {
-      expect(createWorkflowStep).toHaveBeenCalledWith(
-        expect.objectContaining({
-          name: "Auto Step",
-          defaultOn: true,
-        }),
-        undefined,
-      );
-    });
-  });
-
-  it("prefills defaultOn when editing a step with defaultOn true", async () => {
-    const stepsWithDefaultOn: WorkflowStep[] = [
-      { ...mockSteps[0], defaultOn: true },
-    ];
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce(stepsWithDefaultOn);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Documentation Review")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByLabelText("Edit Documentation Review"));
-
-    const defaultOnCheckbox = screen.getByTestId("workflow-step-default-on") as HTMLInputElement;
-    expect(defaultOnCheckbox.checked).toBe(true);
-  });
-
-  it("shows default-on badge for steps with defaultOn true", async () => {
-    const stepsWithDefaultOn: WorkflowStep[] = [
-      { ...mockSteps[0], defaultOn: true },
-      { ...mockSteps[1], defaultOn: false },
-    ];
-    vi.mocked(fetchWorkflowSteps).mockReset();
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce(stepsWithDefaultOn);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Documentation Review")).toBeInTheDocument();
-      expect(screen.getByText("QA Check")).toBeInTheDocument();
-    });
-
-    // Only the first step should have the "Default on" badge
-    const badges = screen.getAllByText("Default on");
-    expect(badges).toHaveLength(1);
-  });
-
-  it("does not show default-on badge when defaultOn is false or undefined", async () => {
-    vi.mocked(fetchWorkflowSteps).mockReset();
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce(mockSteps);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Documentation Review")).toBeInTheDocument();
-    });
-
-    expect(screen.queryByText("Default on")).not.toBeInTheDocument();
-  });
-});
-
-describe("WorkflowStepManager templates tab", () => {
-  it("renders browser verification template", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("tab-templates")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("tab-templates"));
-
-    await waitFor(() => {
-      expect(screen.getByTestId("template-browser-verification")).toBeInTheDocument();
-      expect(screen.getByText("Browser Verification")).toBeInTheDocument();
-    });
-
-    expect(fetchWorkflowStepTemplates).toHaveBeenCalled();
-  });
-
-  it("displays the Globe icon for browser verification template", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("tab-templates")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("tab-templates"));
-
-    const templateCard = await screen.findByTestId("template-browser-verification");
-    expect(templateCard.querySelector(".lucide-globe")).toBeInTheDocument();
-  });
-
-  it("can add browser verification template as a workflow step", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValue([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("tab-templates")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("tab-templates"));
-
-    const templateCard = await screen.findByTestId("template-browser-verification");
-    fireEvent.click(within(templateCard).getByTestId("add-template-browser-verification"));
-
-    await waitFor(() => {
-      expect(createWorkflowStepFromTemplate).toHaveBeenCalledWith("browser-verification", undefined);
-      expect(addToast).toHaveBeenCalledWith("Added Browser Verification workflow step", "success");
-    });
-  });
-
-  it("renders frontend-ux-design template", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("tab-templates")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("tab-templates"));
-
-    await waitFor(() => {
-      expect(screen.getByTestId("template-frontend-ux-design")).toBeInTheDocument();
-      expect(screen.getByText("Frontend UX Design")).toBeInTheDocument();
-    });
-  });
-
-  it("displays the LayoutGrid icon for frontend-ux-design template", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("tab-templates")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("tab-templates"));
-
-    const templateCard = await screen.findByTestId("template-frontend-ux-design");
-    expect(templateCard.querySelector(".lucide-layout-grid")).toBeInTheDocument();
-  });
-
-  it("can add frontend-ux-design template as a workflow step", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValue([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("tab-templates")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("tab-templates"));
-
-    const templateCard = await screen.findByTestId("template-frontend-ux-design");
-    fireEvent.click(within(templateCard).getByTestId("add-template-frontend-ux-design"));
-
-    await waitFor(() => {
-      expect(createWorkflowStepFromTemplate).toHaveBeenCalledWith("frontend-ux-design", undefined);
-      expect(addToast).toHaveBeenCalledWith("Added Frontend UX Design workflow step", "success");
-    });
-  });
-
-  it("shows plugin template badge and puzzle icon", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    fireEvent.click(await screen.findByTestId("tab-templates"));
-
-    const templateCard = await screen.findByTestId("template-plugin:agent-browser:workflow-check");
-    expect(templateCard.querySelector(".lucide-puzzle")).toBeInTheDocument();
-    expect(within(templateCard).getByText("agent-browser")).toBeInTheDocument();
-    expect(fetchPluginWorkflowStepTemplates).toHaveBeenCalled();
-  });
-});
-
-describe("WorkflowStepManager theme class structure", () => {
-  it("uses wfm-body class for modal body", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    const { container } = render(
-      <WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />
-    );
-
-    await waitFor(() => {
-      expect(container.querySelector(".wfm-body")).toBeInTheDocument();
-    });
-  });
-
-  it("uses wfm-tab-row and wfm-tab-btn classes for tab navigation", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    const { container } = render(
-      <WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId("tab-my-steps")).toBeInTheDocument();
-    });
-
-    expect(container.querySelector(".wfm-tab-row")).toBeInTheDocument();
-    expect(container.querySelectorAll(".wfm-tab-btn")).toHaveLength(2);
-  });
-
-  it("uses wfm-empty class for empty state", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    const { container } = render(
-      <WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId("empty-state")).toBeInTheDocument();
-    });
-
-    expect(container.querySelector(".wfm-empty")).toBeInTheDocument();
-  });
-
-  it("uses wfm-step-card and badge classes for step list items", async () => {
-    vi.mocked(fetchWorkflowSteps).mockReset();
-    vi.mocked(fetchWorkflowSteps).mockResolvedValue(mockSteps);
-
-    const { container } = render(
-      <WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />
-    );
-
-    await screen.findByText("Documentation Review");
-
-    // Step cards use class-based styling
-    expect(container.querySelectorAll(".wfm-step-card")).toHaveLength(2);
-    expect(container.querySelectorAll(".wfm-step-card-name")).toHaveLength(2);
-    expect(container.querySelectorAll(".wfm-step-card-desc")).toHaveLength(2);
-
-    // Badges use class-based styling
-    expect(container.querySelector(".wfm-badge-enabled")).toBeInTheDocument();
-    expect(container.querySelector(".wfm-badge-disabled")).toBeInTheDocument();
-    expect(container.querySelectorAll(".wfm-badge-prompt")).toHaveLength(2);
-  });
-
-  it("uses wfm-step-card with script badge for script-mode steps", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValue([
-      { ...mockSteps[0], mode: "script" as const, scriptName: "test", prompt: "" },
-    ]);
-
-    const { container } = render(
-      <WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />
-    );
-
-    await screen.findByText("Script");
-
-    expect(container.querySelector(".wfm-badge-script")).toBeInTheDocument();
-  });
-
-  it("uses wfm-form and wfm-field classes for the edit/create form", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    const { container } = render(
-      <WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-
-    expect(container.querySelector(".wfm-form")).toBeInTheDocument();
-    expect(container.querySelector(".wfm-form-title")).toBeInTheDocument();
-    expect(container.querySelector(".wfm-form-fields")).toBeInTheDocument();
-    expect(container.querySelectorAll(".wfm-field").length).toBeGreaterThanOrEqual(3); // name, description, mode
-  });
-
-  it("uses wfm-mode-selector and wfm-mode-btn classes for mode toggle", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    const { container } = render(
-      <WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-
-    expect(container.querySelector(".wfm-mode-selector")).toBeInTheDocument();
-    // 6 buttons total: 2 execution mode + 2 phase + 2 failure-behavior (gate mode)
-    expect(container.querySelectorAll(".wfm-mode-btn")).toHaveLength(6);
-  });
-
-  it("uses wfm-prompt-textarea class for the prompt textarea", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    const { container } = render(
-      <WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-
-    expect(container.querySelector(".wfm-prompt-textarea")).toBeInTheDocument();
-    expect(container.querySelector(".wfm-prompt-header")).toBeInTheDocument();
-    expect(container.querySelector(".wfm-refine-btn")).toBeInTheDocument();
-  });
-
-  it("uses wfm-checkbox-label class for enabled toggle", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    const { container } = render(
-      <WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-
-    expect(container.querySelector(".wfm-checkbox-label")).toBeInTheDocument();
-  });
-
-  it("uses wfm-form-actions class for form action buttons", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    const { container } = render(
-      <WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-
-    expect(container.querySelector(".wfm-form-actions")).toBeInTheDocument();
-  });
-
-  it("uses wfm-footer and wfm-footer-add-btn classes for footer", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    const { container } = render(
-      <WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    expect(container.querySelector(".wfm-footer")).toBeInTheDocument();
-    expect(container.querySelector(".wfm-footer-add-btn")).toBeInTheDocument();
-  });
-
-  it("uses wfm-no-scripts class when script mode has no scripts", async () => {
-    vi.mocked(fetchScripts).mockResolvedValueOnce({});
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    const { container } = render(
-      <WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-    fireEvent.click(screen.getByTestId("mode-script"));
-
-    expect(container.querySelector(".wfm-no-scripts")).toBeInTheDocument();
-  });
-});
-
-describe("WorkflowStepManager model override", () => {
-  it("shows model override field in prompt mode", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-
-    // Model override field should be visible in prompt mode
-    expect(screen.getByTestId("workflow-step-model-field")).toBeInTheDocument();
-    expect(screen.getByTestId("workflow-step-model-select")).toBeInTheDocument();
-  });
-
-  it("does not show model override field in script mode", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-    fireEvent.click(screen.getByTestId("mode-script"));
-
-    // Model override field should NOT be visible in script mode
-    expect(screen.queryByTestId("workflow-step-model-field")).not.toBeInTheDocument();
-  });
-
-  it("clears model override when switching from prompt to script mode", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-
-    // Select a model via the mock dropdown
-    const selectBtn = screen.getByTestId("dropdown-select-Model override for this workflow step");
-    fireEvent.click(selectBtn);
-
-    // Verify hint shows the selected model
-    await waitFor(() => {
-      expect(screen.getByText("Using anthropic/claude-sonnet-4-5")).toBeInTheDocument();
-    });
-
-    // Switch to script mode
-    fireEvent.click(screen.getByTestId("mode-script"));
-
-    // Switch back to prompt mode — model should be cleared
-    fireEvent.click(screen.getByTestId("mode-prompt"));
-    await waitFor(() => {
-      expect(screen.getByText("Using global default model")).toBeInTheDocument();
-    });
-  });
-
-  it("sends model override when creating a prompt-mode step with model selected", async () => {
-    vi.mocked(fetchWorkflowSteps)
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-
-    const nameInput = screen.getByTestId("workflow-step-name");
-    const descInput = screen.getByTestId("workflow-step-description");
-    fireEvent.change(nameInput, { target: { value: "Security Scan" } });
-    fireEvent.change(descInput, { target: { value: "Run security audit" } });
-
-    // Select a model via the mock dropdown
-    const selectBtn = screen.getByTestId("dropdown-select-Model override for this workflow step");
-    fireEvent.click(selectBtn);
-
-    fireEvent.click(screen.getByTestId("save-workflow-step"));
-
-    await waitFor(() => {
-      expect(createWorkflowStep).toHaveBeenCalledWith(
-        expect.objectContaining({
-          name: "Security Scan",
-          modelProvider: "anthropic",
-          modelId: "claude-sonnet-4-5",
-        }),
-        undefined,
-      );
-    });
-  });
-
-  it("sends undefined model fields when creating without model selection", async () => {
-    vi.mocked(fetchWorkflowSteps)
-      .mockResolvedValueOnce([])
-      .mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-
-    const nameInput = screen.getByTestId("workflow-step-name");
-    const descInput = screen.getByTestId("workflow-step-description");
-    fireEvent.change(nameInput, { target: { value: "QA Check" } });
-    fireEvent.change(descInput, { target: { value: "Run tests" } });
-
-    fireEvent.click(screen.getByTestId("save-workflow-step"));
-
-    await waitFor(() => {
-      expect(createWorkflowStep).toHaveBeenCalledWith(
-        expect.objectContaining({
-          name: "QA Check",
-          modelProvider: undefined,
-          modelId: undefined,
-        }),
-        undefined,
-      );
-    });
-  });
-
-  it("populates model fields when editing a step with model override", async () => {
-    const stepWithModel: WorkflowStep[] = [
-      {
-        ...mockSteps[0],
-        modelProvider: "openai",
-        modelId: "gpt-4o",
-      },
-    ];
-    vi.mocked(fetchWorkflowSteps)
-      .mockResolvedValueOnce(stepWithModel)
-      .mockResolvedValueOnce(stepWithModel);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Documentation Review")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByLabelText("Edit Documentation Review"));
-
-    // Model dropdown should show the existing override
-    await waitFor(() => {
-      expect(screen.getByText("Using openai/gpt-4o")).toBeInTheDocument();
-    });
-  });
-
-  it("shows use-default hint when editing a step without model override", async () => {
-    vi.mocked(fetchWorkflowSteps).mockReset().mockResolvedValueOnce(mockSteps);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Documentation Review")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByLabelText("Edit Documentation Review"));
-
-    // Wait for the form to render with the model field
-    await waitFor(() => {
-      expect(screen.getByTestId("workflow-step-model-field")).toBeInTheDocument();
-    });
-    expect(screen.getByText("Using global default model")).toBeInTheDocument();
-  });
-
-  it("sends model override when updating a step", async () => {
-    vi.mocked(fetchWorkflowSteps)
-      .mockResolvedValueOnce(mockSteps)
-      .mockResolvedValueOnce(mockSteps);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Documentation Review")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByLabelText("Edit Documentation Review"));
-
-    // Select a model via the mock dropdown
-    const selectBtn = screen.getByTestId("dropdown-select-Model override for this workflow step");
-    fireEvent.click(selectBtn);
-
-    fireEvent.click(screen.getByTestId("save-workflow-step"));
-
-    await waitFor(() => {
-      expect(updateWorkflowStep).toHaveBeenCalledWith(
-        "WS-001",
-        expect.objectContaining({
-          modelProvider: "anthropic",
-          modelId: "claude-sonnet-4-5",
-        }),
-        undefined,
-      );
-    });
-  });
-
-  it("clears model override via clear button", async () => {
-    const stepWithModel: WorkflowStep[] = [
-      {
-        ...mockSteps[0],
-        modelProvider: "openai",
-        modelId: "gpt-4o",
-      },
-    ];
-    vi.mocked(fetchWorkflowSteps)
-      .mockReset()
-      .mockResolvedValueOnce(stepWithModel)
-      .mockResolvedValueOnce(stepWithModel);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByText("Documentation Review")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByLabelText("Edit Documentation Review"));
-
-    // Wait for the form to render with the model field
-    await waitFor(() => {
-      expect(screen.getByTestId("workflow-step-model-field")).toBeInTheDocument();
-    });
-    await waitFor(() => {
-      expect(screen.getByText("Using openai/gpt-4o")).toBeInTheDocument();
-    });
-
-    // Click the clear button
-    const clearBtn = screen.getByTestId("clear-model-override");
-    fireEvent.click(clearBtn);
-
-    // Should now show default hint
-    expect(screen.getByText("Using global default model")).toBeInTheDocument();
-
-    // Save should send undefined model fields
-    fireEvent.click(screen.getByTestId("save-workflow-step"));
-
-    await waitFor(() => {
-      expect(updateWorkflowStep).toHaveBeenCalledWith(
-        "WS-001",
-        expect.objectContaining({
-          modelProvider: undefined,
-          modelId: undefined,
-        }),
-        undefined,
-      );
-    });
-  });
-
-  it("shows clear button only when model override is set", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("add-workflow-step")).toBeInTheDocument();
-    });
-
-    fireEvent.click(screen.getByTestId("add-workflow-step"));
-    fireEvent.click(screen.getByTestId("create-custom-step"));
-
-    // No model selected — clear button should NOT be visible
-    expect(screen.queryByTestId("clear-model-override")).not.toBeInTheDocument();
-
-    // Select a model
-    const selectBtn = screen.getByTestId("dropdown-select-Model override for this workflow step");
-    fireEvent.click(selectBtn);
-
-    // Now clear button should be visible
-    await waitFor(() => {
-      expect(screen.getByTestId("clear-model-override")).toBeInTheDocument();
-    });
-  });
-
-  it("loads models via fetchModels on open", async () => {
-    vi.mocked(fetchWorkflowSteps).mockResolvedValueOnce([]);
-
-    render(<WorkflowStepManager isOpen={true} onClose={onClose} addToast={addToast} />);
-
-    await waitFor(() => {
-      expect(fetchModels).toHaveBeenCalled();
-    });
-  });
-});
diff --git a/packages/dashboard/app/hooks/useModalManager.ts b/packages/dashboard/app/hooks/useModalManager.ts
index 4e08e301b1..6cf4aa55ce 100644
--- a/packages/dashboard/app/hooks/useModalManager.ts
+++ b/packages/dashboard/app/hooks/useModalManager.ts
@@ -53,7 +53,6 @@ export interface ModalManager {
   fileBrowserInitialFile: string | null;
   activityLogOpen: boolean;
   gitManagerOpen: boolean;
-  workflowStepsOpen: boolean;
   workflowEditorOpen: boolean;
   agentsOpen: boolean;
   scriptsOpen: boolean;
@@ -117,8 +116,6 @@ export interface ModalManager {
   openGitManager: () => void;
   closeGitManager: () => void;
 
-  openWorkflowSteps: () => void;
-  closeWorkflowSteps: () => void;
   openWorkflowEditor: () => void;
   closeWorkflowEditor: () => void;
 
@@ -177,7 +174,6 @@ export function useModalManager(options: UseModalManagerOptions): ModalManager {
   const [fileBrowserInitialFile, setFileBrowserInitialFile] = useState<string | null>(null);
   const [activityLogOpen, setActivityLogOpen] = useState(false);
   const [gitManagerOpen, setGitManagerOpen] = useState(false);
-  const [workflowStepsOpen, setWorkflowStepsOpen] = useState(false);
   const [workflowEditorOpen, setWorkflowEditorOpen] = useState(false);
   const [agentsOpen, setAgentsOpen] = useState(false);
   const [scriptsOpen, setScriptsOpen] = useState(false);
@@ -196,7 +192,6 @@ export function useModalManager(options: UseModalManagerOptions): ModalManager {
       todosOpen ||
       activityLogOpen ||
       gitManagerOpen ||
-      workflowStepsOpen ||
       workflowEditorOpen ||
       scriptsOpen ||
       agentsOpen ||
@@ -345,8 +340,6 @@ export function useModalManager(options: UseModalManagerOptions): ModalManager {
   const openGitManager = useCallback(() => setGitManagerOpen(true), []);
   const closeGitManager = useCallback(() => setGitManagerOpen(false), []);
 
-  const openWorkflowSteps = useCallback(() => setWorkflowStepsOpen(true), []);
-  const closeWorkflowSteps = useCallback(() => setWorkflowStepsOpen(false), []);
   const openWorkflowEditor = useCallback(() => setWorkflowEditorOpen(true), []);
   const closeWorkflowEditor = useCallback(() => setWorkflowEditorOpen(false), []);
 
@@ -414,7 +407,6 @@ export function useModalManager(options: UseModalManagerOptions): ModalManager {
     fileBrowserInitialFile,
     activityLogOpen,
     gitManagerOpen,
-    workflowStepsOpen,
     workflowEditorOpen,
     agentsOpen,
     scriptsOpen,
@@ -458,8 +450,6 @@ export function useModalManager(options: UseModalManagerOptions): ModalManager {
     closeActivityLog,
     openGitManager,
     closeGitManager,
-    openWorkflowSteps,
-    closeWorkflowSteps,
     openWorkflowEditor,
     closeWorkflowEditor,
     openAgents,
diff --git a/packages/i18n/locales/en/app.json b/packages/i18n/locales/en/app.json
index 501e4467ef..29511e36af 100644
--- a/packages/i18n/locales/en/app.json
+++ b/packages/i18n/locales/en/app.json
@@ -2443,7 +2443,7 @@
     "viewActivityLog": "View Activity Log",
     "viewProjects": "View Projects",
     "viewUsage": "View usage",
-    "workflowSteps": "Workflow Steps",
+    "workflows": "Workflows",
     "workingBranch": "Working branch"
   },
   "health": {
@@ -3459,7 +3459,7 @@
     "terminal": "Terminal",
     "todos": "Todos",
     "usage": "Usage",
-    "workflowSteps": "Workflow Steps"
+    "workflows": "Workflows"
   },
   "newTaskModal": {
     "addDependencies": "Add dependencies",
diff --git a/packages/i18n/locales/es/app.json b/packages/i18n/locales/es/app.json
index 122b12e877..6289a6ded7 100644
--- a/packages/i18n/locales/es/app.json
+++ b/packages/i18n/locales/es/app.json
@@ -2443,8 +2443,8 @@
     "viewActivityLog": "Ver registro de actividad",
     "viewProjects": "Ver proyectos",
     "viewUsage": "Ver uso",
-    "workflowSteps": "Pasos del flujo de trabajo",
-    "workingBranch": "Rama de trabajo"
+    "workingBranch": "Rama de trabajo",
+    "workflows": ""
   },
   "health": {
     "activeTasks": "Tareas activas",
@@ -3459,7 +3459,7 @@
     "terminal": "Terminal",
     "todos": "Pendientes",
     "usage": "Uso",
-    "workflowSteps": "Pasos del flujo de trabajo"
+    "workflows": ""
   },
   "newTaskModal": {
     "addDependencies": "Añadir dependencias",
diff --git a/packages/i18n/locales/fr/app.json b/packages/i18n/locales/fr/app.json
index 6e3e791eb1..79f6e2ca70 100644
--- a/packages/i18n/locales/fr/app.json
+++ b/packages/i18n/locales/fr/app.json
@@ -2443,8 +2443,8 @@
     "viewActivityLog": "Voir le journal d'activité",
     "viewProjects": "Voir les projets",
     "viewUsage": "Voir l'utilisation",
-    "workflowSteps": "Étapes du workflow",
-    "workingBranch": "Branche de travail"
+    "workingBranch": "Branche de travail",
+    "workflows": ""
   },
   "health": {
     "activeTasks": "Tâches actives",
@@ -3459,7 +3459,7 @@
     "terminal": "Terminal",
     "todos": "Tâches à faire",
     "usage": "Utilisation",
-    "workflowSteps": "Étapes de workflow"
+    "workflows": ""
   },
   "newTaskModal": {
     "addDependencies": "Ajouter des dépendances",
diff --git a/packages/i18n/locales/ko/app.json b/packages/i18n/locales/ko/app.json
index 0ce0a4fb9b..59a2abaa4d 100644
--- a/packages/i18n/locales/ko/app.json
+++ b/packages/i18n/locales/ko/app.json
@@ -2439,12 +2439,12 @@
     "viewActivityLog": "활동 로그 보기",
     "viewProjects": "프로젝트 보기",
     "viewUsage": "사용량 보기",
-    "workflowSteps": "워크플로 단계",
     "workingBranch": "작업 브랜치",
     "activePlanningSessions_one": "",
     "mailboxWithCount_one": "",
     "resumePlanningSessionCount_one": "",
-    "unreadMessages_one": ""
+    "unreadMessages_one": "",
+    "workflows": ""
   },
   "health": {
     "activeTasks": "활성 작업",
@@ -3459,7 +3459,7 @@
     "terminal": "터미널",
     "todos": "할 일",
     "usage": "사용량",
-    "workflowSteps": "워크플로우 단계"
+    "workflows": ""
   },
   "newTaskModal": {
     "addDependencies": "의존성 추가",
diff --git a/packages/i18n/locales/zh-CN/app.json b/packages/i18n/locales/zh-CN/app.json
index 0bff1a49f8..8bfd6cfbbb 100644
--- a/packages/i18n/locales/zh-CN/app.json
+++ b/packages/i18n/locales/zh-CN/app.json
@@ -2439,12 +2439,12 @@
     "viewActivityLog": "查看活动日志",
     "viewProjects": "查看项目",
     "viewUsage": "查看用量",
-    "workflowSteps": "工作流步骤",
     "workingBranch": "工作分支",
     "activePlanningSessions_one": "",
     "mailboxWithCount_one": "",
     "resumePlanningSessionCount_one": "",
-    "unreadMessages_one": ""
+    "unreadMessages_one": "",
+    "workflows": ""
   },
   "health": {
     "activeTasks": "活动任务",
@@ -3459,7 +3459,7 @@
     "terminal": "终端",
     "todos": "待办",
     "usage": "用量",
-    "workflowSteps": "工作流步骤"
+    "workflows": ""
   },
   "newTaskModal": {
     "addDependencies": "添加依赖项",
diff --git a/packages/i18n/locales/zh-TW/app.json b/packages/i18n/locales/zh-TW/app.json
index 2a0b709d2b..9a7867d226 100644
--- a/packages/i18n/locales/zh-TW/app.json
+++ b/packages/i18n/locales/zh-TW/app.json
@@ -2439,12 +2439,12 @@
     "viewActivityLog": "查看活動記錄",
     "viewProjects": "查看專案",
     "viewUsage": "查看用量",
-    "workflowSteps": "工作流程步驟",
     "workingBranch": "工作分支",
     "activePlanningSessions_one": "",
     "mailboxWithCount_one": "",
     "resumePlanningSessionCount_one": "",
-    "unreadMessages_one": ""
+    "unreadMessages_one": "",
+    "workflows": ""
   },
   "health": {
     "activeTasks": "活躍任務",
@@ -3459,7 +3459,7 @@
     "terminal": "終端機",
     "todos": "待辦",
     "usage": "用量",
-    "workflowSteps": "工作流程步驟"
+    "workflows": ""
   },
   "newTaskModal": {
     "addDependencies": "新增相依性",
diff --git a/packages/i18n/src/resources.d.ts b/packages/i18n/src/resources.d.ts
index 626ddaf2e4..307209af43 100644
--- a/packages/i18n/src/resources.d.ts
+++ b/packages/i18n/src/resources.d.ts
@@ -2445,7 +2445,7 @@ export default interface Resources {
       "viewActivityLog": "View Activity Log",
       "viewProjects": "View Projects",
       "viewUsage": "View usage",
-      "workflowSteps": "Workflow Steps",
+      "workflows": "Workflows",
       "workingBranch": "Working branch"
     },
     "health": {
@@ -3461,7 +3461,7 @@ export default interface Resources {
       "terminal": "Terminal",
       "todos": "Todos",
       "usage": "Usage",
-      "workflowSteps": "Workflow Steps"
+      "workflows": "Workflows"
     },
     "newTaskModal": {
       "addDependencies": "Add dependencies",