From bf902a4f02f2ba19cd702704ee23411381486cd4 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Mon, 30 Mar 2026 01:51:30 +0000
Subject: [PATCH] refactor: simplify Create Flow dropdown, remove maintenance
 flow from UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Simplify CreateFlowDropdown to 2 clean items: Troubleshooting Flow
  and Procedural Flow (removed 4 AI-assist entries + 1 orphaned duplicate)
- Rename "Troubleshooting Tree" → "Troubleshooting Flow" (per branding)
- Remove Maintenance Flow option from MyTreesPage (hidden for pilot)
- Replace MyTreesPage inline dropdown with shared CreateFlowDropdown
- Remove unused aiEnabled prop, useCachedQuota import, showCreateMenu state

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/common/CreateFlowDropdown.tsx  | 118 +-----------------
 frontend/src/pages/MyTreesPage.tsx            |  54 +-------
 frontend/src/pages/TreeLibraryPage.tsx        |  10 +-
 3 files changed, 11 insertions(+), 171 deletions(-)

diff --git a/frontend/src/components/common/CreateFlowDropdown.tsx b/frontend/src/components/common/CreateFlowDropdown.tsx
index 69a005fa..9e61a1bd 100644
--- a/frontend/src/components/common/CreateFlowDropdown.tsx
+++ b/frontend/src/components/common/CreateFlowDropdown.tsx
@@ -1,65 +1,19 @@
 import { useState } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
-import { Plus, ChevronDown, Sparkles, FolderTree, ListOrdered } from 'lucide-react'
+import { Link } from 'react-router-dom'
+import { Plus, ChevronDown, FolderTree, ListOrdered } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { editorAIApi } from '@/api/editorAI'
-import { apiClient } from '@/api/client'
-import { AIPromptDialog } from '@/components/editor-ai/AIPromptDialog'
-
-type AIFlowType = 'troubleshooting' | 'procedural' | 'maintenance'
 
 interface CreateFlowDropdownProps {
-  aiEnabled: boolean
   className?: string
   /** Button label — defaults to "Create Flow" */
   label?: string
 }
 
 export function CreateFlowDropdown({
-  aiEnabled,
   className,
   label = 'Create Flow',
 }: CreateFlowDropdownProps) {
   const [showMenu, setShowMenu] = useState(false)
-  const [aiPromptOpen, setAiPromptOpen] = useState(false)
-  const [aiPromptFlowType, setAiPromptFlowType] = useState<AIFlowType>('troubleshooting')
-  const navigate = useNavigate()
-
-  const handleAIGenerate = async (prompt: string) => {
-    // Start an AI session
-    const session = await editorAIApi.startSession(
-      aiPromptFlowType === 'maintenance' ? 'procedural' : aiPromptFlowType
-    )
-    const sessionId = session.session_id
-
-    // Send the user's prompt
-    await editorAIApi.sendMessage({
-      sessionId,
-      content: prompt,
-      actionType: 'generate_full',
-    })
-
-    // Generate the full flow
-    await editorAIApi.generateFull(sessionId)
-
-    // Import to create the tree
-    const { data: importResult } = await apiClient.post(
-      `/ai/chat/sessions/${sessionId}/import`,
-      {}
-    )
-    const treeId = importResult.tree_id
-
-    // Navigate to the editor
-    if (aiPromptFlowType === 'troubleshooting') {
-      navigate(`/trees/${treeId}/edit`, {
-        state: { aiPanelOpen: true, sessionId },
-      })
-    } else {
-      navigate(`/flows/${treeId}/edit`, {
-        state: { aiPanelOpen: true, sessionId },
-      })
-    }
-  }
 
   return (
     <div className={cn('relative', className)}>
@@ -74,43 +28,25 @@ export function CreateFlowDropdown({
       {showMenu && (
         <>
           <div className="fixed inset-0 z-10" onClick={() => setShowMenu(false)} />
-          <div className="absolute right-0 z-20 mt-1 w-64 rounded-lg border border-border bg-card p-1 shadow-xl">
-            {/* Troubleshooting */}
+          <div className="absolute right-0 z-20 mt-1 w-60 rounded-lg border border-border bg-card p-1 shadow-xl">
             <Link
               to="/trees/new"
               onClick={() => setShowMenu(false)}
-              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
+              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-[var(--color-bg-elevated)] transition-colors"
             >
               <FolderTree className="h-4 w-4 text-muted-foreground" />
               <div className="flex-1">
-                <div className="font-medium">Troubleshooting Tree</div>
+                <div className="font-medium">Troubleshooting Flow</div>
                 <div className="text-xs text-muted-foreground">Branching decision flow</div>
               </div>
             </Link>
-            {aiEnabled && (
-              <button
-                type="button"
-                onClick={() => {
-                  setShowMenu(false)
-                  setAiPromptFlowType('troubleshooting')
-                  setAiPromptOpen(true)
-                }}
-                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
-              >
-                <Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
-                <div className="text-left">
-                  <div className="text-xs text-primary font-medium">Build with Flow Assist</div>
-                </div>
-              </button>
-            )}
 
             <div className="my-1 border-t border-border" />
 
-            {/* Procedural */}
             <Link
               to="/flows/new"
               onClick={() => setShowMenu(false)}
-              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
+              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-[var(--color-bg-elevated)] transition-colors"
             >
               <ListOrdered className="h-4 w-4 text-muted-foreground" />
               <div className="flex-1">
@@ -118,51 +54,9 @@ export function CreateFlowDropdown({
                 <div className="text-xs text-muted-foreground">Step-by-step procedure</div>
               </div>
             </Link>
-            {aiEnabled && (
-              <button
-                type="button"
-                onClick={() => {
-                  setShowMenu(false)
-                  setAiPromptFlowType('procedural')
-                  setAiPromptOpen(true)
-                }}
-                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
-              >
-                <Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
-                <div className="text-left">
-                  <div className="text-xs text-primary font-medium">Build with Flow Assist</div>
-                </div>
-              </button>
-            )}
-
-            <div className="my-1 border-t border-border" />
-
-            {aiEnabled && (
-              <button
-                type="button"
-                onClick={() => {
-                  setShowMenu(false)
-                  setAiPromptFlowType('procedural')
-                  setAiPromptOpen(true)
-                }}
-                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
-              >
-                <Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
-                <div className="text-left">
-                  <div className="text-xs text-primary font-medium">Build with Flow Assist</div>
-                </div>
-              </button>
-            )}
           </div>
         </>
       )}
-
-      <AIPromptDialog
-        isOpen={aiPromptOpen}
-        onClose={() => setAiPromptOpen(false)}
-        onGenerate={handleAIGenerate}
-        flowType={aiPromptFlowType}
-      />
     </div>
   )
 }
diff --git a/frontend/src/pages/MyTreesPage.tsx b/frontend/src/pages/MyTreesPage.tsx
index 1ac2251a..85894992 100644
--- a/frontend/src/pages/MyTreesPage.tsx
+++ b/frontend/src/pages/MyTreesPage.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useNavigate, Link } from 'react-router-dom'
-import { Play, Pencil, Share2, Trash2, GitBranch, Clock, TrendingUp, FolderTree, Plus, ListOrdered, ChevronDown, Wrench } from 'lucide-react'
+import { Play, Pencil, Share2, Trash2, GitBranch, Clock, TrendingUp } from 'lucide-react'
 import { PageMeta } from '@/components/common/PageMeta'
 import { StaggerList } from '@/components/common/StaggerList'
 import { Button } from '@/components/ui/Button'
@@ -16,6 +16,7 @@ import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
 import { toast } from '@/lib/toast'
 import { ForkModal } from '@/components/library/ForkModal'
+import { CreateFlowDropdown } from '@/components/common/CreateFlowDropdown'
 
 interface TreeWithStats extends TreeListItem {
   lastUsed?: string
@@ -35,7 +36,6 @@ export function MyTreesPage() {
   const [isDeleting, setIsDeleting] = useState(false)
   const [treeToShare, setTreeToShare] = useState<TreeWithStats | null>(null)
   const [showShareModal, setShowShareModal] = useState(false)
-  const [showCreateMenu, setShowCreateMenu] = useState(false)
   const [forkTarget, setForkTarget] = useState<TreeWithStats | null>(null)
 
   useEffect(() => {
@@ -129,55 +129,7 @@ export function MyTreesPage() {
           </p>
         </div>
         {canCreateTrees && (
-          <div className="relative">
-            <Button
-              onClick={() => setShowCreateMenu(!showCreateMenu)}
-            >
-              <Plus className="h-4 w-4" />
-              Create New
-              <ChevronDown className="h-3.5 w-3.5" />
-            </Button>
-            {showCreateMenu && (
-              <>
-                <div className="fixed inset-0 z-10" onClick={() => setShowCreateMenu(false)} />
-                <div className="absolute right-0 z-20 mt-1 w-56 rounded-lg border border-border bg-card p-1 shadow-xl">
-                  <Link
-                    to="/trees/new"
-                    onClick={() => setShowCreateMenu(false)}
-                    className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
-                  >
-                    <FolderTree className="h-4 w-4 text-muted-foreground" />
-                    <div>
-                      <div className="font-medium">Troubleshooting Tree</div>
-                      <div className="text-xs text-muted-foreground">Branching decision flow</div>
-                    </div>
-                  </Link>
-                  <Link
-                    to="/flows/new"
-                    onClick={() => setShowCreateMenu(false)}
-                    className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
-                  >
-                    <ListOrdered className="h-4 w-4 text-muted-foreground" />
-                    <div>
-                      <div className="font-medium">Procedural Flow</div>
-                      <div className="text-xs text-muted-foreground">Step-by-step procedure</div>
-                    </div>
-                  </Link>
-                  <Link
-                    to="/flows/new?type=maintenance"
-                    onClick={() => setShowCreateMenu(false)}
-                    className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
-                  >
-                    <Wrench className="h-4 w-4 text-amber-400" />
-                    <div>
-                      <div className="font-medium">Maintenance Flow</div>
-                      <div className="text-xs text-muted-foreground">Scheduled multi-target tasks</div>
-                    </div>
-                  </Link>
-                </div>
-              </>
-            )}
-          </div>
+          <CreateFlowDropdown label="Create New" />
         )}
       </div>
 
diff --git a/frontend/src/pages/TreeLibraryPage.tsx b/frontend/src/pages/TreeLibraryPage.tsx
index 50f5e2ac..594893d4 100644
--- a/frontend/src/pages/TreeLibraryPage.tsx
+++ b/frontend/src/pages/TreeLibraryPage.tsx
@@ -25,7 +25,6 @@ import { cn, safeGetItem } from '@/lib/utils'
 import { getSessionResumePath, getTreeNavigatePath } from '@/lib/routing'
 import { usePermissions } from '@/hooks/usePermissions'
 import { useUserPreferencesStore } from '@/store/userPreferencesStore'
-import { useCachedQuota } from '@/hooks/useCachedQuota'
 import { CreateFlowDropdown } from '@/components/common/CreateFlowDropdown'
 import { Spinner } from '@/components/common/Spinner'
 import { EmptyState } from '@/components/common/EmptyState'
@@ -94,7 +93,6 @@ export function TreeLibraryPage() {
 
   // AI builder state
 
-  const { aiEnabled } = useCachedQuota()
 
   // Repeat Last Session
   const lastSessionData = (() => {
@@ -311,11 +309,7 @@ export function TreeLibraryPage() {
                   <FileUp className="h-4 w-4" />
                   Import
                 </Button>
-                <CreateFlowDropdown
-                  aiEnabled={aiEnabled}
-
-                  label="Create New"
-                />
+                <CreateFlowDropdown label="Create New" />
               </div>
             )}
           </div>
@@ -512,7 +506,7 @@ export function TreeLibraryPage() {
                 description="Flows guide your team through proven resolution paths, capturing every decision along the way."
                 action={
                   canCreateTrees ? (
-                    <CreateFlowDropdown aiEnabled={aiEnabled} label="Create a Flow" />
+                    <CreateFlowDropdown label="Create a Flow" />
                   ) : undefined
                 }
                 learnMoreLink="/guides/creating-flows"