feat: add procedural flows with intake forms, navigation, and seed templates

Adds a new "procedural" tree type for linear step-by-step project workflows
(domain controller setup, M365 onboarding, VPN config, etc). Includes intake
form builder, two-panel step navigation, variable resolution, procedural
exports, 3 seed templates, and UI rename from "Trees" to "Flows".

Also archives 19 implemented plan docs and creates deferred features backlog.

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

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 } from 'lucide-react'
+import { Play, Pencil, Share2, Trash2, GitBranch, Clock, TrendingUp, FolderTree, Plus, ListOrdered, ChevronDown } from 'lucide-react'
 import { treesApi } from '@/api/trees'
 import { sessionsApi } from '@/api/sessions'
 import type { TreeListItem } from '@/types'
@@ -30,6 +30,7 @@ export function MyTreesPage() {
   const [isDeleting, setIsDeleting] = useState(false)
   const [treeToShare, setTreeToShare] = useState<TreeWithStats | null>(null)
   const [showShareModal, setShowShareModal] = useState(false)
+  const [showCreateMenu, setShowCreateMenu] = useState(false)
 
   useEffect(() => {
     loadMyTrees()
@@ -62,15 +63,23 @@ export function MyTreesPage() {
 
       setTrees(treesWithStats)
     } catch (err) {
-      toast.error('Failed to load your trees')
+      toast.error('Failed to load your flows')
       console.error(err)
     } finally {
       setIsLoading(false)
     }
   }
 
-  const handleStartSession = (treeId: string) => {
-    navigate(`/trees/${treeId}/navigate`)
+  const handleStartSession = (tree: TreeWithStats) => {
+    if (tree.tree_type === 'procedural') {
+      navigate(`/flows/${tree.id}/navigate`)
+    } else {
+      navigate(`/trees/${tree.id}/navigate`)
+    }
+  }
+
+  const getEditPath = (tree: TreeWithStats) => {
+    return tree.tree_type === 'procedural' ? `/flows/${tree.id}/edit` : `/trees/${tree.id}/edit`
   }
 
   const handleDeleteTree = async () => {
@@ -79,10 +88,10 @@ export function MyTreesPage() {
     try {
       await treesApi.delete(treeToDelete.id)
       setTrees(trees.filter((t) => t.id !== treeToDelete.id))
-      toast.success(`Tree "${treeToDelete.name}" deleted successfully`)
+      toast.success(`"${treeToDelete.name}" deleted successfully`)
     } catch (err) {
-      console.error('Failed to delete tree:', err)
-      toast.error('Failed to delete tree')
+      console.error('Failed to delete flow:', err)
+      toast.error('Failed to delete flow')
     } finally {
       setIsDeleting(false)
       setShowDeleteConfirm(false)
@@ -103,19 +112,51 @@ export function MyTreesPage() {
     <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       <div className="mb-6 flex items-center justify-between sm:mb-8">
         <div>
-          <h1 className="text-2xl font-bold text-white sm:text-3xl">My Trees</h1>
+          <h1 className="text-2xl font-bold text-white sm:text-3xl">My Flows</h1>
           <p className="mt-2 text-white/40">
-            Your forked and custom decision trees
+            Your forked and custom flows
           </p>
         </div>
         {canCreateTrees && (
-          <Link
-            to="/trees/new"
-            className="flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
-          >
-            <Plus className="h-4 w-4" />
-            Create Tree
-          </Link>
+          <div className="relative">
+            <button
+              onClick={() => setShowCreateMenu(!showCreateMenu)}
+              className="flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
+            >
+              <Plus className="h-4 w-4" />
+              Create New
+              <ChevronDown className="h-3.5 w-3.5" />
+            </button>
+            {showCreateMenu && (
+              <>
+                <div className="fixed inset-0 z-10" onClick={() => setShowCreateMenu(false)} />
+                <div className="absolute right-0 z-20 mt-1 w-56 rounded-lg border border-white/10 bg-black/95 p-1 shadow-xl backdrop-blur-sm">
+                  <Link
+                    to="/trees/new"
+                    onClick={() => setShowCreateMenu(false)}
+                    className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-white hover:bg-white/10"
+                  >
+                    <FolderTree className="h-4 w-4 text-white/50" />
+                    <div>
+                      <div className="font-medium">Troubleshooting Tree</div>
+                      <div className="text-xs text-white/40">Branching decision flow</div>
+                    </div>
+                  </Link>
+                  <Link
+                    to="/flows/new"
+                    onClick={() => setShowCreateMenu(false)}
+                    className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-white hover:bg-white/10"
+                  >
+                    <ListOrdered className="h-4 w-4 text-white/50" />
+                    <div>
+                      <div className="font-medium">Procedural Flow</div>
+                      <div className="text-xs text-white/40">Step-by-step procedure</div>
+                    </div>
+                  </Link>
+                </div>
+              </>
+            )}
+          </div>
         )}
       </div>
 
@@ -127,9 +168,9 @@ export function MyTreesPage() {
       ) : trees.length === 0 ? (
         <div className="rounded-lg border border-dashed border-white/10 bg-white/[0.02] px-4 py-12 text-center">
           <FolderTree className="mx-auto mb-4 h-12 w-12 text-white/20" />
-          <h2 className="mb-2 text-lg font-semibold text-white">No personal trees yet</h2>
+          <h2 className="mb-2 text-lg font-semibold text-white">No personal flows yet</h2>
           <p className="mb-4 text-sm text-white/40">
-            Fork a tree from the library to customize it for your workflow
+            Fork a flow from the library to customize it for your workflow
           </p>
           <div className="flex items-center justify-center gap-3">
             <Link
@@ -164,12 +205,24 @@ export function MyTreesPage() {
             >
               {/* Header */}
               <div className="mb-3 flex items-start justify-between gap-2">
-                <h3 className="font-semibold text-white">{tree.name}</h3>
-                {tree.category_info && (
-                  <span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70">
-                    {tree.category_info.name}
-                  </span>
-                )}
+                <div className="flex items-center gap-2">
+                  {tree.tree_type === 'procedural' && (
+                    <ListOrdered className="h-4 w-4 shrink-0 text-white/40" />
+                  )}
+                  <h3 className="font-semibold text-white">{tree.name}</h3>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  {tree.tree_type === 'procedural' && (
+                    <span className="rounded-full bg-blue-400/10 px-2 py-0.5 text-[10px] font-medium text-blue-400">
+                      Procedure
+                    </span>
+                  )}
+                  {tree.category_info && (
+                    <span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70">
+                      {tree.category_info.name}
+                    </span>
+                  )}
+                </div>
               </div>
 
               {/* Description */}
@@ -216,7 +269,7 @@ export function MyTreesPage() {
               <div className="flex items-center gap-2">
                 <button
                   type="button"
-                  onClick={() => handleStartSession(tree.id)}
+                  onClick={() => handleStartSession(tree)}
                   className={cn(
                     'flex flex-1 items-center justify-center gap-2 rounded-md bg-white px-3 py-2 text-sm font-medium text-black',
                     'hover:bg-white/90'
@@ -227,7 +280,7 @@ export function MyTreesPage() {
                 </button>
                 {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
                   <Link
-                    to={`/trees/${tree.id}/edit`}
+                    to={getEditPath(tree)}
                     className={cn(
                       'rounded-md border border-white/10 p-2 text-white/40',
                       'hover:bg-white/10 hover:text-white'
@@ -279,7 +332,7 @@ export function MyTreesPage() {
           setTreeToDelete(null)
         }}
         onConfirm={handleDeleteTree}
-        title="Delete Tree"
+        title="Delete Flow"
         message={`Are you sure you want to delete "${treeToDelete?.name}"? This action can be undone by an administrator.`}
         confirmLabel="Delete"
         confirmVariant="destructive"