Polish map & UI into a command-center war-room; rewire live LLM endpoint

Map (WorldMap):
- Keep the near-black OpenFreeMap `dark` basemap (verified HTTP 200; the
  suggested dark-matter / dark-outdoors / liberty-dark variants 404 on that
  host) so the choropleth nation colors pop
- Stable per-nation fills at 0.8 opacity, thin subtle borders, and a brighter
  thicker amber border for the player nation so "this is me" is always obvious
- Hover brightens a region and shows a color-chipped owner + key stats popup;
  click opens a full dossier popup and focuses the left panel on that nation
- Transient, self-cleaning flash (pulsing amber outline) over regions whose
  ownership changed this turn
- Bottom-left legend auto-generated from the region map; per-scenario initial
  camera (Europe for the WWII scenarios, wider for Cold War / Modern / Aegis)

Command-center UI:
- New header bar: scenario title, prominent turn + date, the player nation
  (name + color chip), and a live Idle / "Simulating…" status indicator
- 3-column operations-console grid: nation dossier (left) / dominant map
  (center) / command deck + event feed (right); stacks map-first on mobile
- EventFeed: one card per event with a category icon, a colored outcome badge
  (success/failure/partial/neutral), a nation-colored accent edge, and the
  turn + date; new events slide in and flash at the top
- NationPanel: value-colored animated stat bars (red → green), territory as
  color-coded region chips, and diplomacy as a list with a colored indicator
  per relation (ally/rival/war/neutral)
- ActionPanel: a "Your move" composer with one prominent Send button and a
  spinner + "turns can take a few seconds" hint while a turn resolves
- sonner error toasts: a 502 / model-down surfaces as "AI temporarily
  unavailable — try again"

Live LLM rewire (server, previously uncommitted):
- Default endpoint https://ai.kkhost.pl/v1 (vLLM, no API key); reasoning model
  qwen3.8-27b; always send a generous max_tokens (4000) so it finishes its
  chain-of-thought before emitting content; read only `content`, ignore
  `reasoning`. docker-compose + AGENTS.md updated to match.

Tests: the deterministic Playwright e2e gains assertions for the dossier stat
bars, the map legend (all nations), and the event-card type icon + outcome
badge; it stays fully deterministic under LLM_STUB=1.
This commit is contained in:
2026-10-10 22:15:05 +00:00
parent e2936e85bb
commit e327e9aea0
15 changed files with 880 additions and 192 deletions
+27
View File
@@ -7,6 +7,11 @@ import { test, expect } from '@playwright/test';
* stat is set to (current + 5, clamped) each turn and exactly one event is
* emitted (action → military, chat → diplomatic, jump → political). There is no
* live LLM and no flakiness — every assertion below is an exact, predicted value.
*
* Beyond the core simulation loop it also asserts the polished command-center
* UI: the dossier's animated stat bars, the map legend (generated from the
* region map), and the new event cards (type icon + label + colored outcome
* badge). The map itself is a canvas, so we assert on its DOM legend, not pixels.
*/
test.describe('History — deterministic simulation (LLM_STUB=1)', () => {
test('scenario → nation → action → jump, with predicted stat changes', async ({ page }) => {
@@ -33,11 +38,22 @@ test.describe('History — deterministic simulation (LLM_STUB=1)', () => {
await expect(page.getByTestId('event-feed-panel')).toBeVisible();
await expect(page.getByTestId('turn-count')).toHaveText('1');
// The dossier shows the player's four stat bars (value-colored, animated).
await expect(page.getByTestId('stat-military')).toBeVisible();
await expect(page.getByTestId('stat-economy')).toBeVisible();
await expect(page.getByTestId('stat-stability')).toBeVisible();
await expect(page.getByTestId('stat-population')).toBeVisible();
// The player (UK) starts at military 80, with no events yet.
const military = page.getByTestId('stat-military');
await expect(military).toHaveText('80');
await expect(page.getByTestId('event-item')).toHaveCount(0);
// The map legend is auto-generated from the region map: all 7 nations of the
// scenario own at least one region, including the player (United Kingdom).
await expect(page.getByTestId('map-legend-item')).toHaveCount(7, { timeout: 15000 });
await expect(page.getByTestId('map-legend-item').filter({ hasText: 'United Kingdom' })).toBeVisible();
// Take an action: the stub bumps UK military to 85 and emits a military event.
await page.getByTestId('action-textarea').fill('Mobilize the home guard and fortify Dover');
await page.getByTestId('action-submit').click();
@@ -49,6 +65,11 @@ test.describe('History — deterministic simulation (LLM_STUB=1)', () => {
page.getByTestId('event-feed').getByText('Mobilize the home guard and fortify Dover').first(),
).toBeVisible();
// The new event card carries its type (icon + label) and a colored outcome badge.
await expect(page.getByTestId('event-item').first().getByTestId('event-type-icon')).toBeVisible();
await expect(page.getByTestId('event-item').first().getByTestId('event-type')).toHaveText('military');
await expect(page.getByTestId('event-item').first().getByTestId('event-outcome')).toHaveText('success');
// Jump forward (no action): a "world moves on" political event, military → 90.
await page.getByTestId('jump-forward').click();
@@ -56,5 +77,11 @@ test.describe('History — deterministic simulation (LLM_STUB=1)', () => {
await expect(military).toHaveText('90', { timeout: 20000 });
await expect(page.getByTestId('event-item')).toHaveCount(2);
await expect(page.getByTestId('event-feed').getByText('The world moves on').first()).toBeVisible();
// Newest first: the jump event (political / neutral) sits on top, and the
// action event (military / success) is second — both with their outcome badges.
await expect(page.getByTestId('event-item').first().getByTestId('event-type')).toHaveText('political');
await expect(page.getByTestId('event-item').first().getByTestId('event-outcome')).toHaveText('neutral');
await expect(page.getByTestId('event-item').nth(1).getByTestId('event-outcome')).toHaveText('success');
});
});