feat: AI-assisted flow builder with 4-stage wizard (#87)

* feat: AI-assisted flow builder with 4-stage wizard Implements the complete AI flow builder feature using a guided 4-stage wizard (Foundation → Scaffold → Branch Detail → Review & Assemble). AI assists at bounded points using Claude Haiku for cost-efficient structured JSON generation (~$0.01-0.03/flow). Backend: new models (ai_conversations, ai_usage), Alembic migration, quota enforcement with billing anchor, Anthropic API integration with prompt caching, tree validation, conversation CRUD with 24h TTL, APScheduler cleanup job, 5 API endpoints, Pydantic schemas. Frontend: TypeScript types, API client, Zustand store for wizard state, 7 components (modal, step indicator, foundation form, branch selector, branch detail view, tree preview, quota display), MyTreesPage integration with "Build with AI" button (hidden when AI not configured). Tests: 14 validator unit tests + 11 endpoint integration tests with mocked Anthropic (zero real API spend). All 25 tests passing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: dashboard design doc and implementation plan Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: Phase 1 — pinnedFlowsStore, pagination hook, cached quota hook, sidebar refactor - Add pin() to pinnedFlowsApi - Create pinnedFlowsStore (Zustand) — single source of truth for pin state - Add dashboardMyFlowsView preference to userPreferencesStore - Create usePaginationParams hook (URL-synced) - Create useCachedQuota hook (5-min TTL) - Sidebar uses pinnedFlowsStore instead of local state Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: Phase 2 — pin/favorite buttons on all library view components - TreeGridView: star in top-right corner of cards - TreeListView: star at end of each row - TreeTableView: dedicated leftmost Favorite column - All with proper a11y (aria-label), event isolation, loading states Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: Phase 3 — Library page create dropdown + AI Builder + pin wiring - Replace single Create link with dropdown menu (3 flow types + AI Builder) - Wire pinnedFlowsStore to all view components - AI Builder modal integration via useCachedQuota hook Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: Phase 4 — Dashboard refactor with Favorites grid + paginated My Flows - Favorites section: compact grid from pinnedFlowsStore, max 2 rows, expandable - My Flows: author_id filter, URL-synced pagination (10/25/50/All) - View toggle (grid/list/table) with independent preference - Skeleton loaders, empty states with CTAs - Create dropdown with AI Builder option - 500-item ceiling for "Show All" mode Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: Phase 5 — Sidebar pinned section dual collapse + show more/less - Header collapse hides entire section, resets to 5 items on re-expand - List truncation: show first 5, "Show more (N)" expands to all - Clicking a flow auto-collapses back to 5 - Smooth max-height CSS transition (250ms ease-out) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: stabilize usePaginationParams to prevent infinite re-render loop allowedPageSizes array was recreated every render as a useMemo dep, causing infinite updates. Use useRef to stabilize the reference. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: remove Set-based Zustand selectors causing infinite re-render loop Zustand selectors returning new Set() on every call fail Object.is equality check, triggering continuous re-renders. Replaced with useMemo-derived Sets in consuming components. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: pin route ordering and star icon overlap in grid view Move GET /pinned and PATCH /pinned/reorder before GET /{tree_id} to prevent FastAPI from matching "pinned" as a UUID path parameter (422). Relocate star button from absolute positioning into the header row to avoid overlapping privacy icons and category badges. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: code review fixes — date calc, input validation, rate limits, shared components - Fix monthly_reset_at crash when billing anchor day exceeds next month's length - Add environment_tags sanitization (max 20 tags, 100 chars each) to prevent prompt injection - Add @limiter.limit("10/minute") rate limiting to all AI endpoints - Use getTreeNavigatePath() routing helper instead of hardcoded paths - Extract shared CreateFlowDropdown component from QuickStartPage and TreeLibraryPage - Clear useCachedQuota on logout to prevent stale data across user sessions - Add useRef guard to scaffold useEffect to prevent potential double-fire - Use node.id as React key instead of array index in BranchDetailView - Remove redundant dead logic in ai_tree_validator Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: correct Anthropic model ID to full dated version claude-haiku-4-5 is not a valid model alias — Anthropic requires the full dated model ID claude-haiku-4-5-20251001. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: strip markdown code fences from AI JSON responses Haiku sometimes wraps its JSON in ```json ... ``` despite the prompt instructing otherwise. Strip fences before parsing to avoid JSONDecodeError at char 0. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: increase branch_detail max_tokens to 8192 and add response logging Truncated output at 4096 tokens produces invalid JSON mid-generation. Also logs stop_reason and output_tokens per attempt to diagnose failures. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: pass explicit status='draft' when creating AI-generated flow Tree model defaults to 'published' in the DB schema, but passing status=None from the constructor overrides that default, causing a nullable=False violation and a 500 on save. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: auto-advance branch detail and pin navigation bar - Auto-advance to next undetailed branch after generation completes, using a useEffect that watches the count of detailed branches - Cap tree preview at max-h-48 with internal scroll so the nav bar is never pushed off screen - Make nav bar sticky bottom-0 with bg-card so it stays visible regardless of content height Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: increase branch retries to 3 and relax cross-reference validation on final attempt next_node_id mismatches are a common model hallucination that the retry prompt doesn't reliably fix. On the final (3rd) attempt, accept the branch with strict=False so only truly fatal errors (missing fields, dead ends, bad JSON) cause a hard failure. Cross-reference issues are minor and fixable in the tree editor. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: strengthen prompt to prevent next_node_id mismatches, keep strict validation Rather than lowering the validation bar, improve the system prompt: - Rule 6 now explicitly states next_node_id must match a direct child's id - Added rule 10: build tree bottom-up to avoid forward-reference errors - Corrective prompt now calls out the ID mismatch constraint specifically Reverts the strict=False fallback — flows must be correct before saving. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: persist branch viewing index in store to survive phase remounts Local useState resets to 0 every time phase transitions from 'generating' back to 'detailing', causing the view to snap back to branch 1. Move viewingIndex to store's currentBranchIndex (already existed) and advance it in generateBranchDetail after success. Component reads from store so remounts no longer lose position. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: correct publish validation to check title instead of action/solution fields The publish validator was checking for an 'action' field on action nodes and a 'solution' field on solution nodes, but the actual node schema (confirmed from seed data and frontend types) uses 'title'/'description'. This caused all AI-generated trees to fail publish validation. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: correct action node schema and improve AI flow quality - Fix action nodes to use next_node_id (not children) for continuation, matching how TreeNavigationPage.tsx navigates action nodes - Validator now requires next_node_id on all action nodes and flags missing ones as broken dead ends - Update _check_branch_termination: action nodes are not dead ends since they continue via next_node_id (validated separately) - Improve scaffold prompt: branch names must describe observable symptoms users can self-identify, not internal category names - Update branch_detail prompt with clearer action node schema, corrected few-shot example showing proper next_node_id on action nodes - Improve assemble_tree root question to be more user-facing Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: add AI flow builder gotchas to CLAUDE.md (#23-25) - Action nodes use next_node_id (not children) for navigation - Anthropic model IDs require full dated version string - Claude API may wrap JSON in markdown fences Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: resolve CI lint errors and httpx dependency conflict - Fix httpx version conflict: requirements-dev.txt now uses >=0.27.0 to match requirements.txt - Extract CSAT helper functions to csatUtils.ts to fix react-refresh/only-export-components - Remove default export from admin/EmptyState.tsx shim (same rule) - Fix empty catch block in Modal.tsx (no-empty) - Add eslint-disable comments for intentional setState-in-effect patterns in FlowAnalyticsPanel, QuickLaunch, NodeEditorPanel, useCachedQuota, MyAnalyticsPage, TeamAnalyticsPage - Add eslint-disable comments for intentional _children destructure in NodeEditorPanel - Fix _parentId unused var in useTreeLayout.ts - Rewrite usePaginationParams.ts to avoid reading refs during render Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: update tests to match action node schema (next_node_id, not children) - Update _make_valid_tree() in test_ai_tree_validator to use next_node_id on action nodes (solution is a sibling, not a child) - Fix test_dead_end_action_node → test_dead_end_decision_node (action nodes don't have child-based dead ends; dead ends are decision nodes with no children) - Add test_action_missing_next_node_id for the new validation rule - Update BRANCH_DETAIL_JSON in test_ai_endpoints to use next_node_id pattern - Update test_draft_trees.py to use "title" field for action/solution nodes (tree_validation.py was updated this branch to require "title" not "action"/"solution") Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: update remaining tests and session_to_tree for title field rename - test_tree_validation.py: replace "action"/"solution" content fields with "title" - test_procedural_flows.py: update solution node fixtures to use "title" - test_save_session_as_tree.py: update fixtures and assertions for "title" field - session_to_tree.py: generate "title" instead of "action"/"solution" on converted nodes; fall back to legacy field names when reading from old tree snapshots for compatibility Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-23 00:03:54 -05:00
parent aef40078d0
commit 97cd297f46
72 changed files with 5925 additions and 346 deletions
--- a/frontend/src/api/aiBuilder.ts
+++ b/frontend/src/api/aiBuilder.ts
@@ -0,0 +1,61 @@
+import { apiClient } from './client'
+import type {
+  AIQuotaStatus,
+  AIStartResponse,
+  AIScaffoldResponse,
+  AIBranchDetailResponse,
+  AIAssembleResponse,
+} from '@/types'
+
+export const aiBuilderApi = {
+  getQuota: async (): Promise<AIQuotaStatus> => {
+    const { data } = await apiClient.get('/ai/quota')
+    return data
+  },
+
+  start: async (params: {
+    flow_type: 'troubleshooting' | 'procedural'
+    name: string
+    description: string
+    environment_tags?: string[]
+    category_id?: string
+  }): Promise<AIStartResponse> => {
+    const { data } = await apiClient.post('/ai/start', params)
+    return data
+  },
+
+  scaffold: async (conversationId: string): Promise<AIScaffoldResponse> => {
+    const { data } = await apiClient.post('/ai/scaffold', {
+      conversation_id: conversationId,
+    })
+    return data
+  },
+
+  branchDetail: async (
+    conversationId: string,
+    branchName: string
+  ): Promise<AIBranchDetailResponse> => {
+    const { data } = await apiClient.post('/ai/branch-detail', {
+      conversation_id: conversationId,
+      branch_name: branchName,
+    })
+    return data
+  },
+
+  assemble: async (
+    conversationId: string,
+    selectedBranches: Array<{
+      name: string
+      description: string
+      steps?: Record<string, unknown>
+    }>
+  ): Promise<AIAssembleResponse> => {
+    const { data } = await apiClient.post('/ai/assemble', {
+      conversation_id: conversationId,
+      selected_branches: selectedBranches,
+    })
+    return data
+  },
+}
+
+export default aiBuilderApi
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -16,3 +16,4 @@ export { default as analyticsApi } from './analytics'
 export { targetListsApi } from './targetLists'
 export { maintenanceSchedulesApi, batchLaunchApi } from './maintenanceSchedules'
 export { default as feedbackApi } from './feedback'
+export { default as aiBuilderApi } from './aiBuilder'
--- a/frontend/src/api/pinnedFlows.ts
+++ b/frontend/src/api/pinnedFlows.ts
@@ -25,6 +25,10 @@ export const pinnedFlowsApi = {
  unpin: async (treeId: string): Promise<void> => {
    await apiClient.delete(`/trees/${treeId}/pin`)
  },
+
+  pin: async (treeId: string): Promise<void> => {
+    await apiClient.post(`/trees/${treeId}/pin`)
+  },
 }

 export default pinnedFlowsApi
--- a/frontend/src/components/admin/EmptyState.tsx
+++ b/frontend/src/components/admin/EmptyState.tsx
@@ -1,2 +1 @@
 export { EmptyState } from '@/components/common/EmptyState'
-export { default } from '@/components/common/EmptyState'
--- a/frontend/src/components/ai-builder/AIFlowBuilderModal.tsx
+++ b/frontend/src/components/ai-builder/AIFlowBuilderModal.tsx
@@ -0,0 +1,138 @@
+import { useEffect, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Modal } from '@/components/common/Modal'
+import { useAIFlowBuilderStore } from '@/store/aiFlowBuilderStore'
+import { treesApi } from '@/api/trees'
+import { toast } from '@/lib/toast'
+import { WizardStepIndicator } from './WizardStepIndicator'
+import { FoundationForm } from './FoundationForm'
+import { BranchSelector } from './BranchSelector'
+import { BranchDetailView } from './BranchDetailView'
+import { TreePreviewCard } from './TreePreviewCard'
+import { GeneratingAnimation } from './GeneratingAnimation'
+
+interface AIFlowBuilderModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function AIFlowBuilderModal({ isOpen, onClose }: AIFlowBuilderModalProps) {
+  const navigate = useNavigate()
+  const {
+    phase,
+    metadata,
+    assembledTree,
+    loadQuota,
+    scaffold,
+    reset,
+  } = useAIFlowBuilderStore()
+
+  // Load quota when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      loadQuota()
+    }
+  }, [isOpen, loadQuota])
+
+  // Auto-trigger scaffold after conversation starts (ref prevents double-fire)
+  const hasTriggeredScaffold = useRef(false)
+  useEffect(() => {
+    if (phase === 'scaffolding' && !hasTriggeredScaffold.current && !useAIFlowBuilderStore.getState().suggestedBranches.length) {
+      hasTriggeredScaffold.current = true
+      scaffold()
+    }
+  }, [phase, scaffold])
+
+  const handleClose = () => {
+    reset()
+    onClose()
+  }
+
+  const handleOpenInEditor = async () => {
+    if (!assembledTree) return
+    try {
+      const tree = await treesApi.create({
+        name: assembledTree.suggested_name,
+        description: assembledTree.suggested_description,
+        tree_structure: assembledTree.tree_structure,
+        tree_type: metadata.flow_type,
+        status: 'draft',
+      })
+      handleClose()
+      const editorPath =
+        metadata.flow_type === 'procedural'
+          ? `/flows/${tree.id}/edit`
+          : `/trees/${tree.id}/edit`
+      navigate(editorPath)
+    } catch {
+      toast.error('Failed to create flow. Please try again.')
+    }
+  }
+
+  const getTitle = () => {
+    switch (phase) {
+      case 'foundation':
+        return 'Build with AI'
+      case 'scaffolding':
+      case 'generating':
+        return 'AI Scaffold'
+      case 'detailing':
+        return 'Branch Detail'
+      case 'reviewing':
+        return 'Review & Assemble'
+      case 'error':
+        return 'AI Flow Builder'
+      default:
+        return 'Build with AI'
+    }
+  }
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title={getTitle()}
+      size="lg"
+      footer={
+        <WizardStepIndicator phase={phase} />
+      }
+    >
+      {phase === 'foundation' && <FoundationForm />}
+      {phase === 'scaffolding' && <BranchSelector />}
+      {phase === 'generating' && <GeneratingAnimation />}
+      {phase === 'detailing' && <BranchDetailView />}
+      {phase === 'reviewing' && (
+        <TreePreviewCard onOpenInEditor={handleOpenInEditor} />
+      )}
+      {phase === 'error' && <ErrorView />}
+    </Modal>
+  )
+}
+
+function ErrorView() {
+  const { error, reset, setPhase } = useAIFlowBuilderStore()
+
+  return (
+    <div className="flex flex-col items-center gap-4 py-8">
+      <div className="rounded-lg border border-red-400/20 bg-red-400/5 px-4 py-3 text-sm text-red-400">
+        {error || 'An unexpected error occurred.'}
+      </div>
+      <div className="flex gap-2">
+        <button
+          type="button"
+          onClick={() => setPhase('foundation')}
+          className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+        >
+          Go Back
+        </button>
+        <button
+          type="button"
+          onClick={reset}
+          className="rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
+        >
+          Start Over
+        </button>
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/components/ai-builder/BranchDetailView.tsx
+++ b/frontend/src/components/ai-builder/BranchDetailView.tsx
@@ -0,0 +1,212 @@
+import { Check, RefreshCw, SkipForward, ChevronRight, ChevronLeft } from 'lucide-react'
+import { useAIFlowBuilderStore } from '@/store/aiFlowBuilderStore'
+import { GeneratingAnimation } from './GeneratingAnimation'
+import { cn } from '@/lib/utils'
+
+export function BranchDetailView() {
+  const {
+    selectedBranches,
+    currentBranchIndex,
+    generateBranchDetail,
+    assemble,
+    isLoading,
+    error,
+    phase,
+    setError,
+  } = useAIFlowBuilderStore()
+
+  const viewingIndex = currentBranchIndex
+  const setViewingIndex = (i: number) => useAIFlowBuilderStore.setState({ currentBranchIndex: i })
+  const currentBranch = selectedBranches[viewingIndex]
+
+  const allBranchesHaveDetail = selectedBranches.every((b) => b.steps)
+  const branchesWithDetail = selectedBranches.filter((b) => b.steps).length
+
+  const handleGenerate = async (branchName: string) => {
+    setError(null)
+    await generateBranchDetail(branchName)
+  }
+
+  const handleAssemble = async () => {
+    await assemble()
+  }
+
+  if (phase === 'generating' && isLoading) {
+    return <GeneratingAnimation />
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Content area */}
+      <div className="space-y-4">
+        {/* Branch tabs */}
+        <div className="flex items-center gap-2 overflow-x-auto pb-1">
+          {selectedBranches.map((branch, i) => (
+            <button
+              key={branch.name}
+              type="button"
+              onClick={() => setViewingIndex(i)}
+              className={cn(
+                'flex shrink-0 items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors',
+                viewingIndex === i
+                  ? 'border-primary/30 bg-primary/10 text-foreground'
+                  : 'border-border text-muted-foreground hover:bg-accent',
+                branch.steps && 'pr-2'
+              )}
+            >
+              {branch.name}
+              {branch.steps && (
+                <Check className="h-3 w-3 text-green-400" />
+              )}
+            </button>
+          ))}
+        </div>
+
+        {/* Current branch detail */}
+        {currentBranch && (
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <div>
+                <h3 className="text-sm font-medium text-foreground">{currentBranch.name}</h3>
+                <p className="text-xs text-muted-foreground">{currentBranch.description}</p>
+              </div>
+            </div>
+
+            {currentBranch.steps ? (
+              <div className="space-y-3">
+                {/* Mini tree preview */}
+                <div className="max-h-48 overflow-y-auto rounded-lg border border-border bg-accent/30 p-3">
+                  <NodePreview node={currentBranch.steps} depth={0} />
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={() => handleGenerate(currentBranch.name)}
+                    disabled={isLoading}
+                    className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
+                  >
+                    <RefreshCw className="h-3 w-3" />
+                    Regenerate
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <div className="flex flex-col items-center gap-3 rounded-lg border border-dashed border-border bg-accent/20 py-8">
+                <p className="text-sm text-muted-foreground">
+                  Generate AI detail for this branch
+                </p>
+                <div className="flex gap-2">
+                  <button
+                    type="button"
+                    onClick={() => handleGenerate(currentBranch.name)}
+                    disabled={isLoading}
+                    className={cn(
+                      'rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                      isLoading ? 'cursor-not-allowed opacity-50' : 'hover:opacity-90'
+                    )}
+                  >
+                    Generate Detail
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      if (viewingIndex < selectedBranches.length - 1) {
+                        setViewingIndex(viewingIndex + 1)
+                      }
+                    }}
+                    className="flex items-center gap-1 rounded-lg border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent"
+                  >
+                    <SkipForward className="h-3.5 w-3.5" />
+                    Skip
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Error */}
+        {error && (
+          <div className="rounded-lg border border-red-400/20 bg-red-400/5 px-3 py-2 text-sm text-red-400">
+            {error}
+          </div>
+        )}
+      </div>
+
+      {/* Navigation — sticky so it's always visible */}
+      <div className="sticky bottom-0 flex items-center justify-between border-t border-border bg-card pt-3 pb-1">
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => setViewingIndex(Math.max(0, viewingIndex - 1))}
+            disabled={viewingIndex === 0}
+            className="flex items-center gap-1 rounded-lg border border-border px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent disabled:opacity-30"
+          >
+            <ChevronLeft className="h-3.5 w-3.5" />
+            Previous
+          </button>
+          <button
+            type="button"
+            onClick={() =>
+              setViewingIndex(Math.min(selectedBranches.length - 1, viewingIndex + 1))
+            }
+            disabled={viewingIndex === selectedBranches.length - 1}
+            className="flex items-center gap-1 rounded-lg border border-border px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent disabled:opacity-30"
+          >
+            Next
+            <ChevronRight className="h-3.5 w-3.5" />
+          </button>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <span className="text-xs text-muted-foreground">
+            {branchesWithDetail}/{selectedBranches.length} detailed
+          </span>
+          <button
+            type="button"
+            onClick={handleAssemble}
+            disabled={!allBranchesHaveDetail || isLoading}
+            className={cn(
+              'rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+              allBranchesHaveDetail && !isLoading
+                ? 'hover:opacity-90'
+                : 'cursor-not-allowed opacity-50'
+            )}
+          >
+            Assemble Tree
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/** Recursive mini-preview of a node tree */
+function NodePreview({ node, depth }: { node: Record<string, unknown>; depth: number }) {
+  const type = node.type as string
+  const label =
+    type === 'decision'
+      ? (node.question as string)
+      : (node.title as string) || 'Untitled'
+  const children = (node.children as Record<string, unknown>[]) || []
+
+  const typeColors: Record<string, string> = {
+    decision: 'bg-blue-400',
+    action: 'bg-amber-400',
+    solution: 'bg-green-400',
+  }
+
+  return (
+    <div style={{ marginLeft: depth * 16 }}>
+      <div className="flex items-center gap-2 py-0.5">
+        <div className={cn('h-2 w-2 rounded-full', typeColors[type] || 'bg-muted-foreground')} />
+        <span className="text-xs text-foreground truncate">{label}</span>
+        <span className="text-[10px] font-label text-muted-foreground">{type}</span>
+      </div>
+      {children.map((child) => (
+        <NodePreview key={child.id as string ?? crypto.randomUUID()} node={child} depth={depth + 1} />
+      ))}
+    </div>
+  )
+}
--- a/frontend/src/components/ai-builder/BranchSelector.tsx
+++ b/frontend/src/components/ai-builder/BranchSelector.tsx
@@ -0,0 +1,280 @@
+import { useState } from 'react'
+import { GripVertical, Plus, X, Pencil, Check } from 'lucide-react'
+import { useAIFlowBuilderStore } from '@/store/aiFlowBuilderStore'
+import { cn } from '@/lib/utils'
+import type { AIBranch } from '@/types'
+
+export function BranchSelector() {
+  const {
+    suggestedBranches,
+    selectedBranches,
+    selectBranches,
+    setPhase,
+    error,
+  } = useAIFlowBuilderStore()
+
+  const [editingIndex, setEditingIndex] = useState<number | null>(null)
+  const [editName, setEditName] = useState('')
+  const [editDesc, setEditDesc] = useState('')
+  const [showAddForm, setShowAddForm] = useState(false)
+  const [newName, setNewName] = useState('')
+  const [newDesc, setNewDesc] = useState('')
+
+  const toggleBranch = (branch: AIBranch) => {
+    const isSelected = selectedBranches.some((b) => b.name === branch.name)
+    if (isSelected) {
+      selectBranches(selectedBranches.filter((b) => b.name !== branch.name))
+    } else {
+      selectBranches([...selectedBranches, branch])
+    }
+  }
+
+  const startEditing = (index: number) => {
+    const branch = selectedBranches[index]
+    setEditingIndex(index)
+    setEditName(branch.name)
+    setEditDesc(branch.description)
+  }
+
+  const saveEdit = () => {
+    if (editingIndex === null || !editName.trim()) return
+    const updated = [...selectedBranches]
+    updated[editingIndex] = {
+      ...updated[editingIndex],
+      name: editName.trim(),
+      description: editDesc.trim(),
+    }
+    selectBranches(updated)
+    setEditingIndex(null)
+  }
+
+  const addCustomBranch = () => {
+    if (!newName.trim()) return
+    const branch: AIBranch = {
+      name: newName.trim(),
+      description: newDesc.trim(),
+      isCustom: true,
+    }
+    selectBranches([...selectedBranches, branch])
+    setNewName('')
+    setNewDesc('')
+    setShowAddForm(false)
+  }
+
+  const moveBranch = (fromIndex: number, direction: 'up' | 'down') => {
+    const toIndex = direction === 'up' ? fromIndex - 1 : fromIndex + 1
+    if (toIndex < 0 || toIndex >= selectedBranches.length) return
+    const updated = [...selectedBranches]
+    ;[updated[fromIndex], updated[toIndex]] = [updated[toIndex], updated[fromIndex]]
+    selectBranches(updated)
+  }
+
+  const canProceed = selectedBranches.length >= 2
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <p className="text-sm text-muted-foreground">
+          AI suggested {suggestedBranches.length} branches. Select, reorder, rename, or add your own.
+        </p>
+      </div>
+
+      {/* Branch list */}
+      <div className="space-y-2">
+        {suggestedBranches.map((branch) => {
+          const isSelected = selectedBranches.some((b) => b.name === branch.name)
+          const selectedIndex = selectedBranches.findIndex((b) => b.name === branch.name)
+
+          return (
+            <div
+              key={branch.name}
+              className={cn(
+                'flex items-start gap-3 rounded-lg border p-3 transition-colors cursor-pointer',
+                isSelected
+                  ? 'border-primary/30 bg-primary/5'
+                  : 'border-border bg-card hover:bg-accent/50'
+              )}
+              onClick={() => toggleBranch(branch)}
+            >
+              <div
+                className={cn(
+                  'mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded border',
+                  isSelected
+                    ? 'border-primary bg-primary text-white'
+                    : 'border-border'
+                )}
+              >
+                {isSelected && <Check className="h-3 w-3" />}
+              </div>
+              <div className="flex-1 min-w-0">
+                {editingIndex !== null && selectedIndex === editingIndex ? (
+                  <div className="space-y-2" onClick={(e) => e.stopPropagation()}>
+                    <input
+                      type="text"
+                      value={editName}
+                      onChange={(e) => setEditName(e.target.value)}
+                      className="w-full rounded border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none"
+                      autoFocus
+                    />
+                    <input
+                      type="text"
+                      value={editDesc}
+                      onChange={(e) => setEditDesc(e.target.value)}
+                      className="w-full rounded border border-border bg-card px-2 py-1 text-xs text-muted-foreground focus:border-primary focus:outline-none"
+                    />
+                    <div className="flex gap-1">
+                      <button
+                        type="button"
+                        onClick={saveEdit}
+                        className="rounded bg-primary px-2 py-0.5 text-xs text-white"
+                      >
+                        Save
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setEditingIndex(null)}
+                        className="rounded border border-border px-2 py-0.5 text-xs text-muted-foreground"
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  </div>
+                ) : (
+                  <>
+                    <div className="text-sm font-medium text-foreground">{branch.name}</div>
+                    <div className="text-xs text-muted-foreground">{branch.description}</div>
+                  </>
+                )}
+              </div>
+              {isSelected && editingIndex !== selectedIndex && (
+                <div className="flex items-center gap-0.5" onClick={(e) => e.stopPropagation()}>
+                  <button
+                    type="button"
+                    onClick={() => moveBranch(selectedIndex, 'up')}
+                    disabled={selectedIndex === 0}
+                    className="rounded p-1 text-muted-foreground hover:text-foreground disabled:opacity-30"
+                    title="Move up"
+                  >
+                    <GripVertical className="h-3.5 w-3.5" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => startEditing(selectedIndex)}
+                    className="rounded p-1 text-muted-foreground hover:text-foreground"
+                    title="Edit"
+                  >
+                    <Pencil className="h-3.5 w-3.5" />
+                  </button>
+                </div>
+              )}
+            </div>
+          )
+        })}
+
+        {/* Custom branches (not in suggested) */}
+        {selectedBranches
+          .filter((b) => b.isCustom)
+          .map((branch, i) => {
+            return (
+              <div
+                key={`custom-${i}`}
+                className="flex items-start gap-3 rounded-lg border border-primary/30 bg-primary/5 p-3"
+              >
+                <div className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded border border-primary bg-primary text-white">
+                  <Check className="h-3 w-3" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-medium text-foreground">{branch.name}</div>
+                  <div className="text-xs text-muted-foreground">{branch.description}</div>
+                  <span className="mt-1 inline-block rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-label text-primary">
+                    Custom
+                  </span>
+                </div>
+                <button
+                  type="button"
+                  onClick={() =>
+                    selectBranches(selectedBranches.filter((b) => b.name !== branch.name))
+                  }
+                  className="rounded p-1 text-muted-foreground hover:text-red-400"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </button>
+              </div>
+            )
+          })}
+      </div>
+
+      {/* Add custom branch */}
+      {showAddForm ? (
+        <div className="space-y-2 rounded-lg border border-dashed border-border p-3">
+          <input
+            type="text"
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            placeholder="Branch name"
+            className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none"
+            autoFocus
+          />
+          <input
+            type="text"
+            value={newDesc}
+            onChange={(e) => setNewDesc(e.target.value)}
+            placeholder="Brief description"
+            className="w-full rounded border border-border bg-card px-2 py-1.5 text-xs text-muted-foreground placeholder:text-muted-foreground/60 focus:border-primary focus:outline-none"
+          />
+          <div className="flex gap-1">
+            <button
+              type="button"
+              onClick={addCustomBranch}
+              disabled={!newName.trim()}
+              className="rounded bg-primary px-2.5 py-1 text-xs text-white disabled:opacity-50"
+            >
+              Add
+            </button>
+            <button
+              type="button"
+              onClick={() => setShowAddForm(false)}
+              className="rounded border border-border px-2.5 py-1 text-xs text-muted-foreground"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={() => setShowAddForm(true)}
+          className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
+        >
+          <Plus className="h-4 w-4" />
+          Add custom branch
+        </button>
+      )}
+
+      {/* Error */}
+      {error && (
+        <div className="rounded-lg border border-red-400/20 bg-red-400/5 px-3 py-2 text-sm text-red-400">
+          {error}
+        </div>
+      )}
+
+      {/* Footer */}
+      <div className="flex items-center justify-between pt-2">
+        <span className="text-xs text-muted-foreground">
+          {selectedBranches.length} branch{selectedBranches.length !== 1 ? 'es' : ''} selected (min 2)
+        </span>
+        <button
+          type="button"
+          onClick={() => setPhase('detailing')}
+          disabled={!canProceed}
+          className={cn(
+            'rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+            canProceed ? 'hover:opacity-90' : 'cursor-not-allowed opacity-50'
+          )}
+        >
+          Continue to Detail
+        </button>
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/components/ai-builder/FoundationForm.tsx
+++ b/frontend/src/components/ai-builder/FoundationForm.tsx
@@ -0,0 +1,163 @@
+import { useState } from 'react'
+import { useAIFlowBuilderStore } from '@/store/aiFlowBuilderStore'
+import { QuotaDisplay } from './QuotaDisplay'
+import { cn } from '@/lib/utils'
+
+export function FoundationForm() {
+  const { metadata, setMetadata, quota, start, isLoading, error } = useAIFlowBuilderStore()
+  const [tagInput, setTagInput] = useState('')
+
+  const canSubmit =
+    metadata.name.trim().length > 0 &&
+    metadata.description.trim().length > 0 &&
+    !isLoading &&
+    (quota?.allowed !== false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!canSubmit) return
+    await start()
+  }
+
+  const addTag = () => {
+    const tag = tagInput.trim()
+    if (tag && !metadata.environment_tags.includes(tag)) {
+      setMetadata({ environment_tags: [...metadata.environment_tags, tag] })
+    }
+    setTagInput('')
+  }
+
+  const removeTag = (tag: string) => {
+    setMetadata({ environment_tags: metadata.environment_tags.filter((t) => t !== tag) })
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-5">
+      {quota && <QuotaDisplay quota={quota} />}
+
+      {/* Flow Type */}
+      <div>
+        <label className="mb-2 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
+          Flow Type
+        </label>
+        <div className="flex gap-2">
+          {(['troubleshooting', 'procedural'] as const).map((type) => (
+            <button
+              key={type}
+              type="button"
+              onClick={() => setMetadata({ flow_type: type })}
+              className={cn(
+                'flex-1 rounded-lg border px-3 py-2.5 text-sm font-medium transition-colors',
+                metadata.flow_type === type
+                  ? 'border-primary/30 bg-primary/10 text-foreground'
+                  : 'border-border bg-card text-muted-foreground hover:bg-accent'
+              )}
+            >
+              {type === 'troubleshooting' ? 'Troubleshooting' : 'Procedural'}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Name */}
+      <div>
+        <label className="mb-2 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
+          Flow Name
+        </label>
+        <input
+          type="text"
+          value={metadata.name}
+          onChange={(e) => setMetadata({ name: e.target.value })}
+          placeholder="e.g. DNS Resolution Failures"
+          className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+          maxLength={255}
+        />
+      </div>
+
+      {/* Description */}
+      <div>
+        <label className="mb-2 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
+          Description
+        </label>
+        <textarea
+          value={metadata.description}
+          onChange={(e) => setMetadata({ description: e.target.value })}
+          placeholder="Describe what this flow covers. The more detail you provide, the better the AI suggestions will be."
+          rows={4}
+          className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20 resize-none"
+          maxLength={2000}
+        />
+        <p className="mt-1 text-right text-[10px] text-muted-foreground">
+          {metadata.description.length}/2000
+        </p>
+      </div>
+
+      {/* Environment Tags */}
+      <div>
+        <label className="mb-2 block font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
+          Environment Tags <span className="normal-case tracking-normal text-muted-foreground/60">(optional)</span>
+        </label>
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={tagInput}
+            onChange={(e) => setTagInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault()
+                addTag()
+              }
+            }}
+            placeholder="e.g. Windows Server, Active Directory"
+            className="flex-1 rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+          />
+          <button
+            type="button"
+            onClick={addTag}
+            className="rounded-lg border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            Add
+          </button>
+        </div>
+        {metadata.environment_tags.length > 0 && (
+          <div className="mt-2 flex flex-wrap gap-1.5">
+            {metadata.environment_tags.map((tag) => (
+              <span
+                key={tag}
+                className="inline-flex items-center gap-1 rounded-full bg-card border border-border px-2.5 py-0.5 font-label text-xs text-muted-foreground"
+              >
+                {tag}
+                <button
+                  type="button"
+                  onClick={() => removeTag(tag)}
+                  className="ml-0.5 text-muted-foreground/60 hover:text-foreground"
+                >
+                  &times;
+                </button>
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Error */}
+      {error && (
+        <div className="rounded-lg border border-red-400/20 bg-red-400/5 px-3 py-2 text-sm text-red-400">
+          {error}
+        </div>
+      )}
+
+      {/* Submit */}
+      <button
+        type="submit"
+        disabled={!canSubmit}
+        className={cn(
+          'w-full rounded-lg bg-gradient-brand py-2.5 text-sm font-medium text-white shadow-lg shadow-primary/20',
+          canSubmit ? 'hover:opacity-90' : 'cursor-not-allowed opacity-50'
+        )}
+      >
+        {isLoading ? 'Creating...' : 'Continue to AI Scaffold'}
+      </button>
+    </form>
+  )
+}
--- a/frontend/src/components/ai-builder/GeneratingAnimation.tsx
+++ b/frontend/src/components/ai-builder/GeneratingAnimation.tsx
@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react'
+import { Sparkles } from 'lucide-react'
+
+const MESSAGES = [
+  'Analyzing your flow requirements...',
+  'Building decision paths...',
+  'Generating troubleshooting logic...',
+  'Crafting resolution steps...',
+  'Structuring the flow...',
+]
+
+export function GeneratingAnimation() {
+  const [messageIndex, setMessageIndex] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setMessageIndex((prev) => (prev + 1) % MESSAGES.length)
+    }, 3000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 py-12">
+      <div className="relative">
+        <div className="h-12 w-12 animate-spin rounded-full border-4 border-border border-t-primary" />
+        <Sparkles className="absolute left-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 text-primary" />
+      </div>
+      <p className="text-sm text-muted-foreground animate-pulse">
+        {MESSAGES[messageIndex]}
+      </p>
+    </div>
+  )
+}
--- a/frontend/src/components/ai-builder/QuotaDisplay.tsx
+++ b/frontend/src/components/ai-builder/QuotaDisplay.tsx
@@ -0,0 +1,48 @@
+import { cn } from '@/lib/utils'
+import type { AIQuotaStatus } from '@/types'
+
+interface QuotaDisplayProps {
+  quota: AIQuotaStatus
+  compact?: boolean
+}
+
+export function QuotaDisplay({ quota, compact = false }: QuotaDisplayProps) {
+  if (!quota.ai_enabled) return null
+
+  const monthlyRemaining =
+    quota.monthly_limit !== null
+      ? Math.max(0, quota.monthly_limit - quota.monthly_used)
+      : null
+
+  const getColor = () => {
+    if (!quota.allowed) return 'text-red-400'
+    if (monthlyRemaining !== null && monthlyRemaining <= 1) return 'text-amber-400'
+    return 'text-green-400'
+  }
+
+  if (compact) {
+    return (
+      <span className={cn('text-xs font-label', getColor())}>
+        {monthlyRemaining !== null
+          ? `${monthlyRemaining}/${quota.monthly_limit} builds`
+          : 'Unlimited'}
+      </span>
+    )
+  }
+
+  return (
+    <div className="flex items-center gap-2 rounded-lg border border-border bg-accent/50 px-3 py-1.5">
+      <div className={cn('h-2 w-2 rounded-full', getColor().replace('text-', 'bg-'))} />
+      <span className="text-xs text-muted-foreground">
+        {monthlyRemaining !== null ? (
+          <>
+            <span className={cn('font-medium', getColor())}>{monthlyRemaining}</span>
+            {' '}of {quota.monthly_limit} AI builds remaining
+          </>
+        ) : (
+          'Unlimited AI builds'
+        )}
+      </span>
+    </div>
+  )
+}
--- a/frontend/src/components/ai-builder/TreePreviewCard.tsx
+++ b/frontend/src/components/ai-builder/TreePreviewCard.tsx
@@ -0,0 +1,85 @@
+import { GitBranch, Layers, CheckCircle, ArrowRight, RotateCcw } from 'lucide-react'
+import { useAIFlowBuilderStore } from '@/store/aiFlowBuilderStore'
+import { cn } from '@/lib/utils'
+
+interface TreePreviewCardProps {
+  onOpenInEditor: () => void
+}
+
+export function TreePreviewCard({ onOpenInEditor }: TreePreviewCardProps) {
+  const { assembledTree, reset, isLoading } = useAIFlowBuilderStore()
+
+  if (!assembledTree) return null
+
+  const { summary } = assembledTree
+
+  const stats = [
+    { label: 'Nodes', value: summary.node_count, icon: Layers },
+    { label: 'Decisions', value: summary.decision_count, icon: GitBranch },
+    { label: 'Solutions', value: summary.solution_count, icon: CheckCircle },
+    { label: 'Depth', value: summary.depth, icon: Layers },
+  ]
+
+  return (
+    <div className="space-y-4">
+      <div className="text-center">
+        <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-green-400/10">
+          <CheckCircle className="h-6 w-6 text-green-400" />
+        </div>
+        <h3 className="text-lg font-semibold text-foreground">
+          Tree Assembled
+        </h3>
+        <p className="mt-1 text-sm text-muted-foreground">
+          &quot;{assembledTree.suggested_name}&quot; is ready to review in the editor.
+        </p>
+      </div>
+
+      {/* Stats grid */}
+      <div className="grid grid-cols-4 gap-2">
+        {stats.map(({ label, value, icon: Icon }) => (
+          <div
+            key={label}
+            className="flex flex-col items-center rounded-lg border border-border bg-accent/30 p-2.5"
+          >
+            <Icon className="mb-1 h-4 w-4 text-muted-foreground" />
+            <span className="text-lg font-semibold text-gradient-brand">{value}</span>
+            <span className="text-[10px] font-label uppercase tracking-wide text-muted-foreground">
+              {label}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* Description */}
+      {assembledTree.suggested_description && (
+        <div className="rounded-lg border border-border bg-accent/20 p-3">
+          <p className="text-xs text-muted-foreground">{assembledTree.suggested_description}</p>
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="flex gap-2">
+        <button
+          type="button"
+          onClick={onOpenInEditor}
+          disabled={isLoading}
+          className={cn(
+            'flex flex-1 items-center justify-center gap-2 rounded-lg bg-gradient-brand py-2.5 text-sm font-medium text-white shadow-lg shadow-primary/20',
+            'hover:opacity-90'
+          )}
+        >
+          <ArrowRight className="h-4 w-4" />
+          Open in Editor
+        </button>
+        <button
+          type="button"
+          onClick={reset}
+          className="flex items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+        >
+          <RotateCcw className="h-4 w-4" />
+          Start Over
+        </button>
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/components/ai-builder/WizardStepIndicator.tsx
+++ b/frontend/src/components/ai-builder/WizardStepIndicator.tsx
@@ -0,0 +1,70 @@
+import { Check } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { AIWizardPhase } from '@/types'
+
+const STEPS = [
+  { key: 'foundation', label: 'Foundation' },
+  { key: 'scaffolding', label: 'Scaffold' },
+  { key: 'detailing', label: 'Detail' },
+  { key: 'reviewing', label: 'Review' },
+] as const
+
+const PHASE_ORDER: Record<string, number> = {
+  foundation: 0,
+  scaffolding: 1,
+  generating: 1,
+  detailing: 2,
+  reviewing: 3,
+  completed: 4,
+  error: -1,
+}
+
+interface WizardStepIndicatorProps {
+  phase: AIWizardPhase
+}
+
+export function WizardStepIndicator({ phase }: WizardStepIndicatorProps) {
+  const currentIndex = PHASE_ORDER[phase] ?? 0
+
+  return (
+    <div className="flex items-center gap-1 px-2">
+      {STEPS.map((step, i) => {
+        const isCompleted = currentIndex > i
+        const isCurrent = currentIndex === i
+
+        return (
+          <div key={step.key} className="flex items-center gap-1">
+            {i > 0 && (
+              <div
+                className={cn(
+                  'h-px w-4 sm:w-6',
+                  isCompleted ? 'bg-primary' : 'bg-border'
+                )}
+              />
+            )}
+            <div className="flex items-center gap-1.5">
+              <div
+                className={cn(
+                  'flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-medium',
+                  isCompleted && 'bg-primary text-white',
+                  isCurrent && 'bg-primary/20 text-primary ring-1 ring-primary/40',
+                  !isCompleted && !isCurrent && 'bg-accent text-muted-foreground'
+                )}
+              >
+                {isCompleted ? <Check className="h-3 w-3" /> : i + 1}
+              </div>
+              <span
+                className={cn(
+                  'hidden text-xs sm:inline',
+                  isCurrent ? 'font-medium text-foreground' : 'text-muted-foreground'
+                )}
+              >
+                {step.label}
+              </span>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
--- a/frontend/src/components/analytics/FlowAnalyticsPanel.tsx
+++ b/frontend/src/components/analytics/FlowAnalyticsPanel.tsx
@@ -37,7 +37,9 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
  const [error, setError] = useState(false)

  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
    setLoading(true)
+    // eslint-disable-next-line react-hooks/set-state-in-effect
    setError(false)
    analyticsApi
      .getFlowAnalytics(treeId, period)
--- a/frontend/src/components/common/CreateFlowDropdown.tsx
+++ b/frontend/src/components/common/CreateFlowDropdown.tsx
@@ -0,0 +1,93 @@
+import { useState } from 'react'
+import { Link } 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
+}
+
+export function CreateFlowDropdown({
+  aiEnabled,
+  onOpenAIBuilder,
+  className,
+  label = 'Create Flow',
+}: CreateFlowDropdownProps) {
+  const [showMenu, setShowMenu] = useState(false)
+
+  return (
+    <div className={cn('relative', className)}>
+      <button
+        onClick={() => setShowMenu(!showMenu)}
+        className="flex items-center gap-2 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-primary/20 hover:opacity-90 transition-opacity"
+      >
+        <Plus size={16} />
+        {label}
+        <ChevronDown size={14} />
+      </button>
+      {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">
+            <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="font-medium">Troubleshooting Tree</div>
+                <div className="text-xs text-muted-foreground">Branching decision flow</div>
+              </div>
+            </Link>
+            <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="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={() => 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="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">Build with AI</div>
+                    <div className="text-xs text-muted-foreground">AI-assisted flow creation</div>
+                  </div>
+                </button>
+              </>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
--- a/frontend/src/components/common/Modal.tsx
+++ b/frontend/src/components/common/Modal.tsx
@@ -29,7 +29,9 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
    setIsFullScreen(next)
    try {
      localStorage.setItem('rf-editor-fullscreen', String(next))
-    } catch {}
+    } catch {
+      // localStorage unavailable — ignore
+    }
  }

  // Close on Escape key
--- a/frontend/src/components/layout/QuickLaunch.tsx
+++ b/frontend/src/components/layout/QuickLaunch.tsx
@@ -40,6 +40,7 @@ export function QuickLaunch({ open, onClose }: QuickLaunchProps) {

  useEffect(() => {
    if (open) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
      setSelectedIndex(0)
      treesApi.list({ sort_by: 'updated_at' })
        .then(trees => setRecentTrees(trees.slice(0, 4)))
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -2,32 +2,36 @@ import { useEffect, useState } from 'react'
 import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, BarChart3, Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { useUserPreferencesStore } from '@/store/userPreferencesStore'
+import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore'
 import { PinnedFlowsSection } from '@/components/sidebar/PinnedFlowsSection'
 import { NavItem } from './NavItem'
 import { sessionsApi, treesApi } from '@/api'
-import { pinnedFlowsApi } from '@/api/pinnedFlows'
-import type { PinnedFlow } from '@/api/pinnedFlows'
-import { toast } from '@/lib/toast'

 export function Sidebar() {
  const sidebarCollapsed = useUserPreferencesStore(s => s.sidebarCollapsed)
  const toggleSidebar = useUserPreferencesStore(s => s.toggleSidebar)

+  const pinnedItems = usePinnedFlowsStore((s) => s.items)
+  const loadPinned = usePinnedFlowsStore((s) => s.load)
+  const unpinFlow = usePinnedFlowsStore((s) => s.unpin)
+
  const [activeSessionCount, setActiveSessionCount] = useState(0)
-  const [pinnedFlows, setPinnedFlows] = useState<PinnedFlow[]>([])
  const [treeCounts, setTreeCounts] = useState({ total: 0, troubleshooting: 0, procedural: 0, maintenance: 0 })

+  // Load pinned flows on mount
+  useEffect(() => {
+    loadPinned()
+  }, [loadPinned])
+
  // Fetch sidebar data on mount
  useEffect(() => {
    const fetchData = async () => {
      try {
-        const [activeSessions, allTrees, pinnedData] = await Promise.all([
+        const [activeSessions, allTrees] = await Promise.all([
          sessionsApi.list({ completed: false, size: 50 }).catch(() => []),
          treesApi.list({ sort_by: 'name' }).catch(() => []),
-          pinnedFlowsApi.list().catch(() => ({ items: [], count: 0 })),
        ])
        setActiveSessionCount(activeSessions.length)
-        setPinnedFlows(pinnedData.items)

        const total = allTrees.length
        const troubleshooting = allTrees.filter(t => t.tree_type === 'troubleshooting').length
@@ -41,16 +45,6 @@ export function Sidebar() {
    fetchData()
  }, [])

-  const handleUnpin = async (treeId: string) => {
-    try {
-      await pinnedFlowsApi.unpin(treeId)
-      setPinnedFlows(prev => prev.filter(f => f.tree_id !== treeId))
-      toast.success('Unpinned from sidebar')
-    } catch {
-      toast.error('Failed to unpin flow')
-    }
-  }
-
  const handleSidebarWheel = (e: React.WheelEvent<HTMLElement>) => {
    const sidebar = e.currentTarget
    const canSidebarScroll = sidebar.scrollHeight > sidebar.clientHeight
@@ -89,7 +83,7 @@ export function Sidebar() {
      ) : (
        <>
          {/* Pinned Flows */}
-          <PinnedFlowsSection flows={pinnedFlows} onUnpin={handleUnpin} />
+          <PinnedFlowsSection flows={pinnedItems} onUnpin={unpinFlow} />

          <div className="border-b border-[hsl(var(--border-subtle))]" />

--- a/frontend/src/components/library/TreeGridView.tsx
+++ b/frontend/src/components/library/TreeGridView.tsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom'
-import { Pencil, Globe, Lock, Trash2, GitBranch, FileText, Wrench } from 'lucide-react'
+import { Pencil, Globe, Lock, Trash2, GitBranch, FileText, Wrench, Star } from 'lucide-react'
 import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
 import { cn } from '@/lib/utils'
@@ -13,6 +13,9 @@ interface TreeGridViewProps {
  onFolderCreated: (parentId?: string | null) => void
  onDeleteTree: (tree: TreeListItem) => void
  onForkTree?: (treeId: string) => void
+  pinnedTreeIds?: Set<string>
+  onTogglePin?: (treeId: string) => void
+  pinLoadingTreeIds?: Set<string>
 }

 export function TreeGridView({
@@ -21,6 +24,9 @@ export function TreeGridView({
  onTagClick,
  onDeleteTree,
  onForkTree,
+  pinnedTreeIds,
+  onTogglePin,
+  pinLoadingTreeIds,
 }: TreeGridViewProps) {
  const { canEditTree, canDeleteTree } = usePermissions()

@@ -29,7 +35,7 @@ export function TreeGridView({
      {trees.map((tree) => (
        <div
          key={tree.id}
-          className="bg-card border border-border rounded-2xl p-4 transition-all hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md sm:p-6"
+          className="relative bg-card border border-border rounded-2xl p-4 transition-all hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md sm:p-6"
        >
          <div className="mb-2 flex items-start justify-between gap-2">
            <div className="flex items-center gap-2">
@@ -48,6 +54,26 @@ export function TreeGridView({
              )}
            </div>
            <div className="flex items-center gap-2">
+              {onTogglePin && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    onTogglePin(tree.id)
+                  }}
+                  disabled={pinLoadingTreeIds?.has(tree.id)}
+                  aria-label={pinnedTreeIds?.has(tree.id) ? 'Remove from favorites' : 'Add to favorites'}
+                  className={cn(
+                    'rounded-md p-1 transition-colors',
+                    pinnedTreeIds?.has(tree.id)
+                      ? 'text-amber-400 hover:text-amber-300'
+                      : 'text-muted-foreground/40 hover:text-amber-400',
+                    pinLoadingTreeIds?.has(tree.id) && 'opacity-50 pointer-events-none'
+                  )}
+                >
+                  <Star size={14} fill={pinnedTreeIds?.has(tree.id) ? 'currentColor' : 'none'} />
+                </button>
+              )}
              {tree.is_public ? (
                <span title="Public tree">
                  <Globe className="h-4 w-4 text-muted-foreground" />
--- a/frontend/src/components/library/TreeListView.tsx
+++ b/frontend/src/components/library/TreeListView.tsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom'
-import { Pencil, Globe, Lock, GitBranch, FileText, Trash2, Wrench } from 'lucide-react'
+import { Pencil, Globe, Lock, GitBranch, FileText, Trash2, Wrench, Star } from 'lucide-react'
 import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
 import { cn } from '@/lib/utils'
@@ -13,6 +13,9 @@ interface TreeListViewProps {
  onFolderCreated: (parentId?: string | null) => void
  onDeleteTree: (tree: TreeListItem) => void
  onForkTree?: (treeId: string) => void
+  pinnedTreeIds?: Set<string>
+  onTogglePin?: (treeId: string) => void
+  pinLoadingTreeIds?: Set<string>
 }

 export function TreeListView({
@@ -21,6 +24,9 @@ export function TreeListView({
  onTagClick,
  onDeleteTree,
  onForkTree,
+  pinnedTreeIds,
+  onTogglePin,
+  pinLoadingTreeIds,
 }: TreeListViewProps) {
  const { canEditTree } = usePermissions()

@@ -84,6 +90,26 @@ export function TreeListView({
            </div>

            <div className="flex items-center gap-2">
+              {onTogglePin && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    onTogglePin(tree.id)
+                  }}
+                  disabled={pinLoadingTreeIds?.has(tree.id)}
+                  aria-label={pinnedTreeIds?.has(tree.id) ? 'Remove from favorites' : 'Add to favorites'}
+                  className={cn(
+                    'shrink-0 rounded-md p-1 transition-colors',
+                    pinnedTreeIds?.has(tree.id)
+                      ? 'text-amber-400 hover:text-amber-300'
+                      : 'text-muted-foreground/40 hover:text-amber-400',
+                    pinLoadingTreeIds?.has(tree.id) && 'opacity-50 pointer-events-none'
+                  )}
+                >
+                  <Star size={16} fill={pinnedTreeIds?.has(tree.id) ? 'currentColor' : 'none'} />
+                </button>
+              )}
              {onForkTree && (
                <button
                  type="button"
--- a/frontend/src/components/library/TreeTableView.tsx
+++ b/frontend/src/components/library/TreeTableView.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Link } from 'react-router-dom'
-import { Pencil, Globe, Lock, ChevronUp, ChevronDown, GitBranch, FileText, Trash2, Wrench } from 'lucide-react'
+import { Pencil, Globe, Lock, ChevronUp, ChevronDown, GitBranch, FileText, Trash2, Wrench, Star } from 'lucide-react'
 import type { TreeListItem } from '@/types'
 import { TagBadges } from '@/components/common/TagBadges'
 import { cn } from '@/lib/utils'
@@ -15,6 +15,9 @@ interface TreeTableViewProps {
  onDeleteTree: (tree: TreeListItem) => void
  onSortChange?: (sortBy: string) => void
  onForkTree?: (treeId: string) => void
+  pinnedTreeIds?: Set<string>
+  onTogglePin?: (treeId: string) => void
+  pinLoadingTreeIds?: Set<string>
 }

 type SortColumn = 'name' | 'category' | 'version' | 'usage' | 'updated'
@@ -26,6 +29,9 @@ export function TreeTableView({
  onDeleteTree,
  onSortChange,
  onForkTree,
+  pinnedTreeIds,
+  onTogglePin,
+  pinLoadingTreeIds,
 }: TreeTableViewProps) {
  const { canEditTree } = usePermissions()
  const [sortColumn, setSortColumn] = useState<SortColumn | null>(null)
@@ -73,6 +79,11 @@ export function TreeTableView({
      <table className="w-full">
        <thead className="bg-accent/50 sticky top-0 z-10">
          <tr className="border-b border-border">
+            {onTogglePin && (
+              <th className="w-10 px-2 py-3 text-center">
+                <Star size={14} className="inline text-muted-foreground" />
+              </th>
+            )}
            <th
              className="px-4 py-3 text-left text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
              onClick={() => handleSort('name')}
@@ -132,6 +143,28 @@ export function TreeTableView({
        <tbody className="bg-transparent">
          {trees.map((tree) => (
            <tr key={tree.id} className="border-b border-border last:border-0 hover:bg-accent/50">
+              {onTogglePin && (
+                <td className="w-10 px-2 py-3 text-center">
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      e.preventDefault()
+                      onTogglePin(tree.id)
+                    }}
+                    disabled={pinLoadingTreeIds?.has(tree.id)}
+                    aria-label={pinnedTreeIds?.has(tree.id) ? 'Remove from favorites' : 'Add to favorites'}
+                    className={cn(
+                      'rounded-md p-1 transition-colors',
+                      pinnedTreeIds?.has(tree.id)
+                        ? 'text-amber-400 hover:text-amber-300'
+                        : 'text-muted-foreground/40 hover:text-amber-400',
+                      pinLoadingTreeIds?.has(tree.id) && 'opacity-50 pointer-events-none'
+                    )}
+                  >
+                    <Star size={14} fill={pinnedTreeIds?.has(tree.id) ? 'currentColor' : 'none'} />
+                  </button>
+                </td>
+              )}
              <td className="px-4 py-3">
                <div className="flex items-center gap-2">
                  <span className="font-medium text-foreground truncate max-w-[200px]">
--- a/frontend/src/components/session/CSATModal.tsx
+++ b/frontend/src/components/session/CSATModal.tsx
@@ -3,6 +3,7 @@ import { Star } from 'lucide-react'
 import { Modal } from '@/components/common/Modal'
 import { analyticsApi } from '@/api'
 import { cn } from '@/lib/utils'
+import { markSessionRated } from './csatUtils'

 interface CSATModalProps {
  isOpen: boolean
@@ -10,26 +11,6 @@ interface CSATModalProps {
  sessionId: string
 }

-const RATED_SESSIONS_KEY = 'rf-rated-sessions'
-
-function getRatedSessions(): string[] {
-  try {
-    return JSON.parse(localStorage.getItem(RATED_SESSIONS_KEY) || '[]')
-  } catch {
-    return []
-  }
-}
-
-function markSessionRated(sessionId: string) {
-  const rated = getRatedSessions()
-  rated.push(sessionId)
-  localStorage.setItem(RATED_SESSIONS_KEY, JSON.stringify(rated.slice(-100)))
-}
-
-export function hasBeenRated(sessionId: string): boolean {
-  return getRatedSessions().includes(sessionId)
-}
-
 export function CSATModal({ isOpen, onClose, sessionId }: CSATModalProps) {
  const [rating, setRating] = useState(0)
  const [hoveredRating, setHoveredRating] = useState(0)
--- a/frontend/src/components/session/csatUtils.ts
+++ b/frontend/src/components/session/csatUtils.ts
@@ -0,0 +1,19 @@
+const RATED_SESSIONS_KEY = 'rf-rated-sessions'
+
+export function getRatedSessions(): string[] {
+  try {
+    return JSON.parse(localStorage.getItem(RATED_SESSIONS_KEY) || '[]')
+  } catch {
+    return []
+  }
+}
+
+export function markSessionRated(sessionId: string) {
+  const rated = getRatedSessions()
+  rated.push(sessionId)
+  localStorage.setItem(RATED_SESSIONS_KEY, JSON.stringify(rated.slice(-100)))
+}
+
+export function hasBeenRated(sessionId: string): boolean {
+  return getRatedSessions().includes(sessionId)
+}
--- a/frontend/src/components/sidebar/PinnedFlowsSection.tsx
+++ b/frontend/src/components/sidebar/PinnedFlowsSection.tsx
@@ -10,51 +10,89 @@ interface PinnedFlowsSectionProps {
  onUnpin: (treeId: string) => void
 }

+const TRUNCATE_COUNT = 5
+
 export function PinnedFlowsSection({ flows, onUnpin }: PinnedFlowsSectionProps) {
  const navigate = useNavigate()
  const [collapsed, setCollapsed] = useState(false)
+  const [showAll, setShowAll] = useState(false)
+
+  const handleToggleCollapse = () => {
+    if (collapsed) {
+      setShowAll(false) // Reset to truncated on re-expand
+    }
+    setCollapsed(!collapsed)
+  }
+
+  const visibleFlows = showAll ? flows : flows.slice(0, TRUNCATE_COUNT)
+  const hasMore = flows.length > TRUNCATE_COUNT
+
+  const handleFlowClick = (flow: PinnedFlow) => {
+    setShowAll(false) // Collapse back to 5 on navigation
+    navigate(getTreeNavigatePath(flow.tree_id, flow.tree_type))
+  }

  return (
    <div className="px-3 py-2">
      <button
-        onClick={() => setCollapsed(!collapsed)}
+        onClick={handleToggleCollapse}
        className="flex w-full items-center gap-1 px-3 mb-1 font-heading text-[0.6875rem] font-bold uppercase tracking-[0.04em] text-muted-foreground hover:text-foreground transition-colors"
      >
        {collapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
        Pinned
+        {flows.length > 0 && (
+          <span className="ml-auto text-[0.625rem] font-normal">{flows.length}</span>
+        )}
      </button>

-      {!collapsed && (
-        <div className="space-y-0.5 max-h-[280px] overflow-y-auto">
+      <div
+        className="overflow-hidden transition-[max-height] duration-[250ms] ease-out"
+        style={{
+          maxHeight: collapsed ? 0 : showAll
+            ? `${flows.length * 36 + 40}px`
+            : `${Math.min(flows.length, TRUNCATE_COUNT) * 36 + 40}px`,
+        }}
+      >
+        <div className="space-y-0.5">
          {flows.length === 0 ? (
            <p className="px-3 py-2 text-xs text-muted-foreground">
              Pin your most-used flows here
            </p>
          ) : (
-            flows.map(flow => (
-              <button
-                key={flow.tree_id}
-                onClick={() => navigate(getTreeNavigatePath(flow.tree_id, flow.tree_type))}
-                onContextMenu={(e) => {
-                  e.preventDefault()
-                  onUnpin(flow.tree_id)
-                }}
-                className={cn(
-                  'group flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
-                  'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
-                )}
-                title={`${flow.tree_name} (right-click to unpin)`}
-              >
-                <span className="text-sm shrink-0">
-                  {flow.tree_type === 'procedural' ? '📋' : flow.tree_type === 'maintenance' ? '🛠️' : '🔧'}
-                </span>
-                <span className="truncate flex-1 text-left">{flow.tree_name}</span>
-                <Pin size={12} className="shrink-0 opacity-0 group-hover:opacity-40 transition-opacity" />
-              </button>
-            ))
+            <>
+              {visibleFlows.map(flow => (
+                <button
+                  key={flow.tree_id}
+                  onClick={() => handleFlowClick(flow)}
+                  onContextMenu={(e) => {
+                    e.preventDefault()
+                    onUnpin(flow.tree_id)
+                  }}
+                  className={cn(
+                    'group flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
+                    'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+                  )}
+                  title={`${flow.tree_name} (right-click to unpin)`}
+                >
+                  <span className="text-sm shrink-0">
+                    {flow.tree_type === 'procedural' ? '📋' : flow.tree_type === 'maintenance' ? '🛠️' : '🔧'}
+                  </span>
+                  <span className="truncate flex-1 text-left">{flow.tree_name}</span>
+                  <Pin size={12} className="shrink-0 opacity-0 group-hover:opacity-40 transition-opacity" />
+                </button>
+              ))}
+              {hasMore && (
+                <button
+                  onClick={() => setShowAll(!showAll)}
+                  className="w-full px-3 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors text-left"
+                >
+                  {showAll ? 'Show less' : `Show more (${flows.length})`}
+                </button>
+              )}
+            </>
          )}
        </div>
-      )}
+      </div>
    </div>
  )
 }
--- a/frontend/src/components/tree-editor/NodeEditorPanel.tsx
+++ b/frontend/src/components/tree-editor/NodeEditorPanel.tsx
@@ -21,6 +21,7 @@ const TYPE_CONFIG: Record<Exclude<NodeType, 'answer'>, { icon: typeof HelpCircle
 }

 function cloneWithoutChildren(node: TreeStructure): TreeStructure {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const { children: _children, ...rest } = node
  return structuredClone(rest) as TreeStructure
 }
@@ -44,8 +45,11 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
  // (e.g., answer stub → decision/action/solution via type picker)
  useEffect(() => {
    if (node) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
      setDraft(cloneWithoutChildren(node))
+      // eslint-disable-next-line react-hooks/set-state-in-effect
      setIsDirty(false)
+      // eslint-disable-next-line react-hooks/set-state-in-effect
      setShowDeleteConfirm(false)
    }
  }, [nodeId, node?.type]) // eslint-disable-line react-hooks/exhaustive-deps
@@ -57,6 +61,7 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan

  const handleSave = useCallback(() => {
    if (!draft || !node) return
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const { children: _children, ...draftWithoutChildren } = draft
    updateNode(nodeId, draftWithoutChildren)

--- a/frontend/src/components/tree-editor/useTreeLayout.ts
+++ b/frontend/src/components/tree-editor/useTreeLayout.ts
@@ -60,6 +60,7 @@ export function useTreeLayout(): UseTreeLayoutResult {

    if (!treeStructure) return { rawNodes: nodes, rawEdges: edges }

+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    function walk(node: TreeStructure, _parentId?: string | null) {
      const isCollapsed = collapsedNodeIds.has(node.id)
      const hasChildren = (node.children?.length ?? 0) > 0
--- a/frontend/src/hooks/useCachedQuota.ts
+++ b/frontend/src/hooks/useCachedQuota.ts
@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react'
+import { aiBuilderApi } from '@/api'
+
+const CACHE_TTL_MS = 5 * 60 * 1000
+
+let cachedResult: { aiEnabled: boolean; timestamp: number } | null = null
+
+/** Clear the cached quota (call on logout to prevent stale data across users). */
+export function clearCachedQuota() {
+  cachedResult = null
+}
+
+export function useCachedQuota() {
+  const [aiEnabled, setAiEnabled] = useState(cachedResult?.aiEnabled ?? false)
+  const [isLoading, setIsLoading] = useState(!cachedResult)
+
+  useEffect(() => {
+    if (cachedResult && Date.now() - cachedResult.timestamp < CACHE_TTL_MS) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setAiEnabled(cachedResult.aiEnabled)
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setIsLoading(false)
+      return
+    }
+
+    setIsLoading(true)
+    aiBuilderApi
+      .getQuota()
+      .then((q) => {
+        cachedResult = { aiEnabled: q.ai_enabled, timestamp: Date.now() }
+        setAiEnabled(q.ai_enabled)
+      })
+      .catch(() => {})
+      .finally(() => setIsLoading(false))
+  }, [])
+
+  return { aiEnabled, isLoading }
+}
--- a/frontend/src/hooks/usePaginationParams.ts
+++ b/frontend/src/hooks/usePaginationParams.ts
@@ -0,0 +1,60 @@
+import { useSearchParams } from 'react-router-dom'
+import { useCallback, useMemo } from 'react'
+
+type PageSize = number | 'all'
+
+interface UsePaginationParamsOptions {
+  defaultPageSize?: number
+  allowedPageSizes?: PageSize[]
+}
+
+const DEFAULT_ALLOWED: PageSize[] = [10, 25, 50, 'all']
+
+export function usePaginationParams(options: UsePaginationParamsOptions = {}) {
+  const { defaultPageSize = 10, allowedPageSizes = DEFAULT_ALLOWED } = options
+
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const page = useMemo(() => {
+    const raw = searchParams.get('page')
+    const n = raw ? parseInt(raw, 10) : 1
+    return Number.isFinite(n) && n >= 1 ? n : 1
+  }, [searchParams])
+
+  const pageSize = useMemo((): PageSize => {
+    const raw = searchParams.get('size')
+    if (raw === 'all' && allowedPageSizes.includes('all')) return 'all'
+    const n = raw ? parseInt(raw, 10) : defaultPageSize
+    if (Number.isFinite(n) && allowedPageSizes.includes(n)) return n
+    return defaultPageSize
+  }, [searchParams, defaultPageSize, allowedPageSizes])
+
+  const setPage = useCallback(
+    (newPage: number) => {
+      setSearchParams((prev) => {
+        const next = new URLSearchParams(prev)
+        if (newPage <= 1) {
+          next.delete('page')
+        } else {
+          next.set('page', String(newPage))
+        }
+        return next
+      })
+    },
+    [setSearchParams]
+  )
+
+  const setPageSize = useCallback(
+    (newSize: PageSize) => {
+      setSearchParams((prev) => {
+        const next = new URLSearchParams(prev)
+        next.set('size', String(newSize))
+        next.delete('page')
+        return next
+      })
+    },
+    [setSearchParams]
+  )
+
+  return { page, pageSize, setPage, setPageSize }
+}
--- a/frontend/src/pages/MyAnalyticsPage.tsx
+++ b/frontend/src/pages/MyAnalyticsPage.tsx
@@ -35,6 +35,7 @@ export default function MyAnalyticsPage() {
  const [loading, setLoading] = useState(true)

  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
    setLoading(true)
    analyticsApi
      .getPersonalAnalytics(period)
--- 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, FolderTree, Plus, ListOrdered, ChevronDown, Wrench, Sparkles } from 'lucide-react'
 import { treesApi } from '@/api/trees'
 import { sessionsApi } from '@/api/sessions'
 import type { TreeListItem } from '@/types'
@@ -12,6 +12,8 @@ import { cn } from '@/lib/utils'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
 import { toast } from '@/lib/toast'
+import { AIFlowBuilderModal } from '@/components/ai-builder/AIFlowBuilderModal'
+import { aiBuilderApi } from '@/api/aiBuilder'

 interface TreeWithStats extends TreeListItem {
  lastUsed?: string
@@ -32,11 +34,17 @@ export function MyTreesPage() {
  const [treeToShare, setTreeToShare] = useState<TreeWithStats | null>(null)
  const [showShareModal, setShowShareModal] = useState(false)
  const [showCreateMenu, setShowCreateMenu] = useState(false)
+  const [showAIBuilder, setShowAIBuilder] = useState(false)
+  const [aiEnabled, setAiEnabled] = useState(false)

  useEffect(() => {
    loadMyTrees()
  }, [user?.id])

+  useEffect(() => {
+    aiBuilderApi.getQuota().then((q) => setAiEnabled(q.ai_enabled)).catch(() => {})
+  }, [])
+
  const loadMyTrees = async () => {
    if (!user?.id) return
    setIsLoading(true)
@@ -168,6 +176,25 @@ export function MyTreesPage() {
                      <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={() => {
+                          setShowCreateMenu(false)
+                          setShowAIBuilder(true)
+                        }}
+                        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">Build with AI</div>
+                          <div className="text-xs text-muted-foreground">AI-assisted flow creation</div>
+                        </div>
+                      </button>
+                    </>
+                  )}
                </div>
              </>
            )}
@@ -373,6 +400,12 @@ export function MyTreesPage() {
          }}
        />
      )}
+
+      {/* AI Flow Builder Modal */}
+      <AIFlowBuilderModal
+        isOpen={showAIBuilder}
+        onClose={() => setShowAIBuilder(false)}
+      />
    </div>
  )
 }
--- a/frontend/src/pages/ProceduralNavigationPage.tsx
+++ b/frontend/src/pages/ProceduralNavigationPage.tsx
@@ -14,7 +14,8 @@ import { Spinner } from '@/components/common/Spinner'
 import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
 import { StepFeedback } from '@/components/session/StepFeedback'
-import { CSATModal, hasBeenRated } from '@/components/session/CSATModal'
+import { CSATModal } from '@/components/session/CSATModal'
+import { hasBeenRated } from '@/components/session/csatUtils'

 interface StepState {
  notes: string
--- a/frontend/src/pages/QuickStartPage.tsx
+++ b/frontend/src/pages/QuickStartPage.tsx
@@ -1,17 +1,26 @@
-import { useState, useEffect, useRef } from 'react'
-import { useNavigate, Link } from 'react-router-dom'
-import { Search, Plus, Loader2 } from 'lucide-react'
+import { useState, useEffect, useRef, useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Search, Loader2, Star, ChevronLeft, ChevronRight } from 'lucide-react'
 import { treesApi } from '@/api/trees'
 import { sessionsApi } from '@/api/sessions'
 import type { TreeListItem } from '@/types'
 import type { Session } from '@/types/session'
 import { getTreeNavigatePath } from '@/lib/routing'
 import { usePermissions } from '@/hooks/usePermissions'
+import { useAuthStore } from '@/store/authStore'
+import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore'
+import { useUserPreferencesStore } from '@/store/userPreferencesStore'
+import { usePaginationParams } from '@/hooks/usePaginationParams'
+import { useCachedQuota } from '@/hooks/useCachedQuota'
 import { QuickStats } from '@/components/dashboard/QuickStats'
-import { FiltersBar } from '@/components/dashboard/FiltersBar'
-import { SectionGroup } from '@/components/dashboard/SectionGroup'
 import { SessionsPanel } from '@/components/dashboard/SessionsPanel'
-import { TreeListItem as TreeListItemComponent } from '@/components/dashboard/TreeListItem'
+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'

 function timeAgo(dateStr: string): string {
  const now = Date.now()
@@ -30,7 +39,9 @@ function timeAgo(dateStr: string): string {
 export function QuickStartPage() {
  const navigate = useNavigate()
  const { canCreateTrees } = usePermissions()
+  const user = useAuthStore((s) => s.user)

+  // Search state
  const [query, setQuery] = useState('')
  const [searchResults, setSearchResults] = useState<TreeListItem[]>([])
  const [isSearching, setIsSearching] = useState(false)
@@ -38,34 +49,110 @@ export function QuickStartPage() {
  const searchRef = useRef<HTMLDivElement>(null)
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)

-  const [trees, setTrees] = useState<TreeListItem[]>([])
+  // Sessions state
  const [activeSessions, setActiveSessions] = useState<Session[]>([])
  const [allSessions, setAllSessions] = useState<Session[]>([])
-  const [isLoading, setIsLoading] = useState(true)

-  const [activeFilter, setActiveFilter] = useState('all')
+  // My Flows state
+  const [myFlows, setMyFlows] = useState<TreeListItem[]>([])
+  const [isLoadingFlows, setIsLoadingFlows] = useState(true)
+  const [hasNextPage, setHasNextPage] = useState(false)
+  const [allFlowsCeiling, setAllFlowsCeiling] = useState(false)

-  // Load data on mount
+  // Favorites state
+  const [showAllFavorites, setShowAllFavorites] = useState(false)
+
+  // AI Builder
+  const [showAIBuilder, setShowAIBuilder] = useState(false)
+  const { aiEnabled } = useCachedQuota()
+
+  // Pin store
+  const pinnedItems = usePinnedFlowsStore((s) => s.items)
+  const pinnedIsLoading = usePinnedFlowsStore((s) => s.isLoading)
+  const loadPinned = usePinnedFlowsStore((s) => s.load)
+  const isMutatingByTreeId = usePinnedFlowsStore((s) => s.isMutatingByTreeId)
+  const togglePin = usePinnedFlowsStore((s) => s.toggle)
+
+  const pinnedTreeIds = useMemo(() => new Set(pinnedItems.map((f) => f.tree_id)), [pinnedItems])
+  const pinLoadingTreeIds = useMemo(
+    () => new Set(Object.entries(isMutatingByTreeId).filter(([, v]) => v).map(([k]) => k)),
+    [isMutatingByTreeId]
+  )
+
+  // Preferences
+  const { dashboardMyFlowsView, setDashboardMyFlowsView } = useUserPreferencesStore()
+
+  // Pagination
+  const { page, pageSize, setPage, setPageSize } = usePaginationParams({
+    defaultPageSize: 10,
+    allowedPageSizes: [10, 25, 50, 'all'],
+  })
+
+  // Load pinned flows
+  useEffect(() => { loadPinned() }, [loadPinned])
+
+  // Load sessions on mount
  useEffect(() => {
-    async function loadData() {
-      try {
-        const [treeList, active, recent] = await Promise.all([
-          treesApi.list({ sort_by: 'updated_at' }),
-          sessionsApi.list({ completed: false, size: 5 }),
-          sessionsApi.list({ size: 10 }),
-        ])
-        setTrees(treeList)
-        setActiveSessions(active)
-        setAllSessions(recent)
-      } catch (err) {
-        console.error('Failed to load dashboard data:', err)
-      } finally {
-        setIsLoading(false)
-      }
-    }
-    loadData()
+    Promise.all([
+      sessionsApi.list({ completed: false, size: 5 }).catch(() => []),
+      sessionsApi.list({ size: 10 }).catch(() => []),
+    ]).then(([active, recent]) => {
+      setActiveSessions(active)
+      setAllSessions(recent)
+    })
  }, [])

+  // Load my flows when page/size or user changes
+  useEffect(() => {
+    if (!user?.id) return
+
+    const loadFlows = async () => {
+      setIsLoadingFlows(true)
+      setAllFlowsCeiling(false)
+
+      if (pageSize === 'all') {
+        // Fetch in chunks of 100, max 500
+        let allItems: TreeListItem[] = []
+        let skip = 0
+        const CHUNK = 100
+        const MAX = 500
+
+        while (true) {
+          const chunk = await treesApi.list({
+            author_id: user.id,
+            sort_by: 'updated_at',
+            limit: CHUNK,
+            skip,
+          })
+          allItems = [...allItems, ...chunk]
+          if (chunk.length < CHUNK || allItems.length >= MAX) {
+            if (allItems.length >= MAX) {
+              allItems = allItems.slice(0, MAX)
+              setAllFlowsCeiling(true)
+            }
+            break
+          }
+          skip += CHUNK
+        }
+        setMyFlows(allItems)
+        setHasNextPage(false)
+      } else {
+        const numSize = pageSize as number
+        const response = await treesApi.list({
+          author_id: user.id,
+          sort_by: 'updated_at',
+          limit: numSize + 1,
+          skip: (page - 1) * numSize,
+        })
+        setHasNextPage(response.length > numSize)
+        setMyFlows(response.slice(0, numSize))
+      }
+      setIsLoadingFlows(false)
+    }
+
+    loadFlows().catch(() => setIsLoadingFlows(false))
+  }, [user?.id, page, pageSize])
+
  // Debounced search
  useEffect(() => {
    if (debounceRef.current) clearTimeout(debounceRef.current)
@@ -90,7 +177,7 @@ export function QuickStartPage() {
    return () => { if (debounceRef.current) clearTimeout(debounceRef.current) }
  }, [query])

-  // Close dropdown on outside click
+  // Close search dropdown on outside click
  useEffect(() => {
    function handleClick(e: MouseEvent) {
      if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
@@ -101,8 +188,7 @@ export function QuickStartPage() {
    return () => document.removeEventListener('mousedown', handleClick)
  }, [])

-  // Compute stats
-  const totalTrees = trees.length
+  // Stats
  const openSessions = activeSessions.length
  const todaySessions = allSessions.filter(s => {
    const d = new Date(s.started_at)
@@ -111,14 +197,6 @@ export function QuickStartPage() {
  }).length
  const completedSessions = allSessions.filter(s => s.completed_at).length

-  // Filter trees
-  const filteredTrees = activeFilter === 'all'
-    ? trees
-    : activeFilter === 'recent'
-      ? trees.slice(0, 10)
-      : trees
-
-  // Map sessions for SessionsPanel
  const recentSessionItems = allSessions.slice(0, 5).map(s => ({
    id: s.id,
    treeName: s.tree_snapshot?.name || 'Unknown',
@@ -127,12 +205,22 @@ export function QuickStartPage() {
    timeAgo: timeAgo(s.started_at),
  }))

-  const filters = [
-    { id: 'all', label: 'All' },
-    { id: 'recent', label: 'Recently Used' },
-    { id: 'my', label: 'My Flows' },
-    { id: 'team', label: 'Team Flows' },
-  ]
+  // Favorites display
+  const MAX_VISIBLE_FAVORITES = 8
+  const visibleFavorites = showAllFavorites ? pinnedItems : pinnedItems.slice(0, MAX_VISIBLE_FAVORITES)
+  const hasMoreFavorites = pinnedItems.length > MAX_VISIBLE_FAVORITES
+
+  // Handlers
+  const handleStartSession = (treeId: string, treeType?: string) => {
+    navigate(getTreeNavigatePath(treeId, treeType))
+  }
+
+  const handleDeleteTree = () => {} // Not used on dashboard
+  const handleTagClick = () => {} // Not used on dashboard
+  const handleFolderCreated = () => {} // Not used on dashboard
+
+  // Page size options
+  const pageSizeOptions: (number | 'all')[] = [10, 25, 50, 'all']

  return (
    <div className="p-6 space-y-6">
@@ -148,13 +236,10 @@ export function QuickStartPage() {
        </div>
        <div className="flex items-center gap-2">
          {canCreateTrees && (
-            <Link
-              to="/trees/new"
-              className="flex items-center gap-2 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-primary/20 hover:opacity-90 transition-opacity"
-            >
-              <Plus size={16} />
-              Create Flow
-            </Link>
+            <CreateFlowDropdown
+              aiEnabled={aiEnabled}
+              onOpenAIBuilder={() => setShowAIBuilder(true)}
+            />
          )}
        </div>
      </div>
@@ -162,17 +247,14 @@ export function QuickStartPage() {
      {/* Quick Stats */}
      <QuickStats
        stats={[
-          { label: 'Active Flows', value: totalTrees, gradient: true },
+          { label: 'My Flows', value: myFlows.length, gradient: true },
          { label: 'Sessions Today', value: todaySessions, color: '#f59e0b' },
          { label: 'Open Sessions', value: openSessions, meta: `${completedSessions} completed` },
-          { label: 'Docs Generated', value: completedSessions },
+          { label: 'Favorites', value: pinnedItems.length },
        ]}
      />

-      {/* Filters */}
-      <FiltersBar filters={filters} activeFilter={activeFilter} onFilterChange={setActiveFilter} />
-
-      {/* Search (inline, not hero) */}
+      {/* Search */}
      <div ref={searchRef} className="relative">
        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
        <input
@@ -215,39 +297,212 @@ export function QuickStartPage() {
      {/* Recent Sessions */}
      <SessionsPanel sessions={recentSessionItems} delay={150} />

-      {/* Tree/Flow List */}
-      {isLoading ? (
-        <div className="flex justify-center py-12">
-          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-        </div>
-      ) : (
-        <SectionGroup
-          title="All Flows"
-          count={filteredTrees.length}
-          delay={200}
-        >
-          {filteredTrees.slice(0, 20).map(tree => (
-            <TreeListItemComponent
-              key={tree.id}
-              id={tree.id}
-              name={tree.name}
-              description={tree.description}
-              treeType={tree.tree_type || 'troubleshooting'}
-              category={tree.category_info ? { name: tree.category_info.name, color: undefined } : null}
-              tags={tree.tags}
-              usageCount={tree.usage_count}
-              updatedAt={tree.updated_at}
-            />
-          ))}
-          {filteredTrees.length > 20 && (
-            <Link
-              to="/trees"
-              className="block rounded-lg border border-border bg-card px-4 py-3 text-center text-sm text-muted-foreground hover:text-foreground hover:border-border/80 transition-colors"
+      {/* Favorites Section */}
+      <div>
+        <div className="mb-3 flex items-center justify-between">
+          <h2 className="font-heading text-lg font-semibold text-foreground">
+            Favorites
+            {pinnedItems.length > 0 && (
+              <span className="ml-2 text-sm font-normal text-muted-foreground">({pinnedItems.length})</span>
+            )}
+          </h2>
+          {hasMoreFavorites && (
+            <button
+              onClick={() => setShowAllFavorites(!showAllFavorites)}
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
-              View all {filteredTrees.length} flows →
-            </Link>
+              {showAllFavorites ? 'Show less' : 'View all favorites'}
+            </button>
          )}
-        </SectionGroup>
+        </div>
+        {pinnedIsLoading ? (
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <div key={i} className="h-20 rounded-xl bg-card border border-border animate-pulse" />
+            ))}
+          </div>
+        ) : pinnedItems.length === 0 ? (
+          <p className="text-sm text-muted-foreground py-4">
+            Star a flow to pin it here for quick access.
+          </p>
+        ) : (
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
+            {visibleFavorites.map((flow) => (
+              <button
+                key={flow.tree_id}
+                onClick={() => navigate(getTreeNavigatePath(flow.tree_id, flow.tree_type))}
+                className="group relative flex items-center gap-3 rounded-xl bg-card border border-border p-4 text-left transition-colors hover:border-border/80 hover:bg-accent/50"
+              >
+                <span className="text-lg shrink-0">
+                  {flow.tree_type === 'procedural' ? '📋' : flow.tree_type === 'maintenance' ? '🛠️' : '🔧'}
+                </span>
+                <span className="truncate text-sm font-medium text-foreground">{flow.tree_name}</span>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    togglePin(flow.tree_id)
+                  }}
+                  aria-label="Remove from favorites"
+                  className="absolute top-2 right-2 rounded-md p-1 text-amber-400 opacity-0 group-hover:opacity-100 hover:text-amber-300 transition-all"
+                >
+                  <Star size={14} fill="currentColor" />
+                </button>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* My Flows Section */}
+      <div>
+        <div className="mb-3 flex items-center justify-between">
+          <h2 className="font-heading text-lg font-semibold text-foreground">My Flows</h2>
+          <div className="flex items-center gap-2">
+            <ViewToggle view={dashboardMyFlowsView} onChange={setDashboardMyFlowsView} />
+          </div>
+        </div>
+
+        {isLoadingFlows ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} className="h-32 rounded-xl bg-card border border-border animate-pulse" />
+            ))}
+          </div>
+        ) : myFlows.length === 0 ? (
+          <div className="py-12 text-center">
+            <p className="text-muted-foreground mb-4">You haven&apos;t created any flows yet.</p>
+            {canCreateTrees && (
+              <CreateFlowDropdown
+                aiEnabled={aiEnabled}
+                onOpenAIBuilder={() => setShowAIBuilder(true)}
+                label="Create your first flow"
+              />
+            )}
+          </div>
+        ) : (
+          <>
+            {allFlowsCeiling && (
+              <p className="mb-3 text-sm text-muted-foreground">
+                Showing first 500 flows. Use search or filters to find specific flows.
+              </p>
+            )}
+
+            {dashboardMyFlowsView === 'grid' && (
+              <TreeGridView
+                trees={myFlows}
+                onStartSession={handleStartSession}
+                onTagClick={handleTagClick}
+                onFolderCreated={handleFolderCreated}
+                onDeleteTree={handleDeleteTree}
+                pinnedTreeIds={pinnedTreeIds}
+                onTogglePin={togglePin}
+                pinLoadingTreeIds={pinLoadingTreeIds}
+              />
+            )}
+            {dashboardMyFlowsView === 'list' && (
+              <TreeListView
+                trees={myFlows}
+                onStartSession={handleStartSession}
+                onTagClick={handleTagClick}
+                onFolderCreated={handleFolderCreated}
+                onDeleteTree={handleDeleteTree}
+                pinnedTreeIds={pinnedTreeIds}
+                onTogglePin={togglePin}
+                pinLoadingTreeIds={pinLoadingTreeIds}
+              />
+            )}
+            {dashboardMyFlowsView === 'table' && (
+              <TreeTableView
+                trees={myFlows}
+                onStartSession={handleStartSession}
+                onTagClick={handleTagClick}
+                onFolderCreated={handleFolderCreated}
+                onDeleteTree={handleDeleteTree}
+                pinnedTreeIds={pinnedTreeIds}
+                onTogglePin={togglePin}
+                pinLoadingTreeIds={pinLoadingTreeIds}
+              />
+            )}
+
+            {/* Pagination controls */}
+            {pageSize !== 'all' && (
+              <div className="mt-4 flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => setPage(page - 1)}
+                    disabled={page <= 1}
+                    className={cn(
+                      'flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm transition-colors',
+                      page <= 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-accent'
+                    )}
+                  >
+                    <ChevronLeft size={14} />
+                    Prev
+                  </button>
+                  <span className="text-sm text-muted-foreground">Page {page}</span>
+                  <button
+                    onClick={() => setPage(page + 1)}
+                    disabled={!hasNextPage}
+                    className={cn(
+                      'flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm transition-colors',
+                      !hasNextPage ? 'opacity-50 cursor-not-allowed' : 'hover:bg-accent'
+                    )}
+                  >
+                    Next
+                    <ChevronRight size={14} />
+                  </button>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-sm text-muted-foreground">Show:</span>
+                  <select
+                    value={String(pageSize)}
+                    onChange={(e) => {
+                      const val = e.target.value
+                      setPageSize(val === 'all' ? 'all' : parseInt(val, 10))
+                    }}
+                    className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none"
+                  >
+                    {pageSizeOptions.map((opt) => (
+                      <option key={String(opt)} value={String(opt)}>
+                        {opt === 'all' ? 'All' : opt}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+            )}
+            {pageSize === 'all' && (
+              <div className="mt-4 flex items-center justify-end">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm text-muted-foreground">Show:</span>
+                  <select
+                    value="all"
+                    onChange={(e) => {
+                      const val = e.target.value
+                      setPageSize(val === 'all' ? 'all' : parseInt(val, 10))
+                    }}
+                    className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none"
+                  >
+                    {pageSizeOptions.map((opt) => (
+                      <option key={String(opt)} value={String(opt)}>
+                        {opt === 'all' ? 'All' : opt}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* AI Builder Modal */}
+      {showAIBuilder && (
+        <AIFlowBuilderModal
+          isOpen={showAIBuilder}
+          onClose={() => setShowAIBuilder(false)}
+        />
      )}
    </div>
  )
--- a/frontend/src/pages/TeamAnalyticsPage.tsx
+++ b/frontend/src/pages/TeamAnalyticsPage.tsx
@@ -37,6 +37,7 @@ export default function TeamAnalyticsPage() {
  useEffect(() => {
    if (!isAccountOwner && !isSuperAdmin) return

+    // eslint-disable-next-line react-hooks/set-state-in-effect
    setLoading(true)
    analyticsApi
      .getTeamAnalytics(period)
--- a/frontend/src/pages/TreeLibraryPage.tsx
+++ b/frontend/src/pages/TreeLibraryPage.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useState, useCallback } from 'react'
-import { useNavigate, Link, useSearchParams } from 'react-router-dom'
-import { Plus, X, RotateCcw, Play } from 'lucide-react'
+import { useEffect, useState, useCallback, useMemo } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { X, RotateCcw, Play } from 'lucide-react'
 import { treesApi } from '@/api/trees'
 import { categoriesApi } from '@/api/categories'
 import { foldersApi } from '@/api/folders'
@@ -14,9 +14,13 @@ import { TreeTableView } from '@/components/library/TreeTableView'
 import { ViewToggle } from '@/components/library/ViewToggle'
 import { SortDropdown } from '@/components/library/SortDropdown'
 import { cn, safeGetItem } from '@/lib/utils'
-import { getSessionResumePath } from '@/lib/routing'
+import { getSessionResumePath, getTreeNavigatePath } from '@/lib/routing'
 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 { toast } from '@/lib/toast'

 export function TreeLibraryPage() {
@@ -69,6 +73,21 @@ export function TreeLibraryPage() {
  // Fork state
  const [isForkingTree, setIsForkingTree] = useState(false)

+  // AI builder state
+  const [showAIBuilder, setShowAIBuilder] = useState(false)
+  const { aiEnabled } = useCachedQuota()
+
+  // Pin store
+  const pinnedItems = usePinnedFlowsStore((s) => s.items)
+  const isMutatingByTreeId = usePinnedFlowsStore((s) => s.isMutatingByTreeId)
+  const pinnedTreeIds = useMemo(() => new Set(pinnedItems.map((f) => f.tree_id)), [pinnedItems])
+  const pinLoadingTreeIds = useMemo(
+    () => new Set(Object.entries(isMutatingByTreeId).filter(([, v]) => v).map(([k]) => k)),
+    [isMutatingByTreeId]
+  )
+  const togglePin = usePinnedFlowsStore((s) => s.toggle)
+  const loadPinned = usePinnedFlowsStore((s) => s.load)
+
  // Repeat Last Session
  const lastSessionData = (() => {
    const raw = safeGetItem('last-session')
@@ -102,6 +121,9 @@ export function TreeLibraryPage() {
      .catch((err) => console.error('Failed to load incomplete sessions:', err))
  }, [])

+  // Load pinned flows
+  useEffect(() => { loadPinned() }, [loadPinned])
+
  const dismissSession = (sessionId: string) => {
    const next = new Set(dismissedSessionIds)
    next.add(sessionId)
@@ -193,13 +215,7 @@ export function TreeLibraryPage() {
  }

  const handleStartSession = (treeId: string, treeType?: string) => {
-    if (treeType === 'maintenance') {
-      navigate(`/flows/${treeId}/maintenance`)
-    } else if (treeType === 'procedural') {
-      navigate(`/flows/${treeId}/navigate`)
-    } else {
-      navigate(`/trees/${treeId}/navigate`)
-    }
+    navigate(getTreeNavigatePath(treeId, treeType))
  }

  const handleCreateFolder = (parentId?: string | null) => {
@@ -263,16 +279,11 @@ export function TreeLibraryPage() {
              </p>
            </div>
            {canCreateTrees && (
-              <Link
-                to={typeFilter === 'procedural' ? '/flows/new' : typeFilter === 'maintenance' ? '/flows/new?type=maintenance' : '/trees/new'}
-                className={cn(
-                  'flex items-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                  'hover:opacity-90'
-                )}
-              >
-                <Plus className="h-4 w-4" />
-                {typeFilter === 'procedural' ? 'New Project' : typeFilter === 'maintenance' ? 'New Maintenance Flow' : 'Create Flow'}
-              </Link>
+              <CreateFlowDropdown
+                aiEnabled={aiEnabled}
+                onOpenAIBuilder={() => setShowAIBuilder(true)}
+                label="Create New"
+              />
            )}
          </div>

@@ -474,6 +485,9 @@ export function TreeLibraryPage() {
                    setShowDeleteConfirm(true)
                  }}
                  onForkTree={handleForkTree}
+                  pinnedTreeIds={pinnedTreeIds}
+                  onTogglePin={togglePin}
+                  pinLoadingTreeIds={pinLoadingTreeIds}
                />
              )}
              {treeLibraryView === 'list' && (
@@ -487,6 +501,9 @@ export function TreeLibraryPage() {
                    setShowDeleteConfirm(true)
                  }}
                  onForkTree={handleForkTree}
+                  pinnedTreeIds={pinnedTreeIds}
+                  onTogglePin={togglePin}
+                  pinLoadingTreeIds={pinLoadingTreeIds}
                />
              )}
              {treeLibraryView === 'table' && (
@@ -505,6 +522,9 @@ export function TreeLibraryPage() {
                    )
                  }}
                  onForkTree={handleForkTree}
+                  pinnedTreeIds={pinnedTreeIds}
+                  onTogglePin={togglePin}
+                  pinLoadingTreeIds={pinLoadingTreeIds}
                />
              )}
            </>
@@ -538,6 +558,14 @@ export function TreeLibraryPage() {
        confirmVariant="destructive"
        isLoading={isDeleting}
      />
+
+      {/* AI Builder Modal */}
+      {showAIBuilder && (
+        <AIFlowBuilderModal
+          isOpen={showAIBuilder}
+          onClose={() => setShowAIBuilder(false)}
+        />
+      )}
    </div>
  )
 }
--- a/frontend/src/pages/TreeNavigationPage.tsx
+++ b/frontend/src/pages/TreeNavigationPage.tsx
@@ -15,7 +15,8 @@ import { Spinner } from '@/components/common/Spinner'
 import { toast } from '@/lib/toast'
 import { Modal } from '@/components/common/Modal'
 import { ShareSessionModal } from '@/components/session/ShareSessionModal'
-import { CSATModal, hasBeenRated } from '@/components/session/CSATModal'
+import { CSATModal } from '@/components/session/CSATModal'
+import { hasBeenRated } from '@/components/session/csatUtils'
 import { StepFeedback } from '@/components/session/StepFeedback'
 import { buildSessionShareUrl, getLatestActiveShareForSession } from '@/lib/sessionShare'

--- a/frontend/src/store/aiFlowBuilderStore.ts
+++ b/frontend/src/store/aiFlowBuilderStore.ts
@@ -0,0 +1,205 @@
+import { create } from 'zustand'
+import { aiBuilderApi } from '@/api/aiBuilder'
+import type { AIQuotaStatus, AIBranch, AIAssembleResponse, AIWizardPhase } from '@/types'
+
+interface AIFlowBuilderState {
+  // Wizard state
+  phase: AIWizardPhase
+  conversationId: string | null
+  metadata: {
+    flow_type: 'troubleshooting' | 'procedural'
+    name: string
+    description: string
+    environment_tags: string[]
+    category_id: string | null
+  }
+
+  // Stage 2
+  suggestedBranches: AIBranch[]
+  selectedBranches: AIBranch[]
+
+  // Stage 3
+  currentBranchIndex: number
+
+  // Stage 4
+  assembledTree: AIAssembleResponse | null
+
+  // Quota
+  quota: AIQuotaStatus | null
+
+  // UI state
+  isLoading: boolean
+  error: string | null
+
+  // Actions
+  loadQuota: () => Promise<void>
+  setMetadata: (metadata: Partial<AIFlowBuilderState['metadata']>) => void
+  start: () => Promise<void>
+  scaffold: () => Promise<void>
+  selectBranches: (branches: AIBranch[]) => void
+  generateBranchDetail: (branchName: string) => Promise<void>
+  assemble: () => Promise<void>
+  reset: () => void
+  setPhase: (phase: AIWizardPhase) => void
+  setError: (error: string | null) => void
+}
+
+const initialMetadata = {
+  flow_type: 'troubleshooting' as const,
+  name: '',
+  description: '',
+  environment_tags: [] as string[],
+  category_id: null as string | null,
+}
+
+export const useAIFlowBuilderStore = create<AIFlowBuilderState>()((set, get) => ({
+  phase: 'foundation',
+  conversationId: null,
+  metadata: { ...initialMetadata },
+  suggestedBranches: [],
+  selectedBranches: [],
+  currentBranchIndex: 0,
+  assembledTree: null,
+  quota: null,
+  isLoading: false,
+  error: null,
+
+  loadQuota: async () => {
+    try {
+      const quota = await aiBuilderApi.getQuota()
+      set({ quota })
+    } catch {
+      // Silently fail — quota display is optional
+    }
+  },
+
+  setMetadata: (metadata) => {
+    set((state) => ({
+      metadata: { ...state.metadata, ...metadata },
+    }))
+  },
+
+  start: async () => {
+    const { metadata } = get()
+    set({ isLoading: true, error: null })
+    try {
+      const response = await aiBuilderApi.start({
+        flow_type: metadata.flow_type,
+        name: metadata.name,
+        description: metadata.description,
+        environment_tags: metadata.environment_tags,
+        category_id: metadata.category_id ?? undefined,
+      })
+      set({
+        conversationId: response.conversation_id,
+        phase: 'scaffolding',
+        isLoading: false,
+      })
+    } catch (err) {
+      const message = _extractError(err)
+      set({ error: message, isLoading: false })
+    }
+  },
+
+  scaffold: async () => {
+    const { conversationId } = get()
+    if (!conversationId) return
+    set({ isLoading: true, error: null, phase: 'generating' })
+    try {
+      const response = await aiBuilderApi.scaffold(conversationId)
+      const branches: AIBranch[] = response.branches.map((b) => ({
+        name: b.name,
+        description: b.description,
+      }))
+      set({
+        suggestedBranches: branches,
+        selectedBranches: branches,
+        phase: 'scaffolding',
+        isLoading: false,
+      })
+    } catch (err) {
+      const message = _extractError(err)
+      set({ error: message, phase: 'error', isLoading: false })
+    }
+  },
+
+  selectBranches: (branches) => {
+    set({ selectedBranches: branches })
+  },
+
+  generateBranchDetail: async (branchName) => {
+    const { conversationId, selectedBranches } = get()
+    if (!conversationId) return
+    set({ isLoading: true, error: null, phase: 'generating' })
+    try {
+      const response = await aiBuilderApi.branchDetail(conversationId, branchName)
+      const updatedBranches = selectedBranches.map((b) =>
+        b.name === branchName ? { ...b, steps: response.steps } : b
+      )
+      // Advance to the next branch that still needs detail
+      const nextIndex = updatedBranches.findIndex((b) => !b.steps)
+      const currentBranchIndex = nextIndex !== -1 ? nextIndex : updatedBranches.findIndex((b) => b.name === branchName)
+      set({
+        selectedBranches: updatedBranches,
+        currentBranchIndex,
+        phase: 'detailing',
+        isLoading: false,
+      })
+    } catch (err) {
+      const message = _extractError(err)
+      set({ error: message, phase: 'error', isLoading: false })
+    }
+  },
+
+  assemble: async () => {
+    const { conversationId, selectedBranches } = get()
+    if (!conversationId) return
+    set({ isLoading: true, error: null })
+    try {
+      const response = await aiBuilderApi.assemble(
+        conversationId,
+        selectedBranches.map((b) => ({
+          name: b.name,
+          description: b.description,
+          steps: b.steps,
+        }))
+      )
+      set({
+        assembledTree: response,
+        phase: 'reviewing',
+        isLoading: false,
+      })
+    } catch (err) {
+      const message = _extractError(err)
+      set({ error: message, phase: 'error', isLoading: false })
+    }
+  },
+
+  reset: () => {
+    set({
+      phase: 'foundation',
+      conversationId: null,
+      metadata: { ...initialMetadata },
+      suggestedBranches: [],
+      selectedBranches: [],
+      currentBranchIndex: 0,
+      assembledTree: null,
+      isLoading: false,
+      error: null,
+    })
+  },
+
+  setPhase: (phase) => set({ phase }),
+  setError: (error) => set({ error }),
+}))
+
+function _extractError(err: unknown): string {
+  if (err && typeof err === 'object' && 'response' in err) {
+    const axiosErr = err as { response?: { data?: { detail?: string | { message?: string } } } }
+    const detail = axiosErr.response?.data?.detail
+    if (typeof detail === 'string') return detail
+    if (detail && typeof detail === 'object' && 'message' in detail) return detail.message ?? 'Unknown error'
+  }
+  if (err instanceof Error) return err.message
+  return 'An unexpected error occurred'
+}
--- a/frontend/src/store/authStore.ts
+++ b/frontend/src/store/authStore.ts
@@ -3,6 +3,7 @@ import { persist } from 'zustand/middleware'
 import type { User, Token, UserCreate, UserLogin, Account, SubscriptionDetails } from '@/types'
 import { authApi } from '@/api/auth'
 import { apiClient } from '@/api/client'
+import { clearCachedQuota } from '@/hooks/useCachedQuota'

 interface AuthState {
  user: User | null
@@ -79,6 +80,7 @@ export const useAuthStore = create<AuthState>()(
        } finally {
          localStorage.removeItem('access_token')
          localStorage.removeItem('refresh_token')
+          clearCachedQuota()
          set({ user: null, token: null, account: null, subscription: null, isAuthenticated: false, error: null })
        }
      },
--- a/frontend/src/store/pinnedFlowsStore.ts
+++ b/frontend/src/store/pinnedFlowsStore.ts
@@ -0,0 +1,104 @@
+import { create } from 'zustand'
+import { pinnedFlowsApi } from '@/api/pinnedFlows'
+import type { PinnedFlow } from '@/api/pinnedFlows'
+import { toast } from '@/lib/toast'
+
+interface PinnedFlowsState {
+  items: PinnedFlow[]
+  isLoaded: boolean
+  isLoading: boolean
+  isMutatingByTreeId: Record<string, boolean>
+  error: string | null
+
+  load: (force?: boolean) => Promise<void>
+  pin: (treeId: string) => Promise<void>
+  unpin: (treeId: string) => Promise<void>
+  toggle: (treeId: string) => void
+  isPinned: (treeId: string) => boolean
+}
+
+export const usePinnedFlowsStore = create<PinnedFlowsState>()((set, get) => ({
+  items: [],
+  isLoaded: false,
+  isLoading: false,
+  isMutatingByTreeId: {},
+  error: null,
+
+  load: async (force = false) => {
+    const state = get()
+    if (state.isLoaded && !force) return
+    if (state.isLoading) return
+
+    set({ isLoading: true, error: null })
+    try {
+      const data = await pinnedFlowsApi.list()
+      set({ items: data.items, isLoaded: true, isLoading: false })
+    } catch {
+      set({ error: 'Failed to load pinned flows', isLoading: false })
+    }
+  },
+
+  pin: async (treeId: string) => {
+    const state = get()
+    if (state.isMutatingByTreeId[treeId]) return
+
+    set({ isMutatingByTreeId: { ...state.isMutatingByTreeId, [treeId]: true } })
+
+    try {
+      await pinnedFlowsApi.pin(treeId)
+      const data = await pinnedFlowsApi.list()
+      set((s) => ({
+        items: data.items,
+        isMutatingByTreeId: { ...s.isMutatingByTreeId, [treeId]: false },
+      }))
+    } catch (err: unknown) {
+      const status = (err as { response?: { status?: number } })?.response?.status
+      if (status === 409) {
+        toast.error('Maximum of 15 favorites reached. Unpin a flow to add a new one.')
+      } else {
+        toast.error('Failed to pin flow')
+      }
+      set((s) => ({
+        isMutatingByTreeId: { ...s.isMutatingByTreeId, [treeId]: false },
+      }))
+    }
+  },
+
+  unpin: async (treeId: string) => {
+    const state = get()
+    if (state.isMutatingByTreeId[treeId]) return
+
+    const prevItems = state.items
+    set({
+      items: state.items.filter((f) => f.tree_id !== treeId),
+      isMutatingByTreeId: { ...state.isMutatingByTreeId, [treeId]: true },
+    })
+
+    try {
+      await pinnedFlowsApi.unpin(treeId)
+      set((s) => ({
+        isMutatingByTreeId: { ...s.isMutatingByTreeId, [treeId]: false },
+      }))
+    } catch {
+      toast.error('Failed to unpin flow')
+      set((s) => ({
+        items: prevItems,
+        isMutatingByTreeId: { ...s.isMutatingByTreeId, [treeId]: false },
+      }))
+    }
+  },
+
+  toggle: (treeId: string) => {
+    const state = get()
+    if (state.isPinned(treeId)) {
+      state.unpin(treeId)
+    } else {
+      state.pin(treeId)
+    }
+  },
+
+  isPinned: (treeId: string) => {
+    return get().items.some((f) => f.tree_id === treeId)
+  },
+}))
+
--- a/frontend/src/store/userPreferencesStore.ts
+++ b/frontend/src/store/userPreferencesStore.ts
@@ -17,6 +17,8 @@ interface UserPreferencesState {
  setPreferredEditorMode: (mode: EditorMode) => void
  sidebarCollapsed: boolean
  toggleSidebar: () => void
+  dashboardMyFlowsView: TreeLibraryView
+  setDashboardMyFlowsView: (view: TreeLibraryView) => void
 }

 export const useUserPreferencesStore = create<UserPreferencesState>()(
@@ -32,6 +34,8 @@ export const useUserPreferencesStore = create<UserPreferencesState>()(
      setPreferredEditorMode: (mode) => set({ preferredEditorMode: mode }),
      sidebarCollapsed: false,
      toggleSidebar: () => set({ sidebarCollapsed: !get().sidebarCollapsed }),
+      dashboardMyFlowsView: 'grid',
+      setDashboardMyFlowsView: (view) => set({ dashboardMyFlowsView: view }),
    }),
    {
      name: 'user-preferences-storage',
--- a/frontend/src/types/ai.ts
+++ b/frontend/src/types/ai.ts
@@ -0,0 +1,60 @@
+export interface AIQuotaStatus {
+  plan: string
+  monthly_used: number
+  monthly_limit: number | null
+  monthly_reset_at: string
+  daily_used: number
+  daily_limit: number | null
+  daily_reset_at: string
+  allowed: boolean
+  ai_enabled: boolean
+}
+
+export interface AIBranch {
+  name: string
+  description: string
+  steps?: Record<string, unknown>
+  isCustom?: boolean
+}
+
+export interface AITreeSummary {
+  node_count: number
+  decision_count: number
+  action_count: number
+  solution_count: number
+  depth: number
+}
+
+export interface AIStartResponse {
+  conversation_id: string
+  status: string
+}
+
+export interface AIScaffoldResponse {
+  conversation_id: string
+  branches: Array<{ name: string; description: string }>
+  status: string
+}
+
+export interface AIBranchDetailResponse {
+  conversation_id: string
+  branch_name: string
+  steps: Record<string, unknown>
+  status: string
+}
+
+export interface AIAssembleResponse {
+  tree_structure: Record<string, unknown>
+  suggested_name: string
+  suggested_description: string
+  summary: AITreeSummary
+  status: string
+}
+
+export type AIWizardPhase =
+  | 'foundation'
+  | 'scaffolding'
+  | 'detailing'
+  | 'reviewing'
+  | 'generating'
+  | 'error'
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -34,3 +34,14 @@ export type {
  BatchLaunchRequest,
  BatchLaunchResponse,
 } from './maintenance'
+
+export type {
+  AIQuotaStatus,
+  AIBranch,
+  AITreeSummary,
+  AIStartResponse,
+  AIScaffoldResponse,
+  AIBranchDetailResponse,
+  AIAssembleResponse,
+  AIWizardPhase,
+} from './ai'