UI development

frontend/src/components/stickies.tsx

@@ -109,6 +109,9 @@ const Stickies = () => {
                 <span className="cluster-rank" aria-label={`Priority ${group.rank}`}>
                   {group.rank}
                 </span>
+                {group.rank === 1 && (
+                  <span className="cluster-reorder-hint">Drag and drop to reorganize cluster priority</span>
+                )}
                 <h3 className="cluster-label">{group.label}</h3>
                 <span className="cluster-drag-handle" aria-hidden="true">⠿</span>
               </div>

frontend/src/styles/stickies.css

@@ -60,6 +60,14 @@
   flex-shrink: 0;
 }
 
+.cluster-reorder-hint {
+  font-size: 0.8em;
+  color: #9ca3af;
+  font-style: italic;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
 .cluster-label {
   margin: 0;
   font-size: 1.2em;