feat: replace Show Drafts checkbox with Drafts tab in Flow Library

- Remove the out-of-place checkbox; add 'Drafts' as a tab alongside
  All | Troubleshooting | Projects | Maintenance
- Drafts tab sets showDrafts=true + typeFilter='all' so the API filter
  still works correctly via include_drafts
- Move SortDropdown to the right side next to ViewToggle, so both
  secondary controls are grouped together

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

frontend/src/pages/TreeLibraryPage.tsx

@@ -326,37 +326,42 @@ export function TreeLibraryPage() {
 
             {/* View Controls */}
             <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-              <div className="flex items-center gap-4">
+              {/* Type filter tabs — includes Drafts as a first-class filter */}
               <div className="flex rounded-lg border border-border p-0.5">
-                  {(['all', 'troubleshooting', 'procedural', 'maintenance'] as const).map((t) => (
+                {(['all', 'troubleshooting', 'procedural', 'maintenance', 'drafts'] as const).map((t) => {
+                  const isActive = t === 'drafts' ? showDrafts && typeFilter === 'all' : !showDrafts && typeFilter === t
+                  return (
                     <button
                       key={t}
-                      onClick={() => setTypeFilter(t)}
+                      onClick={() => {
+                        if (t === 'drafts') {
+                          setShowDrafts(true)
+                          setTypeFilter('all')
+                        } else {
+                          setShowDrafts(false)
+                          setTypeFilter(t)
+                        }
+                      }}
                       className={cn(
                         'rounded-md px-3 py-1 text-xs font-medium transition-colors',
-                        typeFilter === t
+                        isActive
                           ? 'bg-accent text-foreground'
                           : 'text-muted-foreground hover:text-foreground'
                       )}
                     >
-                      {t === 'all' ? 'All' : t === 'troubleshooting' ? 'Troubleshooting' : t === 'procedural' ? 'Projects' : 'Maintenance'}
+                      {t === 'all' ? 'All' : t === 'troubleshooting' ? 'Troubleshooting' : t === 'procedural' ? 'Projects' : t === 'maintenance' ? 'Maintenance' : 'Drafts'}
                     </button>
-                  ))}
+                  )
+                })}
               </div>
+
+              {/* Right controls: sort + view toggle */}
+              <div className="flex items-center gap-2">
                 <SortDropdown value={treeLibrarySortBy} onChange={setTreeLibrarySortBy} />
-                <label className="flex items-center gap-2 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={showDrafts}
-                    onChange={(e) => setShowDrafts(e.target.checked)}
-                    className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-primary/20 focus:ring-offset-2"
-                  />
-                  <span className="text-sm text-muted-foreground">Show my drafts</span>
-                </label>
-              </div>
                 <ViewToggle view={treeLibraryView} onChange={setTreeLibraryView} />
               </div>
             </div>
+          </div>
 
           {/* Active Filters */}
           {hasActiveFilters && (