Phase 2: AniList OAuth, profile page, local history; CI + Vercel config

Connect AniList via the implicit grant (right fit for a backend-less
SPA): AuthService handles the authorize redirect, /auth/callback parses
the token fragment, expiry is respected, and the utility bar / mobile
header swap to the signed-in identity. The OAuth client ID is runtime-
configurable from the profile page so a deployment works without a
rebuild.

New /profile page: own stats when connected, any public profile via
?u= — status counts, episodes watched, score distribution, genre taste
with per-genre means, highest-rated studios. Recent comparisons and
groups persist to localStorage and reappear as profile modules and
one-click chips on the compare picker.

Add GitHub Actions CI (build + unit + e2e) and vercel.json (SPA
rewrites, output dir) — import the repo at vercel.com/new to deploy.
14 new unit tests, 4 new e2e specs; suite now 35 unit + 23 e2e.

Author: hazeliscoding

.github/workflows/ci.yml

@@ -0,0 +1,27 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: npm
+      - run: npm ci
+      - run: npm run build
+      - run: npm test
+      - run: npx playwright install chromium --with-deps
+      - run: npm run e2e
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-results
+          path: test-results/
+          retention-days: 7

README.md

@@ -12,6 +12,7 @@ Compare anime taste between [AniList](https://anilist.co) users. One place that
 - 📚 **Shared backlog** — titles in both plan-to-watch lists, ranked by predicted mutual score, with watch-together picks.
 - 👥 **Groups** — member stats, a pairwise taste-match heat matrix, and the backlog shared by the whole group.
 - 📱 **Mobile layout** — compact summary view with bottom navigation under 720px.
+- 🪪 **Profiles & sign-in** — view any public profile's stats (score distribution, genre taste, top studios), or connect your own AniList account via OAuth. Recent comparisons and groups persist locally.
 
 | Shared backlog | Groups | Mobile |
 | --- | --- | --- |
@@ -32,3 +33,9 @@ npm run build    # production build to dist/
 npm test         # unit tests (vitest)
 npm run e2e      # end-to-end tests (playwright, starts its own dev server)
 ```
+
+## ☁️ Deploy
+
+Built for [Vercel](https://vercel.com) — import the repo at vercel.com/new and the included `vercel.json` handles the SPA rewrites and output directory. CI (build + unit + e2e) runs on every push via GitHub Actions.
+
+To enable "Connect AniList" on a deployment: register an API client at [anilist.co/settings/developer](https://anilist.co/settings/developer) with redirect URL `https://<your-domain>/auth/callback`, then paste the client ID into the one-time setup on the profile page (or set it as the default in `src/app/api/auth.service.ts`).

ROADMAP.md

@@ -9,9 +9,9 @@
 - [x] User search wired to the header search input
 
 ## Phase 2 — Accounts
-- [ ] "Connect AniList" OAuth flow
-- [ ] My profile page
-- [ ] Persist recent comparisons and groups (local first, backend later)
+- [x] "Connect AniList" OAuth flow (implicit grant; register a client and paste the ID on the profile page)
+- [x] My profile page (own stats when connected, any public profile via `?u=`)
+- [x] Persist recent comparisons and groups (localStorage — backend sync later)
 
 ## Phase 3 — Depth
 - [ ] Recommendations page (predicted mutual scores across the full catalog)
@@ -24,4 +24,5 @@
 - [ ] Mobile layouts for Shared backlog and Groups
 - [ ] Density switcher (compact / standard / comfortable — tokens already support it)
 - [x] E2E smoke tests (Playwright)
-- [ ] CI (build + test) and deploy (static hosting)
+- [x] CI (GitHub Actions: build + unit + e2e)
+- [ ] Deploy to Vercel (`vercel.json` is ready — import the GitHub repo at vercel.com/new)

e2e/profile.spec.ts

@@ -0,0 +1,91 @@
+import { expect, test } from '@playwright/test';
+import { FIXTURES } from './fixtures';
+
+const VIEWER_RESPONSE = {
+  data: { Viewer: { id: 9, name: 'alice', avatar: { medium: null } } },
+};
+
+const mockAnilist = async (page: import('@playwright/test').Page) => {
+  await page.route('https://graphql.anilist.co/**', async (route) => {
+    const body = route.request().postDataJSON() as { query: string; variables?: { name?: string } };
+    if (body.query.includes('Viewer')) {
+      await route.fulfill({ json: VIEWER_RESPONSE });
+      return;
+    }
+    if (body.query.includes('users(search')) {
+      await route.fulfill({ json: { data: { Page: { users: [] } } } });
+      return;
+    }
+    const fixture = FIXTURES[body.variables?.name ?? ''];
+    if (!fixture) {
+      await route.fulfill({ status: 404, json: { errors: [{ message: 'User not found' }] } });
+      return;
+    }
+    await route.fulfill({ json: fixture });
+  });
+};
+
+test('logged out: connect prompt, unconfigured hint, public profile lookup', async ({ page }) => {
+  await mockAnilist(page);
+  await page.goto('/profile');
+  await expect(page.getByRole('heading', { name: 'My profile' })).toBeVisible();
+
+  // no OAuth client configured yet -> connect explains setup
+  await page.getByRole('button', { name: 'Connect AniList' }).click();
+  await expect(page.locator('.picker-error')).toContainText('client ID');
+
+  // any public profile can still be viewed
+  await page.getByPlaceholder('AniList username').fill('alice');
+  await page.getByRole('button', { name: 'View profile' }).click();
+  await expect(page.getByRole('heading', { name: 'alice' })).toBeVisible();
+  await expect(page).toHaveURL(/profile\?u=alice/);
+  await expect(page.getByText('3 completed')).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Genre taste' })).toBeVisible();
+});
+
+test('auth callback stores the token and profile shows the viewer', async ({ page }) => {
+  await mockAnilist(page);
+  await page.goto('/auth/callback#access_token=e2e-token&token_type=Bearer&expires_in=3600');
+  await expect(page).toHaveURL(/\/profile/);
+  await expect(page.getByText('Signed in as alice')).toBeVisible();
+  await expect(page.locator('.you')).toHaveText('YOU');
+  await expect(page.getByRole('button', { name: 'Log out' })).toBeVisible();
+
+  // log out returns to the connect prompt
+  await page.getByRole('button', { name: 'Log out' }).click();
+  await expect(page.getByRole('button', { name: 'Connect AniList' })).toBeVisible();
+  await expect(page.getByText('Connect AniList', { exact: true }).first()).toBeVisible();
+});
+
+test('comparisons land in history: profile modules and picker chips', async ({ page }) => {
+  await mockAnilist(page);
+  await page.goto('/compare');
+  await page.getByPlaceholder('first username').fill('alice');
+  await page.getByPlaceholder('second username').fill('bob');
+  await page.getByRole('button', { name: 'Compare', exact: true }).click();
+  await expect(page.locator('.user-name').first()).toHaveText('alice');
+
+  await page.goto('/profile');
+  const recents = page.locator('.recents').first();
+  await expect(recents.getByText('alice × bob')).toBeVisible();
+  await expect(recents.getByText(/\/100/)).toBeVisible();
+
+  // fresh compare page offers the recent pair as a one-click chip
+  await page.goto('/compare');
+  const chip = page.getByRole('button', { name: 'alice × bob' });
+  await expect(chip).toBeVisible();
+  await chip.click();
+  await expect(page.locator('.user-name').first()).toHaveText('alice');
+});
+
+test('groups land in history and reopen from profile', async ({ page }) => {
+  await mockAnilist(page);
+  await page.goto('/groups?users=alice,bob');
+  await expect(page.getByRole('columnheader', { name: 'alice' })).toBeVisible();
+
+  await page.goto('/profile');
+  const groupsModule = page.locator('.recents').nth(1);
+  await expect(groupsModule.getByText('alice, bob')).toBeVisible();
+  await groupsModule.getByText('alice, bob').click();
+  await expect(page).toHaveURL(/groups\?users=alice,bob/);
+});

src/app/api/anilist.service.ts

@@ -39,6 +39,12 @@ export interface AnilistUserHit {
   completed: number;
 }
 
+export interface AnilistViewer {
+  id: number;
+  name: string;
+  avatar: string | null;
+}
+
 const USER_LISTS_QUERY = `
 query ($name: String) {
   MediaListCollection(userName: $name, type: ANIME, forceSingleCompletedList: true) {
@@ -66,6 +72,15 @@ query ($name: String) {
   }
 }`;
 
+const VIEWER_QUERY = `
+query {
+  Viewer {
+    id
+    name
+    avatar { medium }
+  }
+}`;
+
 const USER_SEARCH_QUERY = `
 query ($search: String) {
   Page(perPage: 6) {
@@ -176,6 +191,22 @@ export class AnilistService {
     };
   }
 
+  /** Who does this OAuth token belong to? */
+  async getViewer(token: string): Promise<AnilistViewer> {
+    const res = await firstValueFrom(
+      this.http.post<{ data: { Viewer: { id: number; name: string; avatar: { medium: string | null } | null } | null } | null }>(
+        ANILIST_GRAPHQL,
+        { query: VIEWER_QUERY },
+        { headers: { Authorization: `Bearer ${token}` } },
+      ),
+    ).catch(() => {
+      throw new Error('AniList session is invalid or expired — connect again.');
+    });
+    const viewer = res.data?.Viewer;
+    if (!viewer) throw new Error('AniList session is invalid or expired — connect again.');
+    return { id: viewer.id, name: viewer.name, avatar: viewer.avatar?.medium ?? null };
+  }
+
   /** Search AniList users by name prefix. */
   async searchUsers(search: string): Promise<AnilistUserHit[]> {
     const res = await this.gql<GqlSearchResponse>(USER_SEARCH_QUERY, { search }, search);

src/app/api/auth.service.spec.ts

@@ -0,0 +1,49 @@
+import { TestBed } from '@angular/core/testing';
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    TestBed.configureTestingModule({});
+  });
+
+  it('parses the implicit-grant fragment and stores the token', () => {
+    const auth = TestBed.inject(AuthService);
+    expect(auth.handleCallback('#access_token=abc123&token_type=Bearer&expires_in=31536000')).toBe(true);
+    expect(auth.token()).toBe('abc123');
+    expect(auth.connected()).toBe(true);
+    expect(localStorage.getItem('animatch.token')).toBe('abc123');
+  });
+
+  it('rejects a fragment without a token', () => {
+    const auth = TestBed.inject(AuthService);
+    expect(auth.handleCallback('#error=access_denied')).toBe(false);
+    expect(auth.connected()).toBe(false);
+  });
+
+  it('drops expired tokens on startup', () => {
+    localStorage.setItem('animatch.token', 'stale');
+    localStorage.setItem('animatch.tokenExpiry', String(Date.now() - 1000));
+    const auth = TestBed.inject(AuthService);
+    expect(auth.token()).toBeNull();
+    expect(localStorage.getItem('animatch.token')).toBeNull();
+  });
+
+  it('logout clears the session', () => {
+    const auth = TestBed.inject(AuthService);
+    auth.handleCallback('#access_token=abc123');
+    auth.logout();
+    expect(auth.connected()).toBe(false);
+    expect(localStorage.getItem('animatch.token')).toBeNull();
+  });
+
+  it('is unconfigured without a client id and refuses login', () => {
+    const auth = TestBed.inject(AuthService);
+    expect(auth.configured()).toBe(false);
+    expect(auth.login()).toBe(false);
+    auth.setClientId(' 4242 ');
+    expect(auth.configured()).toBe(true);
+    expect(auth.authorizeUrl()).toContain('client_id=4242');
+    expect(auth.authorizeUrl()).toContain('response_type=token');
+  });
+});

src/app/api/auth.service.ts

@@ -0,0 +1,78 @@
+import { Injectable, computed, signal } from '@angular/core';
+
+/**
+ * AniList OAuth, implicit grant — the right fit for a backend-less SPA.
+ * Register a client at https://anilist.co/settings/developer with this app's
+ * URL as the redirect URI (e.g. https://your-app.vercel.app/auth/callback),
+ * then either set DEFAULT_CLIENT_ID at build time or paste the ID into the
+ * profile page at runtime (persisted to localStorage).
+ */
+const DEFAULT_CLIENT_ID = '';
+
+const TOKEN_KEY = 'animatch.token';
+const EXPIRY_KEY = 'animatch.tokenExpiry';
+const CLIENT_ID_KEY = 'animatch.clientId';
+
+@Injectable({ providedIn: 'root' })
+export class AuthService {
+  readonly token = signal<string | null>(this.readStoredToken());
+  readonly connected = computed(() => this.token() !== null);
+
+  readonly clientId = signal<string>(localStorage.getItem(CLIENT_ID_KEY) || DEFAULT_CLIENT_ID);
+  readonly configured = computed(() => this.clientId().trim().length > 0);
+
+  private readStoredToken(): string | null {
+    const token = localStorage.getItem(TOKEN_KEY);
+    if (!token) return null;
+    const expiry = Number(localStorage.getItem(EXPIRY_KEY) ?? 0);
+    if (expiry && Date.now() > expiry) {
+      localStorage.removeItem(TOKEN_KEY);
+      localStorage.removeItem(EXPIRY_KEY);
+      return null;
+    }
+    return token;
+  }
+
+  setClientId(id: string) {
+    const trimmed = id.trim();
+    this.clientId.set(trimmed);
+    if (trimmed) localStorage.setItem(CLIENT_ID_KEY, trimmed);
+    else localStorage.removeItem(CLIENT_ID_KEY);
+  }
+
+  authorizeUrl(): string {
+    return `https://anilist.co/api/v2/oauth/authorize?client_id=${encodeURIComponent(this.clientId())}&response_type=token`;
+  }
+
+  /** Redirect to AniList's consent screen. Returns false when unconfigured. */
+  login(): boolean {
+    if (!this.configured()) return false;
+    window.location.href = this.authorizeUrl();
+    return true;
+  }
+
+  /**
+   * Parse the implicit-grant fragment (#access_token=…&expires_in=…) that
+   * AniList appends to the redirect URI. Returns true when a token landed.
+   */
+  handleCallback(fragment: string): boolean {
+    const params = new URLSearchParams(fragment.replace(/^#/, ''));
+    const token = params.get('access_token');
+    if (!token) return false;
+    const expiresIn = Number(params.get('expires_in') ?? 0);
+    localStorage.setItem(TOKEN_KEY, token);
+    if (expiresIn > 0) {
+      localStorage.setItem(EXPIRY_KEY, String(Date.now() + expiresIn * 1000));
+    } else {
+      localStorage.removeItem(EXPIRY_KEY);
+    }
+    this.token.set(token);
+    return true;
+  }
+
+  logout() {
+    localStorage.removeItem(TOKEN_KEY);
+    localStorage.removeItem(EXPIRY_KEY);
+    this.token.set(null);
+  }
+}

src/app/api/history-store.spec.ts

@@ -0,0 +1,50 @@
+import { TestBed } from '@angular/core/testing';
+import { HistoryStore, relativeTime } from './history-store';
+
+describe('HistoryStore', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    TestBed.configureTestingModule({});
+  });
+
+  it('records comparisons newest-first and dedupes pairs', () => {
+    const store = TestBed.inject(HistoryStore);
+    store.recordComparison('alice', 'bob', 70);
+    store.recordComparison('carol', 'dan', 55);
+    store.recordComparison('alice', 'bob', 72);
+    expect(store.comparisons().map((c) => c.a)).toEqual(['alice', 'carol']);
+    expect(store.comparisons()[0].score).toBe(72);
+  });
+
+  it('caps history at 10 entries and persists to localStorage', () => {
+    const store = TestBed.inject(HistoryStore);
+    for (let i = 0; i < 13; i++) store.recordComparison(`u${i}`, 'x', i);
+    expect(store.comparisons()).toHaveLength(10);
+    const raw = JSON.parse(localStorage.getItem('animatch.recentComparisons')!);
+    expect(raw).toHaveLength(10);
+    expect(raw[0].a).toBe('u12');
+  });
+
+  it('dedupes groups regardless of member order', () => {
+    const store = TestBed.inject(HistoryStore);
+    store.recordGroup(['alice', 'bob']);
+    store.recordGroup(['bob', 'alice']);
+    expect(store.groups()).toHaveLength(1);
+  });
+
+  it('survives corrupt localStorage', () => {
+    localStorage.setItem('animatch.recentComparisons', '{not json');
+    const store = TestBed.inject(HistoryStore);
+    expect(store.comparisons()).toEqual([]);
+  });
+});
+
+describe('relativeTime', () => {
+  const now = 1_000_000_000_000;
+  it('formats seconds, minutes, hours, and days', () => {
+    expect(relativeTime(now - 30_000, now)).toBe('just now');
+    expect(relativeTime(now - 5 * 60_000, now)).toBe('5m ago');
+    expect(relativeTime(now - 3 * 3_600_000, now)).toBe('3h ago');
+    expect(relativeTime(now - 2 * 86_400_000, now)).toBe('2d ago');
+  });
+});