feat(tournaments): external server management UI and official-bot join

Add TournamentServerService (GET/POST/DELETE /api/tournament/servers).
Add OfficialBotService (POST /api/bots/official/join-tournament).
Tournaments page gains a Servers button that opens a dialog to register,
list, and remove external tournament servers. Join dialog gains four
difficulty buttons (Easy/Medium/Hard/Expert) for spawning official bots
into a tournament at runtime.

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

src/app/pages/tournaments/tournaments.component.css

@@ -64,6 +64,18 @@
 }
 .page-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
 
+.page-actions { display: flex; align-items: center; gap: 8px; }
+
+.btn-servers {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 7px 14px; border-radius: 8px;
+  border: 1px solid var(--nc-border-strong);
+  background: transparent; color: var(--nc-text-muted);
+  font-size: 13px; font-weight: 600; cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+.btn-servers:hover { color: var(--nc-text); border-color: var(--nc-text-muted); }
+
 .btn-new {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 7px 14px; border-radius: 8px; border: none;
@@ -327,3 +339,74 @@
   color: var(--nc-success); letter-spacing: 0.06em; text-transform: uppercase;
 }
 .pairing-ongoing svg { animation: pulse 1.4s ease-in-out infinite; }
+
+/* Official bot join section */
+.join-divider {
+  display: flex; align-items: center; gap: 10px;
+  margin: 20px 0 14px;
+}
+.join-divider::before, .join-divider::after {
+  content: ''; flex: 1; height: 1px; background: var(--nc-border);
+}
+.join-divider-label {
+  font-size: 10px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.08em; color: var(--nc-text-dim); white-space: nowrap;
+}
+
+.official-bot-grid {
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
+  margin-bottom: 4px;
+}
+
+.official-bot-btn {
+  display: flex; align-items: center; justify-content: center; gap: 6px;
+  padding: 9px 4px; border-radius: 8px; border: 1px solid var(--nc-border);
+  background: var(--nc-surface); font-size: 12px; font-weight: 700;
+  cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
+  color: var(--nc-text-muted); text-transform: capitalize;
+}
+.official-bot-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+.official-btn-easy:hover:not(:disabled)   { border-color: var(--nc-success); color: var(--nc-success); background: rgba(94,229,161,0.07); }
+.official-btn-medium:hover:not(:disabled) { border-color: var(--nc-warn); color: var(--nc-warn); background: rgba(255,209,102,0.07); }
+.official-btn-hard:hover:not(:disabled)   { border-color: var(--nc-neon); color: var(--nc-neon); background: rgba(255,69,200,0.07); }
+.official-btn-expert:hover:not(:disabled) { border-color: var(--nc-danger); color: var(--nc-danger); background: rgba(255,122,122,0.07); }
+
+/* Servers dialog */
+.servers-dialog { max-width: 480px; }
+
+.servers-list {
+  display: flex; flex-direction: column; gap: 6px;
+  margin-bottom: 20px;
+}
+.server-row {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 12px; border-radius: 8px;
+  border: 1px solid var(--nc-border); background: var(--nc-surface);
+}
+.server-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
+.server-label { font-size: 13px; font-weight: 600; color: var(--nc-text); }
+.server-url {
+  font-size: 11px; color: var(--nc-text-dim);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  font-family: monospace;
+}
+.server-remove-btn {
+  background: none; border: none; cursor: pointer;
+  color: var(--nc-text-dim); padding: 4px; border-radius: 6px;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0; transition: color 0.15s, background 0.15s;
+  font-size: 13px;
+}
+.server-remove-btn:hover:not(:disabled) { color: var(--nc-danger); background: rgba(255,122,122,0.1); }
+.server-remove-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.server-add-form {
+  border-top: 1px solid var(--nc-border);
+  padding-top: 16px;
+  display: flex; flex-direction: column; gap: 0;
+}
+.server-add-heading {
+  font-size: 11px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.08em; color: var(--nc-text-muted);
+  margin: 0 0 14px;
+}

src/app/pages/tournaments/tournaments.component.html

@@ -16,15 +16,25 @@
     <header class="page-header">
       <div class="page-title-row">
         <h1 class="page-title">Tournaments</h1>
-        @if (currentUser) {
-          <button type="button" class="btn-new" (click)="openCreateDialog()">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-              stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
-              <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
-            </svg>
-            New tournament
-          </button>
-        }
+        <div class="page-actions">
+          @if (currentUser) {
+            <button type="button" class="btn-servers" (click)="openServersDialog()">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/>
+                <line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/>
+              </svg>
+              Servers
+            </button>
+            <button type="button" class="btn-new" (click)="openCreateDialog()">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+              </svg>
+              New tournament
+            </button>
+          }
+        </div>
       </div>
       <div class="tabs" role="tablist">
         <button type="button" class="tab-btn" [class.active]="tab === 'started'" (click)="setTab('started')">
@@ -218,6 +228,97 @@
     @if (joinError) {
       <div class="dialog-error">{{ joinError }}</div>
     }
+
+    <div class="join-divider">
+      <span class="join-divider-label">or join with an official bot</span>
+    </div>
+
+    <div class="official-bot-grid">
+      @for (d of officialDifficulties; track d) {
+        <button type="button" class="official-bot-btn"
+          [class]="'official-btn-' + d"
+          [disabled]="!!joiningOfficialDifficulty || !!joiningBotId"
+          (click)="joinWithOfficialBot(d)">
+          @if (joiningOfficialDifficulty === d) {
+            <span class="pulse"></span>
+          }
+          {{ d | titlecase }}
+        </button>
+      }
+    </div>
+
+    @if (officialJoinError) {
+      <div class="dialog-error">{{ officialJoinError }}</div>
+    }
+  </div>
+</div>
+}
+
+@if (showServersDialog) {
+<div class="dialog-overlay" (click)="closeServersDialog()">
+  <div class="dialog-card servers-dialog" (click)="$event.stopPropagation()">
+    <div class="dialog-head">
+      <span class="dialog-brand">Tournament servers</span>
+      <button type="button" class="dialog-close" (click)="closeServersDialog()">×</button>
+    </div>
+
+    <p class="join-hint">External tournament servers aggregated into this view. Tournaments from all servers appear in the list.</p>
+
+    @if (serversLoading) {
+      <div class="dialog-loading"><span class="pulse"></span>Loading servers…</div>
+    } @else if (servers.length === 0) {
+      <p class="join-empty">No external servers registered yet.</p>
+    } @else {
+      <div class="servers-list">
+        @for (s of servers; track s.id) {
+          <div class="server-row">
+            <div class="server-info">
+              <span class="server-label">{{ s.label }}</span>
+              <span class="server-url">{{ s.url }}</span>
+            </div>
+            <button type="button" class="server-remove-btn"
+              [disabled]="removingServerId === s.id"
+              (click)="removeServer(s.id)"
+              title="Remove server">
+              @if (removingServerId === s.id) { … } @else {
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                  stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
+                  <path d="M10 11v6"/><path d="M14 11v6"/>
+                  <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
+                </svg>
+              }
+            </button>
+          </div>
+        }
+      </div>
+    }
+
+    <div class="server-add-form">
+      <h4 class="server-add-heading">Add server</h4>
+      <div class="dialog-field">
+        <label class="dialog-label">Label</label>
+        <input type="text" class="dialog-input" [(ngModel)]="newServerLabel"
+          placeholder="e.g. Local Dev Server" />
+      </div>
+      <div class="dialog-field">
+        <label class="dialog-label">URL</label>
+        <input type="url" class="dialog-input" [(ngModel)]="newServerUrl"
+          placeholder="http://host:8089" />
+      </div>
+      @if (addServerError) {
+        <div class="dialog-error">{{ addServerError }}</div>
+      }
+      <div class="dialog-actions">
+        <button type="button" class="btn-ghost" (click)="closeServersDialog()">Close</button>
+        <button type="button" class="btn-primary"
+          [disabled]="addingServer || !newServerLabel.trim() || !newServerUrl.trim()"
+          (click)="addServer()">
+          {{ addingServer ? 'Adding…' : 'Add' }}
+        </button>
+      </div>
+    </div>
+
   </div>
 </div>
 }

src/app/pages/tournaments/tournaments.component.ts

@@ -1,11 +1,13 @@
 import { Component, DestroyRef, OnInit, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, TitleCasePipe } from '@angular/common';
 import { Router, RouterLink } from '@angular/router';
-import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TournamentService } from '../../services/tournament.service';
 import { AuthService } from '../../services/auth.service';
 import { BotService } from '../../services/bot.service';
+import { OfficialBotService } from '../../services/official-bot.service';
+import { TournamentServerService, ExternalTournamentServer } from '../../services/tournament-server.service';
 import { Bot } from '../../models/bot.models';
 import { Tournament, TournamentResult, RoundPairings } from '../../models/tournament.models';
 import { CurrentUser } from '../../models/auth.models';
@@ -15,7 +17,7 @@ type StatusTab = 'started' | 'created' | 'finished';
 @Component({
   selector: 'app-tournaments',
   standalone: true,
-  imports: [CommonModule, RouterLink, ReactiveFormsModule],
+  imports: [CommonModule, RouterLink, FormsModule, ReactiveFormsModule, TitleCasePipe],
   templateUrl: './tournaments.component.html',
   styleUrl: './tournaments.component.css'
 })
@@ -25,6 +27,8 @@ export class TournamentsComponent implements OnInit {
   private readonly authService = inject(AuthService);
   private readonly fb = inject(FormBuilder);
   private readonly botService = inject(BotService);
+  private readonly officialBotService = inject(OfficialBotService);
+  private readonly tournamentServerService = inject(TournamentServerService);
   private readonly router = inject(Router);
 
   loading = true;
@@ -58,6 +62,19 @@ export class TournamentsComponent implements OnInit {
   joiningBotId: string | null = null;
   joinError: string | null = null;
 
+  readonly officialDifficulties = ['easy', 'medium', 'hard', 'expert'] as const;
+  joiningOfficialDifficulty: string | null = null;
+  officialJoinError: string | null = null;
+
+  showServersDialog = false;
+  servers: ExternalTournamentServer[] = [];
+  serversLoading = false;
+  newServerLabel = '';
+  newServerUrl = '';
+  addingServer = false;
+  addServerError: string | null = null;
+  removingServerId: string | null = null;
+
   ngOnInit(): void {
     this.authService.currentUser$
       .pipe(takeUntilDestroyed(this.destroyRef))
@@ -170,6 +187,32 @@ export class TournamentsComponent implements OnInit {
     this.joinDialogTournamentId = null;
     this.joiningBotId = null;
     this.joinError = null;
+    this.joiningOfficialDifficulty = null;
+    this.officialJoinError = null;
+  }
+
+  joinWithOfficialBot(difficulty: string): void {
+    if (!this.joinDialogTournamentId || this.joiningOfficialDifficulty || this.joiningBotId) return;
+    this.joiningOfficialDifficulty = difficulty;
+    this.officialJoinError = null;
+    const tid = this.joinDialogTournamentId;
+    this.officialBotService.joinTournament(tid, difficulty).subscribe({
+      next: () => {
+        this.joiningOfficialDifficulty = null;
+        this.closeJoinDialog();
+        this.tournamentService.get(tid)
+          .pipe(takeUntilDestroyed(this.destroyRef))
+          .subscribe(updated => {
+            this.created = this.created.map(x => x.id === tid ? updated : x);
+            this.started = this.started.map(x => x.id === tid ? updated : x);
+            if (this.selectedTournament?.id === tid) this.selectedTournament = updated;
+          });
+      },
+      error: err => {
+        this.joiningOfficialDifficulty = null;
+        this.officialJoinError = err.error?.error ?? 'Failed to join with official bot.';
+      }
+    });
   }
 
   joinWithBot(bot: Bot): void {
@@ -204,6 +247,58 @@ export class TournamentsComponent implements OnInit {
     });
   }
 
+  openServersDialog(): void {
+    this.newServerLabel = '';
+    this.newServerUrl = '';
+    this.addServerError = null;
+    this.showServersDialog = true;
+    this.serversLoading = true;
+    this.tournamentServerService.list()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: res => { this.servers = res.servers; this.serversLoading = false; },
+        error: () => { this.serversLoading = false; }
+      });
+  }
+
+  closeServersDialog(): void {
+    this.showServersDialog = false;
+  }
+
+  addServer(): void {
+    const label = this.newServerLabel.trim();
+    const url = this.newServerUrl.trim();
+    if (!label || !url || this.addingServer) return;
+    this.addingServer = true;
+    this.addServerError = null;
+    this.tournamentServerService.register(label, url).subscribe({
+      next: server => {
+        this.addingServer = false;
+        this.servers = [...this.servers, server];
+        this.newServerLabel = '';
+        this.newServerUrl = '';
+        this.loadTournaments();
+      },
+      error: err => {
+        this.addingServer = false;
+        this.addServerError = err.error?.error ?? 'Failed to add server.';
+      }
+    });
+  }
+
+  removeServer(id: string): void {
+    if (this.removingServerId) return;
+    this.removingServerId = id;
+    this.tournamentServerService.remove(id).subscribe({
+      next: () => {
+        this.removingServerId = null;
+        this.servers = this.servers.filter(s => s.id !== id);
+        this.loadTournaments();
+      },
+      error: () => { this.removingServerId = null; }
+    });
+  }
+
   private loadTournaments(): void {
     this.tournamentService.list()
       .pipe(takeUntilDestroyed(this.destroyRef))

src/app/services/official-bot.service.ts

@@ -0,0 +1,22 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+export interface JoinTournamentResponse {
+  botId: string;
+  difficulty: string;
+  status: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class OfficialBotService {
+  private readonly http = inject(HttpClient);
+  private readonly base = '/api/bots/official';
+
+  joinTournament(tournamentId: string, difficulty: string): Observable<JoinTournamentResponse> {
+    return this.http.post<JoinTournamentResponse>(`${this.base}/join-tournament`, {
+      tournamentId,
+      difficulty,
+    });
+  }
+}

src/app/services/tournament-server.service.ts

@@ -0,0 +1,31 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+export interface ExternalTournamentServer {
+  id: string;
+  label: string;
+  url: string;
+}
+
+export interface ExternalTournamentServerList {
+  servers: ExternalTournamentServer[];
+}
+
+@Injectable({ providedIn: 'root' })
+export class TournamentServerService {
+  private readonly http = inject(HttpClient);
+  private readonly base = '/api/tournament/servers';
+
+  list(): Observable<ExternalTournamentServerList> {
+    return this.http.get<ExternalTournamentServerList>(this.base);
+  }
+
+  register(label: string, url: string): Observable<ExternalTournamentServer> {
+    return this.http.post<ExternalTournamentServer>(this.base, { label, url });
+  }
+
+  remove(id: string): Observable<void> {
+    return this.http.delete<void>(`${this.base}/${id}`);
+  }
+}