feat: add AI prompt dialog and wire into CreateFlowDropdown

Replace navigation to /ai/chat with an inline AIPromptDialog modal
that collects a single prompt, generates a flow via the editor AI API,
imports it, and navigates to the editor with the AI panel open.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/common/CreateFlowDropdown.tsx

@@ -2,6 +2,11 @@ import { useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { Plus, ChevronDown, Sparkles, FolderTree, ListOrdered, Wrench } 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
@@ -16,8 +21,46 @@ export function CreateFlowDropdown({
   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.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)}>
       <button
@@ -49,7 +92,8 @@ export function CreateFlowDropdown({
                 type="button"
                 onClick={() => {
                   setShowMenu(false)
-                  navigate('/ai/chat')
+                  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"
               >
@@ -79,7 +123,8 @@ export function CreateFlowDropdown({
                 type="button"
                 onClick={() => {
                   setShowMenu(false)
-                  navigate('/ai/chat?type=procedural')
+                  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"
               >
@@ -107,6 +152,13 @@ export function CreateFlowDropdown({
           </div>
         </>
       )}
+
+      <AIPromptDialog
+        isOpen={aiPromptOpen}
+        onClose={() => setAiPromptOpen(false)}
+        onGenerate={handleAIGenerate}
+        flowType={aiPromptFlowType}
+      />
     </div>
   )
 }

frontend/src/components/editor-ai/AIPromptDialog.tsx

@@ -0,0 +1,111 @@
+import { useState } from 'react'
+import { Sparkles, Loader2, AlertCircle } from 'lucide-react'
+
+interface AIPromptDialogProps {
+  isOpen: boolean
+  onClose: () => void
+  onGenerate: (prompt: string) => Promise<void>
+  flowType: 'troubleshooting' | 'procedural' | 'maintenance'
+}
+
+const FLOW_TYPE_LABELS = {
+  troubleshooting: 'Troubleshooting Flow',
+  procedural: 'Project Flow',
+  maintenance: 'Maintenance Flow',
+}
+
+export function AIPromptDialog({
+  isOpen,
+  onClose,
+  onGenerate,
+  flowType,
+}: AIPromptDialogProps) {
+  const [prompt, setPrompt] = useState('')
+  const [isGenerating, setIsGenerating] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  if (!isOpen) return null
+
+  const handleGenerate = async () => {
+    if (!prompt.trim()) return
+    setIsGenerating(true)
+    setError(null)
+    try {
+      await onGenerate(prompt)
+      setPrompt('')
+      onClose()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Generation failed. Please try again.')
+    } finally {
+      setIsGenerating(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={() => !isGenerating && onClose()}
+      />
+
+      {/* Dialog */}
+      <div className="relative w-full max-w-lg rounded-2xl border border-border bg-card p-6 shadow-xl">
+        <div className="flex items-center gap-2 mb-4">
+          <Sparkles className="h-5 w-5 text-primary" />
+          <h2 className="text-lg font-heading font-semibold text-foreground">
+            AI-Assisted {FLOW_TYPE_LABELS[flowType]}
+          </h2>
+        </div>
+
+        <p className="text-sm text-muted-foreground mb-4">
+          Describe what you want to build and AI will generate a starting structure for you.
+        </p>
+
+        <textarea
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          placeholder={`Example: "A flow for troubleshooting VPN connectivity issues when users can't connect to the corporate network"`}
+          rows={4}
+          disabled={isGenerating}
+          className="w-full rounded-xl border border-border bg-background px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none disabled:opacity-50"
+          autoFocus
+        />
+
+        {error && (
+          <div className="mt-3 flex items-start gap-2 rounded-lg bg-rose-500/10 border border-rose-500/20 px-3 py-2">
+            <AlertCircle className="h-4 w-4 text-rose-400 mt-0.5 shrink-0" />
+            <p className="text-sm text-rose-400">{error}</p>
+          </div>
+        )}
+
+        <div className="mt-4 flex justify-end gap-3">
+          <button
+            onClick={onClose}
+            disabled={isGenerating}
+            className="rounded-[10px] bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 text-sm text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleGenerate}
+            disabled={!prompt.trim() || isGenerating}
+            className="flex items-center gap-2 rounded-[10px] bg-gradient-brand px-4 py-2 text-sm font-semibold text-[#101114] shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-50"
+          >
+            {isGenerating ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Generating...
+              </>
+            ) : (
+              <>
+                <Sparkles className="h-4 w-4" />
+                Generate
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}