refactor: adopt shared Button component in 18 modal components

Replace raw <button> elements with <Button> from ui/Button.tsx:
- Primary buttons (bg-gradient-brand) → <Button variant="primary">
- Secondary buttons (border-border) → <Button variant="secondary">
- Ghost buttons → <Button variant="ghost">
- Loading states use loading prop instead of manual Loader2 spinner

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

frontend/src/components/step-library/StepForm.tsx

@@ -3,6 +3,7 @@ import { Plus, X, HelpCircle, Zap, CheckCircle } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { stepCategoriesApi } from '@/api/stepCategories'
 import type { StepCreate, StepCategory, StepCommand } from '@/types/step'
+import { Button } from '@/components/ui/Button'
 
 interface StepFormProps {
   onSubmit: (data: StepCreate) => void
@@ -369,20 +370,21 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
 
       {/* Actions */}
       <div className="flex gap-2 pt-4">
-        <button
+        <Button
           type="button"
+          variant="secondary"
           onClick={onCancel}
-          className="flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
+          className="flex-1"
         >
           Cancel
-        </button>
-        <button
+        </Button>
+        <Button
           type="submit"
-          disabled={isSubmitting}
-          className="flex-1 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
+          loading={isSubmitting}
+          className="flex-1"
         >
-          {isSubmitting ? 'Saving...' : (submitLabel ?? 'Insert Step')}
-        </button>
+          {submitLabel ?? 'Insert Step'}
+        </Button>
       </div>
     </form>
   )