From 6360bc7192a06436c25c498a03b953fd55fb5772 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Fri, 6 Mar 2026 09:55:29 -0500
Subject: [PATCH] feat: add flow type selection to Flow Assist entry points

- CreateFlowDropdown now shows "Build with Flow Assist" under each flow type
- Library page "Flow Assist" button respects current type filter
- Clean up unused AIFlowBuilderModal references

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/common/CreateFlowDropdown.tsx  | 71 ++++++++++++-------
 frontend/src/pages/QuickStartPage.tsx         | 14 +---
 frontend/src/pages/TreeLibraryPage.tsx        | 14 +---
 3 files changed, 51 insertions(+), 48 deletions(-)

diff --git a/frontend/src/components/common/CreateFlowDropdown.tsx b/frontend/src/components/common/CreateFlowDropdown.tsx
index 18f0fc2e..40ac7288 100644
--- a/frontend/src/components/common/CreateFlowDropdown.tsx
+++ b/frontend/src/components/common/CreateFlowDropdown.tsx
@@ -1,11 +1,10 @@
 import { useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import { Plus, ChevronDown, Sparkles, FolderTree, ListOrdered, Wrench } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
 interface CreateFlowDropdownProps {
   aiEnabled: boolean
-  onOpenAIBuilder: () => void
   className?: string
   /** Button label — defaults to "Create Flow" */
   label?: string
@@ -13,11 +12,11 @@ interface CreateFlowDropdownProps {
 
 export function CreateFlowDropdown({
   aiEnabled,
-  onOpenAIBuilder,
   className,
   label = 'Create Flow',
 }: CreateFlowDropdownProps) {
   const [showMenu, setShowMenu] = useState(false)
+  const navigate = useNavigate()
 
   return (
     <div className={cn('relative', className)}>
@@ -32,59 +31,79 @@ export function CreateFlowDropdown({
       {showMenu && (
         <>
           <div className="fixed inset-0 z-10" onClick={() => setShowMenu(false)} />
-          <div className="absolute right-0 z-20 mt-1 w-56 rounded-lg border border-border bg-card p-1 shadow-xl backdrop-blur-sm">
+          <div className="absolute right-0 z-20 mt-1 w-64 rounded-lg border border-border bg-card p-1 shadow-xl backdrop-blur-sm">
+            {/* Troubleshooting */}
             <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"
             >
               <FolderTree className="h-4 w-4 text-muted-foreground" />
-              <div>
+              <div className="flex-1">
                 <div className="font-medium">Troubleshooting Tree</div>
                 <div className="text-xs text-muted-foreground">Branching decision flow</div>
               </div>
             </Link>
+            {aiEnabled && (
+              <button
+                type="button"
+                onClick={() => {
+                  setShowMenu(false)
+                  navigate('/ai/chat')
+                }}
+                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"
             >
               <ListOrdered className="h-4 w-4 text-muted-foreground" />
-              <div>
+              <div className="flex-1">
                 <div className="font-medium">Procedural Flow</div>
                 <div className="text-xs text-muted-foreground">Step-by-step procedure</div>
               </div>
             </Link>
+            {aiEnabled && (
+              <button
+                type="button"
+                onClick={() => {
+                  setShowMenu(false)
+                  navigate('/ai/chat?type=procedural')
+                }}
+                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" />
+
+            {/* Maintenance */}
             <Link
               to="/flows/new?type=maintenance"
               onClick={() => setShowMenu(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="flex-1">
                 <div className="font-medium">Maintenance Flow</div>
                 <div className="text-xs text-muted-foreground">Scheduled multi-target tasks</div>
               </div>
             </Link>
-            {aiEnabled && (
-              <>
-                <div className="my-1 border-t border-border" />
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShowMenu(false)
-                    onOpenAIBuilder()
-                  }}
-                  className="flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
-                >
-                  <Sparkles className="h-4 w-4 text-primary" />
-                  <div className="text-left">
-                    <div className="font-medium">Flow Assist</div>
-                    <div className="text-xs text-muted-foreground">AI-powered flow builder</div>
-                  </div>
-                </button>
-              </>
-            )}
           </div>
         </>
       )}
diff --git a/frontend/src/pages/QuickStartPage.tsx b/frontend/src/pages/QuickStartPage.tsx
index deb86fee..999ae934 100644
--- a/frontend/src/pages/QuickStartPage.tsx
+++ b/frontend/src/pages/QuickStartPage.tsx
@@ -17,7 +17,7 @@ import { TreeGridView } from '@/components/library/TreeGridView'
 import { TreeListView } from '@/components/library/TreeListView'
 import { TreeTableView } from '@/components/library/TreeTableView'
 import { ViewToggle } from '@/components/library/ViewToggle'
-import { AIFlowBuilderModal } from '@/components/ai-builder/AIFlowBuilderModal'
+
 import { CreateFlowDropdown } from '@/components/common/CreateFlowDropdown'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
@@ -67,7 +67,6 @@ export function QuickStartPage() {
   const [showAllFavorites, setShowAllFavorites] = useState(false)
 
   // AI Builder
-  const [showAIBuilder, setShowAIBuilder] = useState(false)
   const { aiEnabled } = useCachedQuota()
 
   // Tab state
@@ -454,7 +453,7 @@ export function QuickStartPage() {
               {activeTab === 'mine' && canCreateTrees && (
                 <CreateFlowDropdown
                   aiEnabled={aiEnabled}
-                  onOpenAIBuilder={() => setShowAIBuilder(true)}
+
                 />
               )}
               <ViewToggle view={dashboardMyFlowsView} onChange={setDashboardMyFlowsView} />
@@ -481,7 +480,7 @@ export function QuickStartPage() {
               {activeTab === 'mine' && canCreateTrees && (
                 <CreateFlowDropdown
                   aiEnabled={aiEnabled}
-                  onOpenAIBuilder={() => setShowAIBuilder(true)}
+
                   label="Create your first flow"
                 />
               )}
@@ -646,13 +645,6 @@ export function QuickStartPage() {
         </div>
       )}
 
-      {/* AI Builder Modal */}
-      {showAIBuilder && (
-        <AIFlowBuilderModal
-          isOpen={showAIBuilder}
-          onClose={() => setShowAIBuilder(false)}
-        />
-      )}
     </div>
   )
 }
diff --git a/frontend/src/pages/TreeLibraryPage.tsx b/frontend/src/pages/TreeLibraryPage.tsx
index 1cbc7014..8756764d 100644
--- a/frontend/src/pages/TreeLibraryPage.tsx
+++ b/frontend/src/pages/TreeLibraryPage.tsx
@@ -22,7 +22,6 @@ import { usePermissions } from '@/hooks/usePermissions'
 import { useUserPreferencesStore } from '@/store/userPreferencesStore'
 import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore'
 import { useCachedQuota } from '@/hooks/useCachedQuota'
-import { AIFlowBuilderModal } from '@/components/ai-builder/AIFlowBuilderModal'
 import { CreateFlowDropdown } from '@/components/common/CreateFlowDropdown'
 import { Spinner } from '@/components/common/Spinner'
 import { EmptyState } from '@/components/common/EmptyState'
@@ -83,7 +82,7 @@ export function TreeLibraryPage() {
   const [exportTarget, setExportTarget] = useState<TreeListItem | null>(null)
 
   // AI builder state
-  const [showAIBuilder, setShowAIBuilder] = useState(false)
+
   const { aiEnabled } = useCachedQuota()
 
   // Pin store
@@ -286,7 +285,7 @@ export function TreeLibraryPage() {
               <div className="flex items-center gap-2">
                 {aiEnabled && (
                   <button
-                    onClick={() => navigate('/ai/chat')}
+                    onClick={() => navigate(typeFilter === 'procedural' || typeFilter === 'maintenance' ? `/ai/chat?type=${typeFilter}` : '/ai/chat')}
                     className="flex items-center gap-2 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 transition-opacity"
                   >
                     <Sparkles className="h-4 w-4" />
@@ -302,7 +301,7 @@ export function TreeLibraryPage() {
                 </button>
                 <CreateFlowDropdown
                   aiEnabled={aiEnabled}
-                  onOpenAIBuilder={() => setShowAIBuilder(true)}
+
                   label="Create New"
                 />
               </div>
@@ -588,13 +587,6 @@ export function TreeLibraryPage() {
         isLoading={isDeleting}
       />
 
-      {/* AI Builder Modal */}
-      {showAIBuilder && (
-        <AIFlowBuilderModal
-          isOpen={showAIBuilder}
-          onClose={() => setShowAIBuilder(false)}
-        />
-      )}
 
       {forkTarget && (
         <ForkModal