feat: add bracket visualization for tournament schedule (#8)

Adds a visual bracket display showing rounds as columns with matchup cards.

Changes:
- Created BracketVisualization component with CSS grid layout
- Added 'Bracket' tab to tournament detail page (visible when schedule exists)
- Matchup cards show team names, scores, and winner highlighting
- Current round is highlighted with green styling
- Added BDD feature file with 3 scenarios covering bracket display
- Added step definitions for bracket interaction tests

3 scenarios, 24 steps, all passing.

e2e/cucumber/features/bracket-visualization.feature

@@ -0,0 +1,37 @@
+Feature: Bracket Visualization
+  As a tournament admin
+  I want to see a visual bracket of the tournament schedule
+  So that I can track tournament progress at a glance
+
+  @happy-path @tournament @issue-8
+  Scenario: Tournament admin views bracket with a generated schedule
+    Given I am logged in as a tournament admin
+    And a tournament exists with 4 teams
+    When I go to the tournament schedule page
+    And I click the "Generate Schedule" button
+    Then I should see "Generated"
+    When I go to the tournament detail page
+    And I click the "Bracket" tab
+    Then I should see "Tournament Bracket"
+    And I should see "Round 1"
+    And I should see "Round 2"
+    And I should see "Round 3"
+    And I should see bracket matchup cards
+
+  @happy-path @tournament @issue-8
+  Scenario: Bracket shows team names in matchup cards
+    Given I am logged in as a tournament admin
+    And a tournament exists with 4 teams
+    When I go to the tournament schedule page
+    And I click the "Generate Schedule" button
+    Then I should see "Generated"
+    When I go to the tournament detail page
+    And I click the "Bracket" tab
+    Then I should see bracket matchup cards with team names
+
+  @happy-path @tournament @issue-8
+  Scenario: Bracket tab is not visible without a schedule
+    Given I am logged in as a tournament admin
+    And a tournament exists with 4 teams
+    When I go to the tournament detail page
+    Then I should not see the "Bracket" tab

e2e/cucumber/step-definitions/common-steps.ts

@@ -748,3 +748,44 @@ Then('I should not see the viewing as banner', async function () {
   await expect(banner).not.toBeVisible({ timeout: 3000 });
   console.log('🌍 Verified viewing as banner is not visible');
 });
+
+// Bracket Visualization Steps
+When('I go to the tournament detail page', async function () {
+  const tournamentId = world.tournament?.id || 1;
+  await world.page.goto(`${world.baseURL}/admin/tournaments/${tournamentId}`);
+  await world.page.waitForLoadState('networkidle');
+  await world.page.waitForTimeout(500);
+  console.log(`🌍 Navigated to tournament detail page: ${tournamentId}`);
+});
+
+When('I click the {string} tab', async function (tabName: string) {
+  const tab = world.page.locator(`button:has-text("${tabName}")`);
+  await tab.click();
+  await world.page.waitForTimeout(500);
+  console.log(`🌍 Clicked "${tabName}" tab`);
+});
+
+Then('I should see bracket matchup cards', async function () {
+  const cards = world.page.locator('[data-testid="bracket-matchup"]');
+  const count = await cards.count();
+  expect(count).toBeGreaterThan(0);
+  console.log(`🌍 Found ${count} bracket matchup cards`);
+});
+
+Then('I should see bracket matchup cards with team names', async function () {
+  const cards = world.page.locator('[data-testid="bracket-matchup"]');
+  const count = await cards.count();
+  expect(count).toBeGreaterThan(0);
+  
+  const firstCard = cards.first();
+  const text = await firstCard.textContent();
+  expect(text).toBeTruthy();
+  expect(text!.length).toBeGreaterThan(2);
+  console.log(`🌍 Verified bracket matchup cards have team names`);
+});
+
+Then('I should not see the {string} tab', async function (tabName: string) {
+  const tab = world.page.locator(`button:has-text("${tabName}")`);
+  await expect(tab).not.toBeVisible({ timeout: 3000 });
+  console.log(`🌍 Verified "${tabName}" tab is not visible`);
+});

src/app/admin/tournaments/[id]/page.tsx

@@ -7,6 +7,7 @@ import Navigation from "@/components/Navigation"
 import TeamsSection from "@/components/TeamsSection"
 import { DeleteTournamentButton } from "@/components/DeleteTournamentButton"
 import { ScheduleGenerator } from "@/components/ScheduleGenerator"
+import { BracketVisualization } from "@/components/BracketVisualization"
 import MatchEditor from "@/components/MatchEditor"
 
 interface PageProps {
@@ -420,6 +421,11 @@ export default function TournamentDetailPage({ params }: PageProps) {
           </div>
         )
 
+      case "bracket":
+        return (
+          <BracketVisualization rounds={rounds} />
+        )
+
       default:
         return null
     }
@@ -555,6 +561,18 @@ export default function TournamentDetailPage({ params }: PageProps) {
               >
                 Results
               </button>
+              {hasSchedule && (
+                <button
+                  onClick={() => setActiveTab("bracket")}
+                  className={`whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm ${
+                    activeTab === "bracket"
+                      ? "border-green-500 text-green-600"
+                      : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+                  }`}
+                >
+                  Bracket
+                </button>
+              )}
               <span className="border-transparent text-gray-400 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm cursor-not-allowed">
                 Analytics
               </span>

src/components/BracketVisualization.tsx

@@ -0,0 +1,168 @@
+"use client"
+
+interface Player {
+  id: number
+  name: string
+}
+
+interface BracketMatchup {
+  id: number
+  roundId: number
+  player1P1: Player | null
+  player1P2: Player | null
+  player2P1: Player | null
+  player2P2: Player | null
+  match: { id: number; team1Score: number; team2Score: number } | null
+  bracketPosition: number | null
+  status: string
+}
+
+interface TournamentRound {
+  id: number
+  roundNumber: number
+  status: string
+  bracketMatchups: BracketMatchup[]
+}
+
+interface BracketVisualizationProps {
+  rounds: TournamentRound[]
+}
+
+export function BracketVisualization({ rounds }: BracketVisualizationProps) {
+  if (rounds.length === 0) {
+    return (
+      <div className="bg-white shadow rounded-lg p-6">
+        <p className="text-gray-500">No schedule generated yet. Generate a schedule to see the bracket.</p>
+      </div>
+    )
+  }
+
+  const currentRoundIdx = rounds.findIndex(r => r.status === "in_progress")
+  const completedRounds = rounds.filter(r => r.status === "completed").length
+
+  return (
+    <div className="bg-white shadow rounded-lg p-6">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-lg font-semibold text-gray-900">Tournament Bracket</h2>
+        <div className="flex items-center space-x-4 text-sm text-gray-500">
+          <span>{rounds.length} rounds</span>
+          <span>{completedRounds} completed</span>
+        </div>
+      </div>
+
+      <div className="overflow-x-auto pb-4">
+        <div
+          className="inline-grid gap-4"
+          style={{
+            gridTemplateColumns: `repeat(${rounds.length}, minmax(200px, 1fr))`,
+            minWidth: `${rounds.length * 220}px`,
+          }}
+        >
+          {rounds.map((round, roundIdx) => {
+            const isCurrent = roundIdx === currentRoundIdx
+            const isCompleted = round.status === "completed"
+
+            return (
+              <div key={round.id} className="flex flex-col">
+                {/* Round Header */}
+                <div
+                  className={`text-center py-2 px-3 rounded-t-lg font-medium text-sm ${
+                    isCurrent
+                      ? "bg-green-100 text-green-800 border border-green-300"
+                      : isCompleted
+                      ? "bg-gray-100 text-gray-600 border border-gray-200"
+                      : "bg-gray-50 text-gray-500 border border-gray-200"
+                  }`}
+                >
+                  Round {round.roundNumber}
+                  {isCurrent && (
+                    <span className="ml-1 text-xs">(current)</span>
+                  )}
+                </div>
+
+                {/* Matchups */}
+                <div className="flex flex-col gap-2 mt-2">
+                  {round.bracketMatchups
+                    .sort((a, b) => (a.bracketPosition || 0) - (b.bracketPosition || 0))
+                    .map((matchup) => (
+                      <MatchupCard key={matchup.id} matchup={matchup} isCurrentRound={isCurrent} />
+                    ))}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function MatchupCard({ matchup, isCurrentRound }: { matchup: BracketMatchup; isCurrentRound: boolean }) {
+  const team1Name = matchup.player1P1 && matchup.player1P2
+    ? `${matchup.player1P1.name.split(" ").pop()} & ${matchup.player1P2.name.split(" ").pop()}`
+    : "TBD"
+  const team2Name = matchup.player2P1 && matchup.player2P2
+    ? `${matchup.player2P1.name.split(" ").pop()} & ${matchup.player2P2.name.split(" ").pop()}`
+    : "TBD"
+
+  const hasResult = matchup.match !== null
+  const team1Won = hasResult && matchup.match!.team1Score > matchup.match!.team2Score
+  const team2Won = hasResult && matchup.match!.team2Score > matchup.match!.team1Score
+
+  const borderColor = isCurrentRound
+    ? "border-green-400"
+    : hasResult
+    ? "border-gray-300"
+    : "border-gray-200"
+
+  return (
+    <div
+      className={`border rounded-md p-2 text-xs transition-colors ${borderColor} ${
+        isCurrentRound ? "shadow-sm" : ""
+      }`}
+      data-testid="bracket-matchup"
+    >
+      {/* Team 1 */}
+      <div
+        className={`flex justify-between items-center py-1 px-1 ${
+          team1Won ? "font-semibold" : ""
+        }`}
+      >
+        <span className={`truncate ${team1Won ? "text-green-700" : "text-gray-700"}`}>
+          {team1Name}
+        </span>
+        {hasResult && (
+          <span className={`ml-1 font-mono ${team1Won ? "text-green-700" : "text-gray-500"}`}>
+            {matchup.match!.team1Score}
+          </span>
+        )}
+      </div>
+
+      {/* Divider */}
+      <div className="border-t border-gray-200 my-0.5" />
+
+      {/* Team 2 */}
+      <div
+        className={`flex justify-between items-center py-1 px-1 ${
+          team2Won ? "font-semibold" : ""
+        }`}
+      >
+        <span className={`truncate ${team2Won ? "text-green-700" : "text-gray-700"}`}>
+          {team2Name}
+        </span>
+        {hasResult && (
+          <span className={`ml-1 font-mono ${team2Won ? "text-green-700" : "text-gray-500"}`}>
+            {matchup.match!.team2Score}
+          </span>
+        )}
+      </div>
+
+      {/* Status indicator */}
+      {!hasResult && matchup.status === "pending" && (
+        <div className="text-center text-gray-400 text-[10px] mt-1">
+          pending
+        </div>
+      )}
+    </div>
+  )
+}