1 files changed, 1464 insertions, 499 deletions

diff --git a/gui/src/app.rs b/gui/src/app.rs
index b5a50b3..f0efd3e 100644
--- a/gui/src/app.rs
+++ b/gui/src/app.rs
@@ -1,75 +1,916 @@
-//! The desktop shell: header, roulette table, and betting sidebar.
-//!
-//! Phase 3 is a style spike. The table is painted from a demo `RouletteView`
-//! built with the core's own types, but no command is sent yet: Phase 4 wires
-//! the transport and replaces the demo state with `ClientCore`.
+//! The desktop shell: screens, session state, and the bridge to the core.
 
-use std::f32::consts::TAU;
+use std::collections::VecDeque;
+use std::path::PathBuf;
+use std::sync::mpsc::Sender;
+use std::time::{Duration, Instant};
 
 use eframe::egui::{
-    self, Align, Button, CentralPanel, Color32, Context, Frame, Key, Layout, Margin, Panel,
-    RichText, Sense, Stroke, Ui, Vec2, vec2,
+    self, Align, Align2, CentralPanel, Color32, Context, Frame, Key, Layout, Margin, Panel,
+    RichText, Sense, Stroke, TextEdit, Ui, Vec2, vec2,
 };
-use zagan_bet::client::games::roulette::Cursor;
-use zagan_bet::client::view::{RoulettePhase, RouletteView};
-use zagan_bet::roulette::{BetTarget, Bets, Outside, WHEEL, color as wheel_color};
-use zagan_bet::version::VERSION;
+use rusqlite::Connection;
+use sha2::{Digest, Sha256};
+use zagan_bet::client::core::{ClientCore, Effect};
+use zagan_bet::client::database;
+use zagan_bet::client::paths;
+use zagan_bet::client::view::{Command, LobbyView, View};
+use zagan_bet::history::PlayRecord;
+use zagan_bet::version::{VERSION, is_newer};
 
-use crate::roulette::FeltAction;
-use crate::{roulette, theme};
+use crate::net::{Command as NetCommand, Connected, Event, Failure, Network};
+use crate::{blackjack, crash, roulette, slots, theme, widgets};
 
-const HEADER_HEIGHT: f32 = 64.0;
-const SIDEBAR_WIDTH: f32 = 336.0;
-const SPIN_SECONDS: f64 = 2.4;
-/// Demo winners, cycled: a red, a zero, a red, a black, a black, a black.
-const DEMO_TARGETS: [u8; 6] = [17, 0, 32, 26, 8, 11];
-const CHIP_SIZES: [u64; 4] = [10, 25, 50, 100];
+/// A request that has no reply after this long kills the connection, matching
+/// the terminal adapter's socket timeout.
+const REQUEST_TIMEOUT: Duration = Duration::from_secs(10);
+const NOTICE_SECONDS: u64 = 6;
+const DEFAULT_BET: u64 = 10;
+
+/// Where the app keeps its files and whether TLS is bypassed.
+pub struct Startup {
+    pub data_dir: PathBuf,
+    pub unsafe_mode: bool,
+}
 
 pub struct ZaganApp {
-    demo: Demo,
+    core: ClientCore,
+    net: Network,
+    db: Option<Connection>,
+    db_error: Option<String>,
+    unsafe_mode: bool,
+
+    session: Option<Session>,
+    connect: ConnectState,
+    login: LoginState,
+    trust: Option<TrustState>,
+    key_changed: Option<KeyChanged>,
+    leave_confirm: bool,
+    notices: VecDeque<Notice>,
+    awaiting: Option<Instant>,
+    need_info: bool,
+    pending_login: Option<(String, String)>,
+    /// Displayed balance while a result animation runs: stake deducted, no
+    /// winnings yet. The view already knows the outcome; the player must not.
+    balance_hold: Option<i64>,
+    balance: Option<i64>,
+    account: Option<String>,
+    fx: Fx,
+}
+
+struct Session {
+    host: String,
+    fingerprint: Option<String>,
+    ping_ms: f32,
+    server_version: String,
+    latest: String,
+    url: String,
+    user: Option<String>,
+}
+
+#[derive(Default)]
+struct ConnectState {
+    addr: String,
+    error: Option<String>,
+    version_issue: bool,
+    pending: bool,
+}
+
+#[derive(Default)]
+struct LoginState {
+    user: String,
+    password: String,
+    error: Option<String>,
+    remember: bool,
+}
+
+impl LoginState {
+    fn new() -> Self {
+        Self {
+            remember: true,
+            ..Self::default()
+        }
+    }
+}
+
+struct TrustState {
+    addr: String,
+    fingerprint: String,
+    reply: Sender<bool>,
+}
+
+struct KeyChanged {
+    addr: String,
+    expected: String,
+    observed: String,
+}
+
+struct Notice {
+    text: String,
+    at: Instant,
+    tone: Tone,
+}
+
+#[derive(Clone, Copy, PartialEq, Eq)]
+enum Tone {
+    Info,
+    Good,
+    Bad,
+}
+
+#[derive(Default)]
+struct Fx {
+    game: Option<String>,
+    roulette: roulette::Fx,
+    slots: slots::Fx,
+    crash: crash::Fx,
+}
+
+impl Fx {
+    /// Reset the animation state when the player enters or leaves a game.
+    fn sync(&mut self, game: Option<&str>) -> bool {
+        if self.game.as_deref() != game {
+            let game = game.map(str::to_string);
+            *self = Fx {
+                game,
+                ..Fx::default()
+            };
+            return true;
+        }
+        false
+    }
 }
 
 impl ZaganApp {
-    pub fn new(cc: &eframe::CreationContext<'_>) -> Self {
+    pub fn new(cc: &eframe::CreationContext<'_>, startup: Startup) -> Self {
         theme::install(&cc.egui_ctx);
-        Self { demo: Demo::new() }
+
+        let db_path = paths::database_path(&startup.data_dir);
+        let (db, db_error) = match Connection::open(&db_path) {
+            Ok(conn) => {
+                let _ = conn.busy_timeout(Duration::from_secs(2));
+                database::init_db(&conn);
+                (Some(conn), None)
+            }
+            Err(error) => (
+                None,
+                Some(format!("Cannot open {}: {error}", db_path.display())),
+            ),
+        };
+        let addr = db
+            .as_ref()
+            .and_then(database::get_last_host)
+            .unwrap_or_else(|| "127.0.0.1:11525".to_string());
+
+        let net = Network::spawn(
+            cc.egui_ctx.clone(),
+            startup.data_dir.clone(),
+            startup.unsafe_mode,
+        );
+
+        Self {
+            core: ClientCore::new(),
+            net,
+            db,
+            db_error,
+            unsafe_mode: startup.unsafe_mode,
+            session: None,
+            connect: ConnectState {
+                addr,
+                ..ConnectState::default()
+            },
+            login: LoginState::new(),
+            trust: None,
+            key_changed: None,
+            leave_confirm: false,
+            notices: VecDeque::new(),
+            awaiting: None,
+            need_info: false,
+            pending_login: None,
+            balance_hold: None,
+            balance: None,
+            account: None,
+            fx: Fx::default(),
+        }
+    }
+
+    fn screen(&mut self, ui: &mut Ui) {
+        if let Some(error) = self.db_error.clone() {
+            fatal(ui, &error);
+            return;
+        }
+
+        let view = self.core.view();
+        if self.session.is_none() {
+            connect_screen(ui, self);
+            return;
+        }
+
+        match view {
+            Some(View::Lobby(lobby)) if lobby.user.is_none() => login_screen(ui, self, &lobby),
+            Some(View::Lobby(lobby)) => lobby_screen(ui, self, &lobby),
+            Some(View::History(history)) => history_screen(ui, self, &history.records),
+            Some(View::Slots(view)) => {
+                let command = slots::show(ui, &view, &mut self.fx.slots);
+                if command == Some(Command::Spin) {
+                    self.balance_hold = self
+                        .balance
+                        .map(|balance| (balance - view.bet as i64).max(0));
+                }
+                if let Some(command) = command {
+                    self.command(ui.ctx(), command);
+                }
+            }
+            Some(View::Roulette(view)) => {
+                let command = roulette::show(ui, &view, &mut self.fx.roulette);
+                if command == Some(Command::Spin) {
+                    self.balance_hold = self
+                        .balance
+                        .map(|balance| (balance - view.bets.total() as i64).max(0));
+                }
+                if let Some(command) = command {
+                    self.command(ui.ctx(), command);
+                }
+            }
+            Some(View::Blackjack(view)) => {
+                if let Some(command) = blackjack::show(ui, &view) {
+                    self.command(ui.ctx(), command);
+                }
+            }
+            Some(View::Crash(view)) => {
+                let command = crash::show(ui, &view, &mut self.fx.crash);
+                if let Some(command) = command {
+                    self.command(ui.ctx(), command);
+                }
+            }
+            None => {}
+        }
+    }
+
+    /// Run one core command, holding back a leave that would forfeit a live
+    /// round until the player confirms.
+    fn command(&mut self, ctx: &Context, command: Command) {
+        if command == Command::Leave && self.core.is_live_game() {
+            self.leave_confirm = true;
+            return;
+        }
+        if command == Command::Logout {
+            self.need_info = false;
+            self.account = None;
+            self.balance = None;
+            self.pending_login = None;
+            if let Some(session) = &mut self.session {
+                session.user = None;
+            }
+        }
+        let effects = self.core.command(command);
+        self.apply(ctx, effects);
+    }
+
+    fn apply(&mut self, ctx: &Context, effects: Vec<Effect>) {
+        for effect in effects {
+            match effect {
+                Effect::Print(lines) => {
+                    // Multi-line prints are terminal tables (history, help,
+                    // info); the GUI draws those from `View` instead.
+                    if lines.len() == 1 {
+                        if let Some(line) = lines.first() {
+                            self.notice(line);
+                        }
+                    }
+                }
+                Effect::SendLine(line) => {
+                    self.net.send(NetCommand::Send(line));
+                    self.awaiting = Some(Instant::now());
+                }
+                Effect::Disconnect => {
+                    self.net.send(NetCommand::Disconnect);
+                    self.core.reset_after_disconnect();
+                    self.session = None;
+                    self.awaiting = None;
+                    self.need_info = false;
+                    self.account = None;
+                    self.balance = None;
+                    self.balance_hold = None;
+                }
+                Effect::ClearRegion | Effect::Render(_) => {}
+                Effect::Quit => ctx.send_viewport_cmd(egui::ViewportCommand::Close),
+            }
+        }
+    }
+
+    fn notice(&mut self, text: &str) {
+        // `info` is fetched to fill the header; its terminal lines are not
+        // news to the GUI.
+        if text.starts_with("Connected to:")
+            || text.starts_with("Fingerprint:")
+            || text.starts_with("User:")
+            || text.starts_with("Account:")
+            || text.starts_with("Balance:")
+        {
+            return;
+        }
+        let tone = if text.starts_with("ERROR")
+            || text.contains("failed")
+            || text.contains("Failed")
+            || text.contains("lost")
+        {
+            Tone::Bad
+        } else if text.starts_with("Logged in")
+            || text.starts_with("Account created")
+            || text.contains("saved")
+        {
+            Tone::Good
+        } else {
+            Tone::Info
+        };
+        self.notices.push_back(Notice {
+            text: text.to_string(),
+            at: Instant::now(),
+            tone,
+        });
+        while self.notices.len() > 3 {
+            self.notices.pop_front();
+        }
+    }
+
+    fn pump(&mut self, ctx: &Context) {
+        while let Some(event) = self.net.try_recv() {
+            match event {
+                Event::Trust {
+                    addr,
+                    fingerprint,
+                    reply,
+                } => {
+                    self.trust = Some(TrustState {
+                        addr,
+                        fingerprint,
+                        reply,
+                    });
+                }
+                Event::Connected(connected) => self.connected(ctx, connected),
+                Event::Failed {
+                    addr,
+                    failure,
+                    message,
+                } => self.failed(addr, failure, message),
+                Event::Line(line) => {
+                    if self.core.is_async(&line) {
+                        if let Some(effects) = self.core.handle_async_line(&line) {
+                            self.apply(ctx, effects);
+                        }
+                    } else {
+                        self.awaiting = None;
+                        let effects = self.core.handle_reply(&line);
+                        self.apply(ctx, effects);
+                    }
+                }
+                Event::Closed => {
+                    self.session = None;
+                    self.awaiting = None;
+                    self.core.reset_after_disconnect();
+                    self.notice("Connection lost");
+                    ctx.request_repaint();
+                }
+            }
+        }
+    }
+
+    fn connected(&mut self, ctx: &Context, connected: Connected) {
+        self.connect.pending = false;
+        self.connect.error = None;
+        self.core.set_connected(true);
+        self.core
+            .set_host_info(Some(connected.addr.clone()), connected.fingerprint.clone());
+        self.core.set_logged_in(connected.user.clone());
+        self.login.error = connected.auth_error.clone();
+        self.login.user = connected.user.clone().unwrap_or_default();
+
+        if let Some(db) = &self.db {
+            database::save_host(db, &connected.addr);
+        }
+        self.session = Some(Session {
+            host: connected.addr,
+            fingerprint: connected.fingerprint,
+            ping_ms: connected.elapsed_ms,
+            server_version: connected.server_version,
+            latest: connected.latest,
+            url: connected.url,
+            user: connected.user,
+        });
+
+        self.need_info = self.session.as_ref().is_some_and(|s| s.user.is_some());
+        self.account = None;
+        if self.need_info {
+            let effects = self.core.command(Command::Info);
+            self.apply(ctx, effects);
+            self.need_info = false;
+        }
+    }
+
+    fn failed(&mut self, addr: String, failure: Failure, message: String) {
+        self.connect.pending = false;
+        self.session = None;
+        self.core.set_connected(false);
+        self.awaiting = None;
+        match failure {
+            Failure::KeyChanged { expected, observed } => {
+                self.key_changed = Some(KeyChanged {
+                    addr,
+                    expected,
+                    observed,
+                });
+            }
+            Failure::VersionMismatch => {
+                self.connect.version_issue = true;
+                self.connect.error = Some(message);
+            }
+            Failure::TrustDeclined => {
+                self.trust = None;
+                self.connect.error = Some("Certificate was not trusted.".to_string());
+            }
+            Failure::Timeout => {
+                self.trust = None;
+                self.connect.error = Some("Connection timed out.".to_string());
+            }
+            Failure::Other => {
+                self.trust = None;
+                self.connect.error = Some(message);
+            }
+        }
+    }
+
+    fn begin_connect(&mut self, addr: &str) {
+        let addr = normalize_addr(addr);
+        self.connect.addr = addr.clone();
+        self.connect.error = None;
+        self.connect.version_issue = false;
+        self.connect.pending = true;
+        self.login.error = None;
+        self.net.send(NetCommand::Connect { addr });
+    }
+
+    fn disconnect(&mut self) {
+        self.net.send(NetCommand::Disconnect);
+        self.core.reset_after_disconnect();
+        self.session = None;
+        self.awaiting = None;
+        self.trust = None;
+        self.key_changed = None;
+        self.need_info = false;
+        self.account = None;
+        self.balance = None;
+        self.balance_hold = None;
+    }
+
+    fn trust_decision(&mut self, accept: bool) {
+        if let Some(trust) = self.trust.take() {
+            let _ = trust.reply.send(accept);
+            if !accept {
+                self.connect.error = Some("Certificate was not trusted.".to_string());
+            }
+        }
+    }
+
+    fn forget_trusted_host(&mut self, addr: &str) {
+        let Some(db) = &self.db else { return };
+        match database::forget_host(db, addr) {
+            Ok(_) => {
+                self.key_changed = None;
+                self.begin_connect(addr);
+            }
+            Err(error) => self.connect.error = Some(format!("Failed to forget host: {error}")),
+        }
+    }
+
+    fn forget_login(&mut self) {
+        let Some(fingerprint) = self
+            .session
+            .as_ref()
+            .and_then(|session| session.fingerprint.clone())
+        else {
+            return;
+        };
+        let Some(db) = &self.db else { return };
+        match database::forget_credentials(db, &fingerprint) {
+            Ok(true) => self.notice("Saved login forgotten. Trust is unchanged."),
+            Ok(false) => self.notice("No saved login for this server."),
+            Err(error) => self.notice(&format!("Failed to forget the login: {error}")),
+        }
+    }
+
+    fn login(&mut self, ctx: &Context, registering: bool) {
+        let user = self.login.user.trim().to_string();
+        if user.is_empty() || self.login.password.is_empty() {
+            self.login.error = Some("Enter a username and a password.".to_string());
+            return;
+        }
+        let credential = format!("{:x}", Sha256::digest(self.login.password.as_bytes()));
+        self.login.password.clear();
+        self.login.error = None;
+        let command = if registering {
+            Command::Register { user, credential }
+        } else {
+            self.need_info = true;
+            if self.login.remember {
+                self.pending_login = Some((user.clone(), credential.clone()));
+            }
+            Command::Login { user, credential }
+        };
+        let effects = self.core.command(command);
+        self.apply(ctx, effects);
+    }
+
+    fn tick(&mut self, ctx: &Context) {
+        // Request deadline, mirroring the terminal's socket timeout.
+        if self.need_info
+            && self
+                .session
+                .as_ref()
+                .is_some_and(|session| session.user.is_some())
+            && self.account.is_none()
+        {
+            let effects = self.core.command(Command::Info);
+            self.apply(ctx, effects);
+            self.need_info = false;
+        }
+
+        if let Some(sent) = self.awaiting {
+            if sent.elapsed() > REQUEST_TIMEOUT {
+                self.awaiting = None;
+                self.net.send(NetCommand::Disconnect);
+                self.session = None;
+                self.core.reset_after_disconnect();
+                let effects = self.core.handle_reply("ERROR Request timed out");
+                self.apply(ctx, effects);
+                self.notice("Request timed out. Disconnected.");
+            }
+        }
+
+        let game = self.core.current_game_type().map(str::to_string);
+        if self.fx.sync(game.as_deref()) {
+            self.balance_hold = None;
+        }
+
+        match game.as_deref() {
+            Some("crash") => {
+                let effects = self.core.tick();
+                self.apply(ctx, effects);
+                if let Some(View::Crash(view)) = self.core.view() {
+                    self.fx.crash.tick(ctx, &view);
+                    if view.status == "running" || view.status == "starting" {
+                        ctx.request_repaint_after(Duration::from_millis(16));
+                    }
+                }
+            }
+            Some("slots") => {
+                if let Some(View::Slots(view)) = self.core.view() {
+                    self.fx.slots.tick(ctx, &view);
+                }
+            }
+            Some("roulette") => {
+                if let Some(View::Roulette(view)) = self.core.view() {
+                    self.fx.roulette.tick(ctx, &view);
+                }
+            }
+            _ => {}
+        }
+
+        // Hold the balance at the staked amount until the reels or wheel stop,
+        // so the payout is not visible before the animation reveals it.
+        if self.balance_hold.is_some() && !self.result_animating(ctx, game.as_deref()) {
+            self.balance_hold = None;
+        }
+
+        self.keys(ctx, game.as_deref());
+
+        // A successful manual login can be remembered for the next connect.
+        if let Some((user, credential)) = self.pending_login.clone() {
+            if self
+                .core
+                .view()
+                .as_ref()
+                .is_some_and(|view| matches!(view, View::Lobby(lobby) if lobby.user.is_some()))
+            {
+                if let Some(fingerprint) = self
+                    .session
+                    .as_ref()
+                    .and_then(|session| session.fingerprint.as_deref())
+                {
+                    if let Some(db) = &self.db {
+                        let _ = database::save_credentials(db, fingerprint, &user, &credential);
+                        self.notice("Login saved for this server.");
+                    }
+                }
+                self.pending_login = None;
+            }
+        }
+
+        // Cache the header data, which game views do not all carry.
+        if let Some(view) = self.core.view() {
+            match view {
+                View::Lobby(lobby) => {
+                    if let Some(session) = &mut self.session {
+                        session.user = lobby.user.clone();
+                    }
+                    if lobby.user.is_none() {
+                        self.balance = None;
+                        self.account = None;
+                    } else {
+                        if let Some(account) = lobby.account {
+                            self.account = Some(account);
+                        }
+                        if let Some(balance) = lobby.balance {
+                            if self.balance_hold.is_none() {
+                                self.balance = Some(balance);
+                            }
+                        }
+                    }
+                }
+                View::History(_) => {}
+                other => {
+                    if self.balance_hold.is_none() {
+                        if let Some(balance) = balance_of(&other) {
+                            self.balance = Some(balance);
+                        }
+                    }
+                }
+            }
+        }
+
+        self.notices
+            .retain(|notice| notice.at.elapsed() < Duration::from_secs(NOTICE_SECONDS));
+        if !self.notices.is_empty() {
+            ctx.request_repaint_after(Duration::from_millis(500));
+        }
+    }
+
+    /// True while a spin's result is still being animated.
+    fn result_animating(&self, ctx: &Context, game: Option<&str>) -> bool {
+        match game {
+            Some("slots") => match self.core.view() {
+                Some(View::Slots(view)) if view.error.is_none() => {
+                    !self.fx.slots.revealed(ctx, &view)
+                }
+                _ => false,
+            },
+            Some("roulette") => match self.core.view() {
+                Some(View::Roulette(view)) if view.error.is_none() => {
+                    !self.fx.roulette.revealed(&view)
+                }
+                _ => false,
+            },
+            _ => false,
+        }
+    }
+
+    /// The few keys that stay useful when the pointer is elsewhere. Buttons
+    /// keep focus, so this only fires when nothing is focused.
+    fn keys(&mut self, ctx: &Context, game: Option<&str>) {
+        if self.session.is_none() || !ctx.memory(|memory| memory.focused().is_none()) {
+            return;
+        }
+        let (space, clear, cash, hit, stand, double) = ctx.input(|input| {
+            (
+                input.key_pressed(Key::Space),
+                input.key_pressed(Key::C),
+                input.key_pressed(Key::C),
+                input.key_pressed(Key::H),
+                input.key_pressed(Key::S),
+                input.key_pressed(Key::D),
+            )
+        });
+        let command = match game {
+            Some("roulette") => {
+                if space {
+                    self.fx.roulette.spin_requested();
+                    Some(Command::Spin)
+                } else if clear {
+                    Some(Command::ClearBets)
+                } else {
+                    None
+                }
+            }
+            Some("slots") if space => Some(Command::Spin),
+            Some("crash") => {
+                if cash {
+                    Some(Command::CashOut)
+                } else if space {
+                    Some(Command::Start)
+                } else {
+                    None
+                }
+            }
+            Some("blackjack") => {
+                if hit {
+                    Some(Command::Hit)
+                } else if stand {
+                    Some(Command::Stand)
+                } else if double {
+                    Some(Command::Double)
+                } else if space {
+                    Some(Command::Deal)
+                } else {
+                    None
+                }
+            }
+            _ => None,
+        };
+        if let Some(command) = command {
+            self.command(ctx, command);
+        }
+    }
+
+    fn modals(&mut self, ctx: &Context) {
+        if let Some(trust) = &self.trust {
+            let addr = trust.addr.clone();
+            let fingerprint = trust.fingerprint.clone();
+            let mut decision = None;
+            egui::Modal::new(egui::Id::unique("trust")).show(ctx, |ui| {
+                ui.set_width(460.0);
+                ui.label(
+                    RichText::new("New server certificate")
+                        .font(theme::sans(20.0))
+                        .color(theme::TEXT),
+                );
+                ui.add_space(theme::SPACE_2);
+                widgets::note(
+                    ui,
+                    "This is the first time this client has seen this server. \
+                     Check the fingerprint before trusting it.",
+                );
+                ui.add_space(theme::SPACE_3);
+                widgets::row(ui, "Address", &addr, theme::TEXT);
+                widgets::mono_text(ui, &fingerprint, theme::ACCENT);
+                ui.add_space(theme::SPACE_3);
+                widgets::note(
+                    ui,
+                    "Future connections must present the same key. A changed key is refused.",
+                );
+                ui.add_space(theme::SPACE_4);
+                ui.horizontal(|ui| {
+                    if widgets::primary(ui, "TRUST", true, 130.0, 40.0) {
+                        decision = Some(true);
+                    }
+                    ui.add_space(theme::SPACE_2);
+                    if widgets::secondary(ui, "CANCEL", true, 110.0, 40.0) {
+                        decision = Some(false);
+                    }
+                });
+            });
+            if let Some(accept) = decision {
+                self.trust_decision(accept);
+            }
+        }
+
+        if let Some(changed) = &self.key_changed {
+            let addr = changed.addr.clone();
+            let expected = changed.expected.clone();
+            let observed = changed.observed.clone();
+            let mut action = None;
+            egui::Modal::new(egui::Id::unique("key-changed")).show(ctx, |ui| {
+                ui.set_width(520.0);
+                ui.label(
+                    RichText::new("SERVER KEY CHANGED")
+                        .font(theme::mono(16.0))
+                        .color(theme::LOSS),
+                );
+                ui.add_space(theme::SPACE_2);
+                widgets::note(
+                    ui,
+                    "A server that used to present a different certificate is answering. \
+                     This can mean the server was reinstalled, or that someone is \
+                     intercepting the connection.",
+                );
+                ui.add_space(theme::SPACE_3);
+                widgets::row(ui, "Address", &addr, theme::TEXT);
+                widgets::mono_text(ui, &format!("expected {expected}"), theme::TEXT_DIM);
+                widgets::mono_text(ui, &format!("observed {observed}"), theme::LOSS);
+                ui.add_space(theme::SPACE_4);
+                ui.horizontal(|ui| {
+                    if widgets::primary(ui, "FORGET AND RECONNECT", true, 220.0, 40.0) {
+                        action = Some(true);
+                    }
+                    ui.add_space(theme::SPACE_2);
+                    if widgets::secondary(ui, "CANCEL", true, 110.0, 40.0) {
+                        action = Some(false);
+                    }
+                });
+            });
+            match action {
+                Some(true) => self.forget_trusted_host(&addr),
+                Some(false) => {
+                    self.key_changed = None;
+                    self.connect.error = Some("Server key changed. Trust not reset.".to_string());
+                }
+                None => {}
+            }
+        }
+
+        if self.leave_confirm {
+            let mut action = None;
+            egui::Modal::new(egui::Id::unique("leave-confirm")).show(ctx, |ui| {
+                ui.set_width(400.0);
+                ui.label(
+                    RichText::new("Leave the table?")
+                        .font(theme::sans(19.0))
+                        .color(theme::TEXT),
+                );
+                ui.add_space(theme::SPACE_2);
+                widgets::note(
+                    ui,
+                    "A live hand or round is forfeited. The reserved bet is lost.",
+                );
+                ui.add_space(theme::SPACE_4);
+                ui.horizontal(|ui| {
+                    if widgets::primary(ui, "FORFEIT AND LEAVE", true, 190.0, 40.0) {
+                        action = Some(true);
+                    }
+                    ui.add_space(theme::SPACE_2);
+                    if widgets::secondary(ui, "STAY", true, 100.0, 40.0) {
+                        action = Some(false);
+                    }
+                });
+            });
+            if let Some(leave) = action {
+                self.leave_confirm = false;
+                if leave {
+                    let effects = self.core.command(Command::Leave);
+                    self.apply(ctx, effects);
+                }
+            }
+        }
+    }
+
+    fn toasts(&self, ctx: &Context) {
+        if self.notices.is_empty() {
+            return;
+        }
+        egui::Area::new(egui::Id::unique("toasts"))
+            .anchor(Align2::LEFT_BOTTOM, vec2(24.0, -24.0))
+            .order(egui::Order::Foreground)
+            .interactable(false)
+            .show(ctx, |ui| {
+                ui.set_min_width(220.0);
+                ui.set_max_width(460.0);
+                ui.spacing_mut().item_spacing.y = theme::SPACE_2;
+                for notice in &self.notices {
+                    let color = match notice.tone {
+                        Tone::Bad => theme::LOSS,
+                        Tone::Good => theme::WIN,
+                        Tone::Info => theme::TEXT_DIM,
+                    };
+                    Frame::new()
+                        .fill(theme::SURFACE_RAISED)
+                        .stroke(Stroke::new(1.0, theme::LINE))
+                        .corner_radius(theme::RADIUS_MD)
+                        .inner_margin(Margin::symmetric(14, 8))
+                        .show(ui, |ui| {
+                            ui.set_min_width(226.0);
+                            ui.set_max_width(440.0);
+                            ui.label(
+                                RichText::new(&notice.text)
+                                    .font(theme::sans(12.0))
+                                    .color(color),
+                            );
+                        });
+                }
+            });
     }
 }
 
 impl eframe::App for ZaganApp {
     fn ui(&mut self, ui: &mut Ui, _frame: &mut eframe::Frame) {
-        self.demo.tick(ui.ctx());
-        self.demo.keys(ui.ctx());
-
-        Panel::top("header")
-            .exact_size(HEADER_HEIGHT)
-            .frame(
-                Frame::new()
-                    .fill(theme::SURFACE)
-                    .inner_margin(Margin::symmetric(theme::SPACE_5 as i8, 0)),
-            )
-            .show(ui, |ui| header(ui, &self.demo));
-
-        Panel::right("sidebar")
-            .exact_size(SIDEBAR_WIDTH)
-            .frame(
-                Frame::new()
-                    .fill(theme::SURFACE)
-                    .inner_margin(Margin::symmetric(theme::SPACE_5 as i8, 20)),
-            )
-            .show(ui, |ui| {
-                egui::ScrollArea::vertical()
-                    .auto_shrink([false, false])
-                    .show(ui, |ui| sidebar(ui, &mut self.demo));
-            });
+        let ctx = ui.ctx().clone();
+        self.pump(&ctx);
+        self.tick(&ctx);
+        header(ui, self);
+        self.screen(ui);
+        self.modals(&ctx);
+        self.toasts(&ctx);
+    }
+}
 
-        CentralPanel::default()
-            .frame(
-                Frame::new()
-                    .fill(theme::BG)
-                    .inner_margin(Margin::same(theme::SPACE_5 as i8)),
-            )
-            .show(ui, |ui| table(ui, &mut self.demo));
+fn balance_of(view: &View) -> Option<i64> {
+    match view {
+        View::Lobby(lobby) => lobby.balance,
+        View::Slots(view) => view.balance,
+        View::Roulette(view) => view.balance,
+        View::Blackjack(view) => view.balance,
+        View::Crash(view) => view.balance,
+        View::History(_) => None,
+    }
+}
+
+fn normalize_addr(addr: &str) -> String {
+    let addr = addr.trim();
+    if addr.is_empty() {
+        return "127.0.0.1:11525".to_string();
+    }
+    if addr.contains(':') {
+        addr.to_string()
+    } else {
+        format!("{addr}:11525")
     }
 }
 
@@ -77,50 +918,76 @@ impl eframe::App for ZaganApp {
 // Header
 // ---------------------------------------------------------------------------
 
-fn header(ui: &mut Ui, demo: &Demo) {
-    ui.with_layout(Layout::left_to_right(Align::Center), |ui| {
-        let (mark, _) = ui.allocate_exact_size(Vec2::splat(10.0), Sense::hover());
-        ui.painter().rect_filled(mark, theme::RADIUS_SM, theme::WIN);
-        ui.add_space(theme::SPACE_2);
-        ui.label(
-            RichText::new("ZAGAN")
-                .font(theme::mono(18.0))
-                .color(theme::TEXT),
-        );
-        ui.label(
-            RichText::new("BET")
-                .font(theme::mono(18.0))
-                .color(theme::WIN),
-        );
-        ui.add_space(theme::SPACE_3);
-        pill(ui, &format!("v{VERSION}"), theme::TEXT_FAINT);
-        ui.add_space(theme::SPACE_1);
-        pill(ui, "PREVIEW", theme::GOLD);
-        ui.add_space(theme::SPACE_5);
-        connection_pill(ui, demo);
+fn header(ui: &mut Ui, app: &ZaganApp) {
+    Panel::top("header")
+        .exact_size(64.0)
+        .frame(
+            Frame::new()
+                .fill(theme::SURFACE)
+                .inner_margin(Margin::symmetric(theme::SPACE_5 as i8, 0)),
+        )
+        .show(ui, |ui| {
+            ui.with_layout(Layout::left_to_right(Align::Center), |ui| {
+                let (mark, _) = ui.allocate_exact_size(Vec2::splat(10.0), Sense::hover());
+                ui.painter().rect_filled(mark, theme::RADIUS_SM, theme::WIN);
+                ui.add_space(theme::SPACE_2);
+                ui.label(
+                    RichText::new("ZAGAN")
+                        .font(theme::mono(18.0))
+                        .color(theme::TEXT),
+                );
+                ui.label(
+                    RichText::new("BET")
+                        .font(theme::mono(18.0))
+                        .color(theme::WIN),
+                );
+                ui.add_space(theme::SPACE_3);
+                pill(ui, &format!("v{VERSION}"), theme::TEXT_FAINT);
+                if app.unsafe_mode {
+                    ui.add_space(theme::SPACE_1);
+                    pill(ui, "UNSAFE", theme::LOSS);
+                }
+                ui.add_space(theme::SPACE_5);
+                match &app.session {
+                    Some(session) => connection_pill(ui, session),
+                    None => pill(ui, "OFFLINE", theme::TEXT_FAINT),
+                }
 
-        ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
-            stat_block(
-                ui,
-                150.0,
-                "Balance",
-                &theme::money(demo.balance),
-                theme::mono(20.0),
-                theme::TEXT,
-                None,
-            );
-            ui.add_space(theme::SPACE_5);
-            stat_block(
-                ui,
-                190.0,
-                "Account",
-                demo.user,
-                theme::sans(theme::FONT_BODY),
-                theme::TEXT,
-                Some(demo.account),
-            );
+                ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
+                    let signed_in = app
+                        .session
+                        .as_ref()
+                        .is_some_and(|session| session.user.is_some());
+                    if signed_in {
+                        if let Some(balance) = app.balance_hold.or(app.balance) {
+                            stat_block(
+                                ui,
+                                150.0,
+                                "Balance",
+                                &theme::money(balance),
+                                theme::mono(20.0),
+                                theme::TEXT,
+                                None,
+                            );
+                            ui.add_space(theme::SPACE_5);
+                        }
+                        if let Some(user) = app.session.as_ref().and_then(|s| s.user.as_deref()) {
+                            let account =
+                                app.account.as_deref().map(|account| format!("#{account}"));
+                            stat_block(
+                                ui,
+                                190.0,
+                                "Account",
+                                user,
+                                theme::sans(theme::FONT_BODY),
+                                theme::TEXT,
+                                account.as_deref(),
+                            );
+                        }
+                    }
+                });
+            });
         });
-    });
 }
 
 fn pill(ui: &mut Ui, text: &str, color: Color32) {
@@ -133,7 +1000,7 @@ fn pill(ui: &mut Ui, text: &str, color: Color32) {
         });
 }
 
-fn connection_pill(ui: &mut Ui, demo: &Demo) {
+fn connection_pill(ui: &mut Ui, session: &Session) {
     Frame::new()
         .fill(theme::SURFACE_RAISED)
         .corner_radius(theme::RADIUS_SM)
@@ -148,12 +1015,12 @@ fn connection_pill(ui: &mut Ui, demo: &Demo) {
                         .color(theme::WIN),
                 );
                 ui.label(
-                    RichText::new(demo.host)
+                    RichText::new(&session.host)
                         .font(theme::mono(12.0))
                         .color(theme::TEXT_DIM),
                 );
                 ui.label(
-                    RichText::new(format!("{} ms", demo.ping_ms))
+                    RichText::new(format!("{:.1} ms", session.ping_ms))
                         .font(theme::mono(12.0))
                         .color(theme::TEXT_FAINT),
                 );
@@ -161,8 +1028,6 @@ fn connection_pill(ui: &mut Ui, demo: &Demo) {
         });
 }
 
-/// A label over a value, right-aligned in a fixed slot so the header's right
-/// edge stays put as the numbers change.
 fn stat_block(
     ui: &mut Ui,
     width: f32,
@@ -187,454 +1052,554 @@ fn stat_block(
 }
 
 // ---------------------------------------------------------------------------
-// Sidebar
+// Connect
 // ---------------------------------------------------------------------------
 
-fn sidebar(ui: &mut Ui, demo: &mut Demo) {
-    ui.label(
-        RichText::new("Roulette")
-            .font(theme::sans(22.0))
-            .color(theme::TEXT),
-    );
-    ui.label(
-        RichText::new("European  ·  single zero")
-            .font(theme::sans(12.0))
-            .color(theme::TEXT_DIM),
-    );
+fn connect_screen(ui: &mut Ui, app: &mut ZaganApp) {
+    CentralPanel::default()
+        .frame(
+            Frame::new()
+                .fill(theme::BG)
+                .inner_margin(Margin::same(theme::SPACE_5 as i8)),
+        )
+        .show(ui, |ui| {
+            ui.vertical_centered(|ui| {
+                ui.add_space(60.0);
+                let width = 560.0;
+                ui.allocate_ui_with_layout(vec2(width, 0.0), Layout::top_down(Align::Min), |ui| {
+                    Frame::new()
+                        .fill(theme::SURFACE)
+                        .corner_radius(theme::RADIUS_LG)
+                        .inner_margin(Margin::same(theme::SPACE_5 as i8))
+                        .show(ui, |ui| {
+                            ui.label(
+                                RichText::new("Connect to a server")
+                                    .font(theme::sans(24.0))
+                                    .color(theme::TEXT),
+                            );
+                            ui.add_space(theme::SPACE_1);
+                            widgets::note(
+                                ui,
+                                "TLS with certificate pinning. First contact asks before \
+                                 any credential is sent.",
+                            );
+                            ui.add_space(theme::SPACE_4);
 
-    ui.add_space(theme::SPACE_4);
-    let view = demo.view();
-    let wheel_size = ui.available_width().min(210.0);
-    ui.horizontal(|ui| {
-        let pad = ((ui.available_width() - wheel_size) * 0.5).max(0.0);
-        ui.add_space(pad);
-        roulette::wheel(ui, wheel_size, &view, demo.rotation);
-    });
-    ui.add_space(theme::SPACE_1);
-    result_line(ui, demo);
+                            let response = ui.add(
+                                TextEdit::singleline(&mut app.connect.addr)
+                                    .hint_text("host:port")
+                                    .desired_width(f32::INFINITY)
+                                    .font(theme::mono(14.0)),
+                            );
+                            let submitted = response.lost_focus()
+                                && ui.input(|input| input.key_pressed(Key::Enter));
 
-    ui.add_space(theme::SPACE_3);
-    ui.separator();
-    ui.add_space(theme::SPACE_3);
+                            ui.add_space(theme::SPACE_3);
+                            let connect = widgets::primary(
+                                ui,
+                                if app.connect.pending {
+                                    "CONNECTING…"
+                                } else {
+                                    "CONNECT"
+                                },
+                                !app.connect.pending,
+                                ui.available_width(),
+                                44.0,
+                            );
+                            if (connect || submitted) && !app.connect.pending {
+                                let addr = app.connect.addr.clone();
+                                app.begin_connect(&addr);
+                            }
 
-    ui.label(theme::label("Chip"));
-    ui.add_space(theme::SPACE_2);
-    let spinning = demo.phase == RoulettePhase::Spinning;
-    ui.horizontal(|ui| {
-        ui.spacing_mut().item_spacing.x = theme::SPACE_2;
-        for amount in CHIP_SIZES {
-            if chip_button(ui, amount, demo.chip == amount, !spinning).clicked() {
-                demo.chip = amount;
-            }
-        }
-    });
+                            if let Some(error) = &app.connect.error {
+                                ui.add_space(theme::SPACE_3);
+                                widgets::error(ui, error);
+                            }
+                            if app.connect.version_issue {
+                                ui.add_space(theme::SPACE_2);
+                                widgets::note(
+                                    ui,
+                                    &format!(
+                                        "Download the matching client from {}",
+                                        zagan_bet::version::DEFAULT_DOWNLOAD_URL
+                                    ),
+                                );
+                            }
+                        });
 
-    ui.add_space(theme::SPACE_3);
-    ui.label(theme::label("Bets"));
-    ui.add_space(theme::SPACE_1);
-    if demo.bets.chips.is_empty() {
+                    ui.add_space(theme::SPACE_4);
+                    Frame::new()
+                        .fill(theme::SURFACE)
+                        .corner_radius(theme::RADIUS_LG)
+                        .inner_margin(Margin::same(theme::SPACE_4 as i8))
+                        .show(ui, |ui| {
+                            ui.label(theme::label("Remembered hosts"));
+                            ui.add_space(theme::SPACE_2);
+                            let hosts = app
+                                .db
+                                .as_ref()
+                                .map(database::get_all_hosts)
+                                .unwrap_or_default();
+                            if hosts.is_empty() {
+                                widgets::note(ui, "No remembered hosts yet.");
+                            }
+                            for (host, fingerprint) in hosts {
+                                remembered_host(ui, app, &host, fingerprint.as_deref());
+                            }
+                        });
+                });
+            });
+        });
+}
+
+fn remembered_host(ui: &mut Ui, app: &mut ZaganApp, host: &str, fingerprint: Option<&str>) {
+    ui.horizontal(|ui| {
         ui.label(
-            RichText::new("No chips on the felt")
-                .font(theme::sans(12.0))
-                .color(theme::TEXT_FAINT),
+            RichText::new(host)
+                .font(theme::mono(13.0))
+                .color(theme::TEXT),
         );
-    } else {
-        for chip in &demo.bets.chips {
-            bet_row(ui, &roulette::target_name(&chip.target), chip.amount);
+        if let Some(fingerprint) = fingerprint {
+            ui.label(
+                RichText::new(short_fingerprint(fingerprint))
+                    .font(theme::mono(10.0))
+                    .color(theme::TEXT_FAINT),
+            );
         }
-    }
+        ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
+            if widgets::ghost(ui, "Forget") {
+                if let Some(db) = &app.db {
+                    if let Err(error) = database::forget_host(db, host) {
+                        app.connect.error = Some(format!("Failed to forget host: {error}"));
+                    }
+                }
+            }
+            if widgets::ghost(ui, "Connect") {
+                app.begin_connect(host);
+            }
+        });
+    });
+}
 
-    ui.add_space(theme::SPACE_3);
-    ui.separator();
-    ui.add_space(theme::SPACE_2);
-    bet_row(ui, "Total", demo.bets.total());
+fn short_fingerprint(fingerprint: &str) -> String {
+    let head: String = fingerprint.chars().take(16).collect();
+    format!("{head}…")
+}
 
-    ui.add_space(theme::SPACE_4);
-    let actions = ui.available_width();
-    let clear_width = 108.0;
-    ui.horizontal(|ui| {
-        ui.spacing_mut().item_spacing.x = theme::SPACE_2;
+// ---------------------------------------------------------------------------
+// Login
+// ---------------------------------------------------------------------------
 
-        let spin = Button::new(
-            RichText::new("SPIN")
-                .font(theme::mono(theme::FONT_MONO))
-                .color(theme::BG),
+fn login_screen(ui: &mut Ui, app: &mut ZaganApp, lobby: &LobbyView) {
+    CentralPanel::default()
+        .frame(
+            Frame::new()
+                .fill(theme::BG)
+                .inner_margin(Margin::same(theme::SPACE_5 as i8)),
         )
-        .fill(if spinning {
-            theme::WIN.gamma_multiply(0.45)
-        } else {
-            theme::WIN
-        })
-        .corner_radius(theme::RADIUS_MD)
-        .min_size(vec2(actions - clear_width - theme::SPACE_2, 44.0));
-        let can_spin = !spinning && !demo.bets.is_empty();
-        if ui.add_enabled(can_spin, spin).clicked() {
-            demo.start_spin(ui.ctx());
-        }
+        .show(ui, |ui| {
+            ui.vertical_centered(|ui| {
+                ui.add_space(100.0);
+                ui.allocate_ui_with_layout(vec2(420.0, 0.0), Layout::top_down(Align::Min), |ui| {
+                    Frame::new()
+                        .fill(theme::SURFACE)
+                        .corner_radius(theme::RADIUS_LG)
+                        .inner_margin(Margin::same(theme::SPACE_5 as i8))
+                        .show(ui, |ui| {
+                            ui.label(
+                                RichText::new("Sign in")
+                                    .font(theme::sans(24.0))
+                                    .color(theme::TEXT),
+                            );
+                            if let Some(session) = &app.session {
+                                widgets::mono_text(
+                                    ui,
+                                    &format!(
+                                        "{}  ·  {}",
+                                        session.host,
+                                        short_fingerprint(
+                                            session.fingerprint.as_deref().unwrap_or("unknown")
+                                        )
+                                    ),
+                                    theme::TEXT_DIM,
+                                );
+                            }
+                            ui.add_space(theme::SPACE_4);
 
-        let clear = Button::new(
-            RichText::new("CLEAR")
-                .font(theme::mono(12.0))
-                .color(theme::TEXT_DIM),
-        )
-        .fill(theme::SURFACE_RAISED)
-        .stroke(Stroke::new(1.0, theme::LINE))
-        .corner_radius(theme::RADIUS_MD)
-        .min_size(vec2(clear_width, 44.0));
-        if ui
-            .add_enabled(!demo.bets.is_empty() && !spinning, clear)
-            .clicked()
-        {
-            demo.begin_placing();
-            demo.bets = Bets::default();
-        }
-    });
-}
+                            ui.label(theme::label("Username"));
+                            ui.add(
+                                TextEdit::singleline(&mut app.login.user)
+                                    .desired_width(f32::INFINITY),
+                            );
+                            ui.add_space(theme::SPACE_3);
+                            ui.label(theme::label("Password"));
+                            ui.add(
+                                TextEdit::singleline(&mut app.login.password)
+                                    .password(true)
+                                    .desired_width(f32::INFINITY),
+                            );
 
-fn result_line(ui: &mut Ui, demo: &Demo) {
-    ui.horizontal(|ui| match (demo.phase, demo.number) {
-        (RoulettePhase::Result, Some(number)) => {
-            ui.label(theme::label("Result"));
-            ui.label(
-                RichText::new(format!("{number} {}", wheel_color(number).to_uppercase()))
-                    .font(theme::mono(14.0))
-                    .color(color_of(number)),
-            );
-            ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
-                payout(ui, demo);
+                            ui.add_space(theme::SPACE_2);
+                            ui.checkbox(
+                                &mut app.login.remember,
+                                RichText::new("Remember this login")
+                                    .font(theme::sans(12.0))
+                                    .color(theme::TEXT_DIM),
+                            );
+
+                            let enter = ui.input(|input| input.key_pressed(Key::Enter));
+                            ui.add_space(theme::SPACE_4);
+                            if widgets::primary(ui, "LOG IN", true, ui.available_width(), 44.0)
+                                || enter
+                            {
+                                app.login(ui.ctx(), false);
+                            }
+                            ui.add_space(theme::SPACE_2);
+                            if widgets::secondary(
+                                ui,
+                                "CREATE ACCOUNT",
+                                true,
+                                ui.available_width(),
+                                38.0,
+                            ) {
+                                app.login(ui.ctx(), true);
+                            }
+
+                            if let Some(error) =
+                                lobby.login_error.as_ref().or(app.login.error.as_ref())
+                            {
+                                ui.add_space(theme::SPACE_3);
+                                widgets::error(ui, error);
+                            }
+                        });
+
+                    ui.add_space(theme::SPACE_3);
+                    ui.allocate_ui_with_layout(
+                        vec2(420.0, 24.0),
+                        Layout::top_down(Align::Center),
+                        |ui| {
+                            if widgets::ghost(ui, "Disconnect") {
+                                app.disconnect();
+                            }
+                        },
+                    );
+                });
             });
-        }
-        (RoulettePhase::Spinning, _) => {
-            ui.label(
-                RichText::new("SPINNING…")
-                    .font(theme::mono(12.0))
-                    .color(theme::GOLD),
-            );
-            ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
+        });
+}
+
+// ---------------------------------------------------------------------------
+// Lobby
+// ---------------------------------------------------------------------------
+
+fn lobby_screen(ui: &mut Ui, app: &mut ZaganApp, lobby: &LobbyView) {
+    CentralPanel::default()
+        .frame(
+            Frame::new()
+                .fill(theme::BG)
+                .inner_margin(Margin::same(theme::SPACE_5 as i8)),
+        )
+        .show(ui, |ui| {
+            ui.horizontal(|ui| {
                 ui.label(
-                    RichText::new(format!("{} chips", demo.bets.chips.len()))
-                        .font(theme::mono(10.0))
-                        .color(theme::TEXT_FAINT),
+                    RichText::new("Lobby")
+                        .font(theme::sans(24.0))
+                        .color(theme::TEXT),
                 );
-            });
-        }
-        _ => {
-            ui.label(
-                RichText::new("Place your bets")
-                    .font(theme::sans(12.0))
-                    .color(theme::TEXT_DIM),
-            );
-            ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
                 ui.label(
-                    RichText::new(format!("{} chips", demo.bets.chips.len()))
-                        .font(theme::mono(10.0))
-                        .color(theme::TEXT_FAINT),
+                    RichText::new(format!("{} games", lobby.games.len()))
+                        .font(theme::sans(12.0))
+                        .color(theme::TEXT_DIM),
                 );
+                ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
+                    if widgets::secondary(ui, "LOG OUT", true, 100.0, 34.0) {
+                        app.command(ui.ctx(), Command::Logout);
+                    }
+                    if widgets::secondary(ui, "HISTORY", true, 104.0, 34.0) {
+                        let effects = app.core.command(Command::History { limit: 20 });
+                        app.apply(ui.ctx(), effects);
+                    }
+                });
             });
-        }
-    });
+
+            if let Some(session) = &app.session {
+                if is_newer(&session.latest, VERSION) {
+                    ui.add_space(theme::SPACE_3);
+                    Frame::new()
+                        .fill(theme::GOLD.gamma_multiply(0.10))
+                        .stroke(Stroke::new(1.0, theme::GOLD.gamma_multiply(0.5)))
+                        .corner_radius(theme::RADIUS_MD)
+                        .inner_margin(Margin::symmetric(14, 10))
+                        .show(ui, |ui| {
+                            ui.horizontal(|ui| {
+                                ui.label(
+                                    RichText::new(format!("Update available: v{}", session.latest))
+                                        .font(theme::mono(12.0))
+                                        .color(theme::GOLD),
+                                );
+                                widgets::mono_text(ui, &session.url, theme::TEXT_DIM);
+                            });
+                        });
+                }
+            }
+
+            ui.add_space(theme::SPACE_4);
+            games_grid(ui, app, lobby);
+
+            ui.add_space(theme::SPACE_4);
+            ui.separator();
+            ui.add_space(theme::SPACE_2);
+            ui.horizontal(|ui| {
+                if let Some(session) = &app.session {
+                    widgets::note(
+                        ui,
+                        &format!(
+                            "Signed in to {}  ·  server v{}",
+                            session.host, session.server_version
+                        ),
+                    );
+                }
+                ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
+                    if widgets::ghost(ui, "Forget saved login") {
+                        app.forget_login();
+                    }
+                });
+            });
+        });
 }
 
-/// What the round paid, and the net for the spin.
-fn payout(ui: &mut Ui, demo: &Demo) {
-    let winnings = demo.winnings.unwrap_or(0);
-    if winnings == 0 {
-        ui.label(
-            RichText::new("NO WIN")
-                .font(theme::mono(13.0))
-                .color(theme::TEXT_FAINT),
-        );
-        return;
-    }
+fn games_grid(ui: &mut Ui, app: &mut ZaganApp, lobby: &LobbyView) {
+    const ORDER: [&str; 4] = ["slots", "roulette", "blackjack", "crash"];
 
-    let profit = winnings as i64 - demo.spent as i64;
-    ui.label(
-        RichText::new(format!("({})", theme::signed_money(profit)))
-            .font(theme::sans(11.0))
-            .color(if profit >= 0 { theme::WIN } else { theme::LOSS }),
-    );
-    ui.label(
-        RichText::new(theme::money(winnings as i64))
-            .font(theme::mono(15.0))
-            .color(theme::WIN),
-    );
-    ui.label(theme::label("Won"));
+    for row in ORDER.chunks(2) {
+        ui.columns(2, |columns| {
+            for (index, game) in row.iter().enumerate() {
+                let Some((key, name)) = lobby.games.iter().find(|(key, _)| key == game) else {
+                    continue;
+                };
+                game_card(&mut columns[index], app, key, name);
+            }
+        });
+        ui.add_space(theme::SPACE_4);
+    }
 }
 
-fn bet_row(ui: &mut Ui, name: &str, amount: u64) {
-    ui.horizontal(|ui| {
-        ui.label(
-            RichText::new(name)
-                .font(theme::sans(13.0))
-                .color(theme::TEXT_DIM),
-        );
-        ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
+fn game_card(ui: &mut Ui, app: &mut ZaganApp, key: &str, name: &str) {
+    Frame::new()
+        .fill(theme::SURFACE)
+        .corner_radius(theme::RADIUS_LG)
+        .inner_margin(Margin::same(theme::SPACE_4 as i8))
+        .show(ui, |ui| {
+            ui.set_width(ui.available_width());
             ui.label(
-                RichText::new(theme::money(amount as i64))
-                    .font(theme::mono(13.0))
-                    .color(theme::GOLD),
+                RichText::new(name)
+                    .font(theme::sans(22.0))
+                    .color(theme::TEXT),
             );
+            ui.add_space(2.0);
+            widgets::note(ui, tagline(key));
+            ui.add_space(theme::SPACE_1);
+            ui.label(
+                RichText::new(meta(key))
+                    .font(theme::mono(10.0))
+                    .color(theme::TEXT_FAINT),
+            );
+            ui.add_space(theme::SPACE_3);
+            if widgets::primary(ui, "PLAY", true, 110.0, 36.0) {
+                let effects = app.core.command(Command::Play {
+                    game: key.to_string(),
+                    bet: Some(DEFAULT_BET),
+                });
+                app.apply(ui.ctx(), effects);
+            }
         });
-    });
 }
 
-fn chip_button(ui: &mut Ui, amount: u64, selected: bool, enabled: bool) -> egui::Response {
-    let sense = if enabled {
-        Sense::click()
-    } else {
-        Sense::hover()
-    };
-    let (rect, response) = ui.allocate_exact_size(Vec2::splat(46.0), sense);
-    let center = rect.center();
-    let radius = 20.0;
-    let painter = ui.painter();
-    if selected || response.hovered() {
-        painter.circle_stroke(
-            center,
-            radius + 3.0,
-            Stroke::new(if selected { 2.0 } else { 1.0 }, theme::ACCENT),
-        );
+fn tagline(game: &str) -> &'static str {
+    match game {
+        "slots" => "Five reels, five paylines, one lever.",
+        "roulette" => "The European wheel, thirty-seven pockets.",
+        "blackjack" => "Six decks, dealer stands on seventeen. Pays 3:2.",
+        "crash" => "The multiplier rises. Cash out before it busts.",
+        _ => "",
     }
-    if enabled {
-        roulette::paint_chip(painter, center, radius, amount);
-    } else {
-        roulette::paint_chip_preview(painter, center, radius, amount);
-    }
-    response
 }
 
-fn color_of(number: u8) -> Color32 {
-    match wheel_color(number) {
-        "red" => theme::ROULETTE_RED,
-        "green" => theme::WIN,
-        _ => theme::TEXT,
+fn meta(game: &str) -> &'static str {
+    match game {
+        "slots" => "MIN 10 KR  ·  RTP 96%",
+        "roulette" => "MIN 10 KR  ·  SINGLE ZERO",
+        "blackjack" => "MIN 10 KR  ·  S17  ·  3:2",
+        "crash" => "MIN 10 KR  ·  1% EDGE",
+        _ => "",
     }
 }
 
 // ---------------------------------------------------------------------------
-// Table
+// History
 // ---------------------------------------------------------------------------
 
-fn table(ui: &mut Ui, demo: &mut Demo) {
-    ui.horizontal(|ui| {
-        ui.label(
-            RichText::new("Table 01")
-                .font(theme::sans(15.0))
-                .color(theme::TEXT),
-        );
-        ui.label(
-            RichText::new("European  ·  single zero")
-                .font(theme::sans(12.0))
-                .color(theme::TEXT_DIM),
-        );
-        ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
-            ui.label(
-                RichText::new("Limits 10 – 500 Kr")
-                    .font(theme::mono(12.0))
-                    .color(theme::TEXT_FAINT),
-            );
-        });
-    });
-    ui.add_space(theme::SPACE_4);
-
-    let view = demo.view();
-    let strip_height = 104.0;
-    let available = ui.available_size();
-    let size = roulette::size_for(vec2(available.x, (available.y - strip_height).max(220.0)));
-    let side_pad = ((available.x - size.x) * 0.5).max(0.0);
-    let top_pad = ((available.y - size.y - strip_height) * 0.5).max(0.0);
-    let chip = demo.chip;
-    let placing = demo.phase != RoulettePhase::Spinning;
-    ui.add_space(top_pad);
-    ui.horizontal(|ui| {
-        ui.add_space(side_pad);
-        match roulette::felt(ui, size, &view) {
-            Some(FeltAction::Place(target)) if placing => {
-                demo.begin_placing();
-                demo.bets.add(target, chip);
-            }
-            Some(FeltAction::Reduce(target)) if placing => {
-                demo.begin_placing();
-                demo.bets.reduce(&target, chip);
+fn history_screen(ui: &mut Ui, app: &mut ZaganApp, records: &[PlayRecord]) {
+    CentralPanel::default()
+        .frame(
+            Frame::new()
+                .fill(theme::BG)
+                .inner_margin(Margin::same(theme::SPACE_5 as i8)),
+        )
+        .show(ui, |ui| {
+            ui.horizontal(|ui| {
+                if widgets::ghost(ui, "Back to lobby") {
+                    app.command(ui.ctx(), Command::ShowLobby);
+                }
+                ui.label(
+                    RichText::new("Play history")
+                        .font(theme::sans(24.0))
+                        .color(theme::TEXT),
+                );
+                ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
+                    for limit in [50, 20, 10] {
+                        if widgets::ghost(ui, &limit.to_string()) {
+                            let effects = app.core.command(Command::History { limit });
+                            app.apply(ui.ctx(), effects);
+                        }
+                    }
+                    ui.label(theme::label("Show"));
+                });
+            });
+            ui.add_space(theme::SPACE_4);
+
+            if records.is_empty() {
+                widgets::note(ui, "No plays recorded yet.");
+                return;
             }
-            _ => {}
-        }
-    });
 
-    ui.add_space(theme::SPACE_4);
-    ui.horizontal(|ui| {
-        ui.label(theme::label("Last"));
-        if demo.last.is_empty() {
-            ui.label(
-                RichText::new("No spins yet")
-                    .font(theme::sans(12.0))
-                    .color(theme::TEXT_FAINT),
-            );
-        }
-        for number in &demo.last {
-            let (dot, _) = ui.allocate_exact_size(Vec2::splat(26.0), Sense::hover());
-            roulette::paint_result_dot(ui.painter(), dot.center(), 11.0, *number);
-            ui.add_space(theme::SPACE_1);
-        }
-    });
-    ui.add_space(theme::SPACE_2);
-    ui.label(
-        RichText::new(
-            "Click to place  ·  right or middle click takes back  ·  C clears  ·  space spins",
-        )
-        .font(theme::sans(12.0))
-        .color(theme::TEXT_FAINT),
-    );
-}
+            Frame::new()
+                .fill(theme::SURFACE)
+                .corner_radius(theme::RADIUS_LG)
+                .inner_margin(Margin::same(theme::SPACE_3 as i8))
+                .show(ui, |ui| {
+                    ui.set_width(ui.available_width());
+                    ui.set_min_height(ui.available_height());
 
-// ---------------------------------------------------------------------------
-// Demo state
-// ---------------------------------------------------------------------------
+                    let widths = history_columns(ui.available_width());
+                    history_header(ui, &widths);
+                    ui.add_space(theme::SPACE_1);
+                    ui.separator();
 
-struct Spin {
-    started: f64,
-    from: f32,
-    delta: f32,
-    target: u8,
-}
-
-struct Demo {
-    bets: Bets,
-    chip: u64,
-    phase: RoulettePhase,
-    number: Option<u8>,
-    rotation: f32,
-    spin: Option<Spin>,
-    spins: usize,
-    last: Vec<u8>,
-    winnings: Option<u64>,
-    spent: u64,
-    balance: i64,
-    host: &'static str,
-    ping_ms: u32,
-    user: &'static str,
-    account: &'static str,
-}
-
-impl Demo {
-    fn new() -> Self {
-        let mut bets = Bets::default();
-        bets.add(BetTarget::Straight { number: 17 }, 50);
-        bets.add(
-            BetTarget::Corner {
-                numbers: [17, 18, 20, 21],
-            },
-            25,
-        );
-        bets.add(BetTarget::Outside { kind: Outside::Red }, 25);
+                    egui::ScrollArea::vertical()
+                        .auto_shrink([false, false])
+                        .show(ui, |ui| {
+                            for (index, record) in records.iter().enumerate() {
+                                history_row(ui, &widths, record, index % 2 == 1);
+                            }
+                        });
+                });
+        });
+}
 
-        Self {
-            bets,
-            chip: 25,
-            phase: RoulettePhase::Placing,
-            number: None,
-            rotation: 0.0,
-            spin: None,
-            spins: 0,
-            last: Vec::new(),
-            winnings: None,
-            spent: 0,
-            balance: 1000,
-            host: "127.0.0.1:11525",
-            ping_ms: 41,
-            user: "alice",
-            account: "#4161673306",
-        }
-    }
+/// Column widths for the play log, filling the available width.
+fn history_columns(width: f32) -> [f32; 6] {
+    let usable = (width - theme::SPACE_3 * 5.0).max(320.0);
+    [
+        usable * 0.18,
+        usable * 0.12,
+        usable * 0.10,
+        usable * 0.10,
+        usable * 0.12,
+        usable * 0.38,
+    ]
+}
 
-    fn view(&self) -> RouletteView {
-        RouletteView {
-            bet_amount: 10,
-            balance: Some(self.balance),
-            chip: self.chip,
-            bets: self.bets.clone(),
-            cursor: Cursor::default(),
-            phase: self.phase,
-            number: self.number,
-            color: self.number.map(|number| wheel_color(number).to_string()),
-            winnings: self.winnings,
-            error: None,
-        }
-    }
+fn history_header(ui: &mut Ui, widths: &[f32; 6]) {
+    history_line(
+        ui,
+        widths,
+        [
+            theme::label("When"),
+            theme::label("Game"),
+            theme::label("Bet"),
+            theme::label("Won"),
+            theme::label("Balance"),
+            theme::label("Result"),
+        ],
+        false,
+    );
+}
 
-    /// A bet change after a result starts the next round: the wheel stays
-    /// where it stopped, but the payout and the winning highlight do not.
-    fn begin_placing(&mut self) {
-        if self.phase == RoulettePhase::Result {
-            self.phase = RoulettePhase::Placing;
-            self.winnings = None;
-        }
-    }
+fn history_row(ui: &mut Ui, widths: &[f32; 6], record: &PlayRecord, stripe: bool) {
+    history_line(
+        ui,
+        widths,
+        [
+            RichText::new(record.short_time())
+                .font(theme::mono(11.0))
+                .color(theme::TEXT_DIM),
+            RichText::new(record.game.to_uppercase())
+                .font(theme::mono(11.0))
+                .color(theme::TEXT),
+            RichText::new(theme::money(record.bet))
+                .font(theme::mono(12.0))
+                .color(theme::TEXT_DIM),
+            RichText::new(theme::money(record.winnings))
+                .font(theme::mono(12.0))
+                .color(if record.winnings > 0 {
+                    theme::WIN
+                } else {
+                    theme::TEXT_FAINT
+                }),
+            RichText::new(theme::money(record.balance_after))
+                .font(theme::mono(12.0))
+                .color(theme::TEXT),
+            RichText::new(record.summary())
+                .font(theme::sans(12.0))
+                .color(theme::TEXT_DIM),
+        ],
+        stripe,
+    );
+}
 
-    fn tick(&mut self, ctx: &Context) {
-        let now = ctx.input(|input| input.time);
-        let mut finished = None;
-        if let Some(spin) = &self.spin {
-            let t = (((now - spin.started) / SPIN_SECONDS) as f32).clamp(0.0, 1.0);
-            let eased = 1.0 - (1.0 - t).powi(3);
-            self.rotation = spin.from + spin.delta * eased;
-            if t >= 1.0 {
-                finished = Some(spin.target);
-            }
-            ctx.request_repaint();
-        }
-        if let Some(number) = finished {
-            self.spin = None;
-            self.phase = RoulettePhase::Result;
-            self.number = Some(number);
-            self.winnings = Some(self.bets.winnings(number));
-            self.last.insert(0, number);
-            self.last.truncate(12);
-        }
+fn history_line(ui: &mut Ui, widths: &[f32; 6], cells: [RichText; 6], stripe: bool) {
+    let spacing = theme::SPACE_3;
+    let width = widths.iter().sum::<f32>() + spacing * 5.0;
+    let (rect, _) = ui.allocate_exact_size(vec2(width, 26.0), Sense::hover());
+    if stripe {
+        ui.painter().rect_filled(
+            rect,
+            theme::RADIUS_SM,
+            theme::SURFACE_RAISED.gamma_multiply(0.6),
+        );
     }
-
-    /// Pointer-first: the felt reads the mouse. The keyboard keeps the two
-    /// verbs that have no pointer equivalent in profile (spin and clear).
-    fn keys(&mut self, ctx: &Context) {
-        if self.phase == RoulettePhase::Spinning {
-            return;
-        }
-        if ctx.memory(|memory| memory.focused().is_none()) {
-            if ctx.input(|input| input.key_pressed(Key::Space)) {
-                self.start_spin(ctx);
-            }
-            if ctx.input(|input| input.key_pressed(Key::C)) {
-                self.begin_placing();
-                self.bets = Bets::default();
-            }
-        }
+    let mut child = ui.new_child(
+        eframe::egui::UiBuilder::new()
+            .max_rect(rect.shrink2(vec2(6.0, 0.0)))
+            .layout(Layout::left_to_right(Align::Center)),
+    );
+    child.spacing_mut().item_spacing.x = spacing;
+    for (width, cell) in widths.iter().zip(cells) {
+        child.add_sized(
+            vec2(*width, 18.0),
+            egui::Label::new(cell).selectable(false).truncate(),
+        );
     }
+}
 
-    fn start_spin(&mut self, ctx: &Context) {
-        if self.phase == RoulettePhase::Spinning || self.bets.is_empty() {
-            return;
-        }
-        let target = DEMO_TARGETS[self.spins % DEMO_TARGETS.len()];
-        self.spins += 1;
-        self.spent = self.bets.total();
-        self.winnings = None;
-
-        let segment = TAU / WHEEL.len() as f32;
-        let index = WHEEL
-            .iter()
-            .position(|number| *number == target)
-            .unwrap_or(0) as f32;
-        let desired = -index * segment;
-        let delta = (desired - self.rotation).rem_euclid(TAU) + 3.0 * TAU;
-
-        self.spin = Some(Spin {
-            started: ctx.input(|input| input.time),
-            from: self.rotation,
-            delta,
-            target,
+fn fatal(ui: &mut Ui, message: &str) {
+    CentralPanel::default()
+        .frame(
+            Frame::new()
+                .fill(theme::BG)
+                .inner_margin(Margin::same(theme::SPACE_5 as i8)),
+        )
+        .show(ui, |ui| {
+            ui.vertical_centered(|ui| {
+                ui.add_space(120.0);
+                ui.label(
+                    RichText::new("Cannot start")
+                        .font(theme::sans(24.0))
+                        .color(theme::LOSS),
+                );
+                ui.add_space(theme::SPACE_2);
+                widgets::error(ui, message);
+            });
         });
-        self.phase = RoulettePhase::Spinning;
-        self.number = None;
-        ctx.request_repaint();
-    }
 }