From 6a52508f5464a7869e422560f6f5ee0a77f53382 Mon Sep 17 00:00:00 2001
From: Tyler Holland <tytaniumdev@gmail.com>
Date: Fri, 27 Feb 2026 22:42:04 -0800
Subject: [PATCH 1/3] fix: add approval filter to automerge-label caller
 workflow

Added if condition so the reusable workflow is only called on
TytaniumDev's approvals, not every review submission. Removed
redundant top-level permissions (reusable workflow declares its own).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .github/workflows/automerge-label.yml | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/automerge-label.yml b/.github/workflows/automerge-label.yml
index c69999b..a5ab835 100644
--- a/.github/workflows/automerge-label.yml
+++ b/.github/workflows/automerge-label.yml
@@ -4,11 +4,9 @@ on:
   pull_request_review:
     types: [submitted]
 
-permissions:
-  contents: read
-  pull-requests: write
-  issues: write
-
 jobs:
   add-label:
+    if: >-
+      github.event.review.state == 'approved' &&
+      github.event.review.user.login == 'TytaniumDev'
     uses: TytaniumDev/.github/.github/workflows/automerge-label.yml@main

From a961a737923d97e418bc52c3d93e631efda7d6a9 Mon Sep 17 00:00:00 2001
From: Tyler Holland <tytaniumdev@gmail.com>
Date: Fri, 27 Feb 2026 22:45:07 -0800
Subject: [PATCH 2/3] feat(ui): add loading spinners to async buttons

Rebase spinner changes onto current main (post-PR #90 Firestore migration).
Adds a reusable Spinner component with size variants and integrates it into
async action buttons (Run Again, Cancel Job, Delete Job, bulk delete) and
the Browse page loading state. Removes .jules/ metadata file.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .jules/palette.md                        |  3 --
 frontend/src/components/Spinner.test.tsx | 25 ++++++++++++++++
 frontend/src/components/Spinner.tsx      | 36 ++++++++++++++++++++++++
 frontend/src/pages/Browse.tsx            |  7 +++--
 frontend/src/pages/JobStatus.tsx         | 13 ++++++---
 5 files changed, 75 insertions(+), 9 deletions(-)
 delete mode 100644 .jules/palette.md
 create mode 100644 frontend/src/components/Spinner.test.tsx
 create mode 100644 frontend/src/components/Spinner.tsx

diff --git a/.jules/palette.md b/.jules/palette.md
deleted file mode 100644
index 0caaab8..0000000
--- a/.jules/palette.md
+++ /dev/null
@@ -1,3 +0,0 @@
-## 2024-05-22 - Interactive Divs Pattern
-**Learning:** The application frequently uses `div` elements with `onClick` handlers for selection lists (like deck selection), making them inaccessible to keyboard and screen reader users.
-**Action:** When implementing selection grids, always wrap items in `<button>` or use `role="checkbox"/"radio"` with full keyboard support (`tabIndex`, `onKeyDown`, `aria-checked`).
diff --git a/frontend/src/components/Spinner.test.tsx b/frontend/src/components/Spinner.test.tsx
new file mode 100644
index 0000000..f54f18c
--- /dev/null
+++ b/frontend/src/components/Spinner.test.tsx
@@ -0,0 +1,25 @@
+import { Spinner } from './Spinner';
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+
+describe('Spinner', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Spinner />);
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveClass('animate-spin');
+    expect(svg).toHaveClass('w-4'); // Default size sm
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Spinner className="text-red-500" />);
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('text-red-500');
+  });
+
+  it('applies size classes', () => {
+    const { container } = render(<Spinner size="lg" />);
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('w-8');
+  });
+});
diff --git a/frontend/src/components/Spinner.tsx b/frontend/src/components/Spinner.tsx
new file mode 100644
index 0000000..fed6db3
--- /dev/null
+++ b/frontend/src/components/Spinner.tsx
@@ -0,0 +1,36 @@
+interface SpinnerProps {
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function Spinner({ className = '', size = 'sm' }: SpinnerProps) {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-6 h-6',
+    lg: 'w-8 h-8',
+  };
+
+  return (
+    <svg
+      className={`animate-spin text-current ${sizeClasses[size]} ${className}`}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      ></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  );
+}
diff --git a/frontend/src/pages/Browse.tsx b/frontend/src/pages/Browse.tsx
index d676b9d..8c0638e 100644
--- a/frontend/src/pages/Browse.tsx
+++ b/frontend/src/pages/Browse.tsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { getApiBase, fetchWithAuth, deleteJobs } from '../api';
 import { useAuth } from '../contexts/AuthContext';
 import { WorkerStatusBanner } from '../components/WorkerStatusBanner';
+import { Spinner } from '../components/Spinner';
 import { useWorkerStatus } from '../hooks/useWorkerStatus';
 import type { JobStatus, JobSummary } from '@shared/types/job';
 
@@ -186,7 +187,8 @@ export default function Browse() {
 
       {/* Jobs List */}
       {isLoading && (
-        <div className="bg-gray-800 rounded-lg p-6 text-gray-400 text-center">
+        <div className="bg-gray-800 rounded-lg p-6 text-gray-400 text-center flex justify-center items-center gap-2">
+          <Spinner />
           Loading simulations...
         </div>
       )}
@@ -220,8 +222,9 @@ export default function Browse() {
                 type="button"
                 onClick={handleBulkDelete}
                 disabled={isDeleting}
-                className="ml-auto px-3 py-1 text-sm rounded bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                className="ml-auto px-3 py-1 text-sm rounded bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
               >
+                {isDeleting && <Spinner size="sm" />}
                 {isDeleting ? 'Deleting...' : `Delete Selected (${selectedJobs.size})`}
               </button>
             </>
diff --git a/frontend/src/pages/JobStatus.tsx b/frontend/src/pages/JobStatus.tsx
index d63e9f0..a89cfa9 100644
--- a/frontend/src/pages/JobStatus.tsx
+++ b/frontend/src/pages/JobStatus.tsx
@@ -7,6 +7,7 @@ import { getApiBase, fetchWithAuth, deleteJob } from '../api';
 import { ColorIdentity } from '../components/ColorIdentity';
 import { DeckShowcase } from '../components/DeckShowcase';
 import { SimulationGrid } from '../components/SimulationGrid';
+import { Spinner } from '../components/Spinner';
 import { useJobStream } from '../hooks/useJobStream';
 import { useWinData } from '../hooks/useWinData';
 import { useJobLogs } from '../hooks/useJobLogs';
@@ -184,8 +185,9 @@ export default function JobStatusPage() {
             type="button"
             onClick={handleRunAgain}
             disabled={isResubmitting}
-            className="bg-blue-600 hover:bg-blue-700 text-white text-sm rounded px-3 py-1 disabled:opacity-50 disabled:cursor-not-allowed"
+            className="bg-blue-600 hover:bg-blue-700 text-white text-sm rounded px-3 py-1 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
           >
+            {isResubmitting && <Spinner size="sm" />}
             {isResubmitting ? 'Submitting...' : 'Run Again'}
           </button>
         )}
@@ -237,8 +239,9 @@ export default function JobStatusPage() {
                 type="button"
                 onClick={handleCancel}
                 disabled={isCancelling}
-                className="ml-auto px-3 py-1 text-xs rounded bg-orange-600 text-white hover:bg-orange-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                className="ml-auto px-3 py-1 text-xs rounded bg-orange-600 text-white hover:bg-orange-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
               >
+                {isCancelling && <Spinner size="sm" />}
                 {isCancelling ? 'Cancelling...' : 'Cancel Job'}
               </button>
             </div>
@@ -324,8 +327,9 @@ export default function JobStatusPage() {
               type="button"
               onClick={handleCancel}
               disabled={isCancelling}
-              className="ml-4 px-3 py-1 text-xs rounded bg-orange-600 text-white hover:bg-orange-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="ml-4 px-3 py-1 text-xs rounded bg-orange-600 text-white hover:bg-orange-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
             >
+              {isCancelling && <Spinner size="sm" />}
               {isCancelling ? 'Cancelling...' : 'Cancel Job'}
             </button>
           )}
@@ -780,8 +784,9 @@ export default function JobStatusPage() {
             type="button"
             onClick={handleDelete}
             disabled={isDeletingJob}
-            className="ml-auto px-3 py-1 text-sm rounded bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
+            className="ml-auto px-3 py-1 text-sm rounded bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
           >
+            {isDeletingJob && <Spinner size="sm" />}
             {isDeletingJob ? 'Deleting...' : 'Delete Job'}
           </button>
         )}

From 31e62805f795b6aec85e364081cc11a78a921c4b Mon Sep 17 00:00:00 2001
From: Tyler Holland <tytaniumdev@gmail.com>
Date: Fri, 27 Feb 2026 22:51:31 -0800
Subject: [PATCH 3/3] fix: address PR review comments

- Restore explicit permissions block in automerge-label workflow
  (contents: read, pull-requests: write, issues: write) to enforce
  least-privilege on the GITHUB_TOKEN
- Fix Spinner className concatenation to avoid trailing whitespace
  when no custom className is provided

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .github/workflows/automerge-label.yml | 5 +++++
 frontend/src/components/Spinner.tsx   | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/automerge-label.yml b/.github/workflows/automerge-label.yml
index a5ab835..9390cd8 100644
--- a/.github/workflows/automerge-label.yml
+++ b/.github/workflows/automerge-label.yml
@@ -4,6 +4,11 @@ on:
   pull_request_review:
     types: [submitted]
 
+permissions:
+  contents: read
+  pull-requests: write
+  issues: write
+
 jobs:
   add-label:
     if: >-
diff --git a/frontend/src/components/Spinner.tsx b/frontend/src/components/Spinner.tsx
index fed6db3..2482c4e 100644
--- a/frontend/src/components/Spinner.tsx
+++ b/frontend/src/components/Spinner.tsx
@@ -12,7 +12,7 @@ export function Spinner({ className = '', size = 'sm' }: SpinnerProps) {
 
   return (
     <svg
-      className={`animate-spin text-current ${sizeClasses[size]} ${className}`}
+      className={`animate-spin text-current ${sizeClasses[size]}${className ? ` ${className}` : ''}`}
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"