Turn timer + auto-play, disconnect/reconnect, cosmetics, queue & paid plan

- Turn timer (20s) for play/trump; system auto-plays a smart move on timeout
- Disconnect handling (mock): wait-for-return countdown, system covers turns
- Cosmetics: titles, card-back styles, custom profile-image upload, badges;
  pickers in Profile; shop sells card styles; reward modal shows new titles
- Paid plan (pro): free players queue when server busy, pro skips; upgrade flow
- OnlineService extended (upgradePlan, richer profile patch); mock implements
  queue + plans; gamification adds TITLES + CARD_STYLES

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

scripts/sim.ts

@@ -87,8 +87,12 @@ function baseProfile(): UserProfile {
       games: 0, wins: 0, losses: 0, kotsFor: 0, kotsAgainst: 0,
       tricks: 0, bestWinStreak: 0, currentWinStreak: 0,
     },
+    plan: "free",
     ownedAvatars: ["a-fox"],
-    ownedThemes: ["royal"],
+    ownedCardStyles: ["classic"],
+    ownedTitles: ["novice"],
+    title: "novice",
+    cardStyle: "classic",
     achievements: {},
     unlocked: [],
     createdAt: 0,

src/components/GameTable.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { AnimatePresence, motion } from "framer-motion";
-import { Crown, LogOut } from "lucide-react";
+import { Crown, LogOut, WifiOff } from "lucide-react";
-import { useGameStore } from "@/lib/game-store";
+import { useEffect, useState } from "react";
+import { TURN_MS, useGameStore } from "@/lib/game-store";
 import { legalMoves } from "@/lib/hokm/engine";
 import { sortHand } from "@/lib/hokm/deck";
 import {
@@ -15,9 +16,22 @@ import {
   teamOf,
 } from "@/lib/hokm/types";
 import { useI18n } from "@/lib/i18n";
+import { useSessionStore } from "@/lib/session-store";
+import { cardStyleById } from "@/lib/online/gamification";
 import { cn } from "@/lib/cn";
 import { PlayingCard } from "./PlayingCard";
 
+function useCountdown(deadline: number | null) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (deadline == null) return;
+    const id = setInterval(() => setNow(Date.now()), 250);
+    return () => clearInterval(id);
+  }, [deadline]);
+  if (deadline == null) return null;
+  return Math.max(0, Math.ceil((deadline - now) / 1000));
+}
+
 export function GameTable({ onExit }: { onExit?: () => void } = {}) {
   const game = useGameStore((s) => s.game);
   const reset = useGameStore((s) => s.reset);
@@ -73,6 +87,8 @@ export function GameTable({ onExit }: { onExit?: () => void } = {}) {
 
       {/* Turn indicator */}
       <TurnIndicator />
+      <TurnTimer />
+      <DisconnectBanner />
 
       {/* Overlays */}
       <AnimatePresence>
@@ -220,6 +236,9 @@ function OpponentHand({
   horizontal?: boolean;
 }) {
   const count = useGameStore((s) => s.game.players[seat].hand.length);
+  const styleId = useSessionStore((s) => s.profile?.cardStyle ?? "classic");
+  const cs = cardStyleById(styleId);
+  const back = { c1: cs.c1, c2: cs.c2, accent: cs.accent };
   const cards = Array.from({ length: count });
   return (
     <div
@@ -234,7 +253,7 @@ function OpponentHand({
           key={i}
           style={horizontal ? { marginInlineStart: i === 0 ? 0 : -34 } : { marginTop: i === 0 ? 0 : -48 }}
         >
-          <PlayingCard faceDown size="sm" />
+          <PlayingCard faceDown size="sm" back={back} />
         </div>
       ))}
     </div>
@@ -387,6 +406,68 @@ function TurnIndicator() {
   );
 }
 
+/* ----------------------------- Turn timer ----------------------------- */
+
+function TurnTimer() {
+  const deadline = useGameStore((s) => s.turnDeadline);
+  const phase = useGameStore((s) => s.game.phase);
+  const secs = useCountdown(deadline);
+  if (deadline == null || secs == null) return null;
+  if (phase !== "playing" && phase !== "choosing-trump") return null;
+  const pct = Math.max(0, Math.min(1, (deadline - Date.now()) / TURN_MS));
+  const danger = secs <= 5;
+  return (
+    <div className="absolute bottom-[190px] left-1/2 -translate-x-1/2 z-30 w-40 text-center">
+      <span
+        className={cn(
+          "block text-sm font-black tabular-nums mb-1",
+          danger ? "text-rose-300 animate-pulse" : "text-gold-300"
+        )}
+      >
+        {secs}
+      </span>
+      <div className="h-1.5 rounded-full bg-navy-900/70 overflow-hidden gold-border">
+        <div
+          className="h-full rounded-full"
+          style={{
+            width: `${pct * 100}%`,
+            background: danger
+              ? "#fb7185"
+              : "linear-gradient(90deg, var(--gold-500), var(--gold-300))",
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function DisconnectBanner() {
+  const seat = useGameStore((s) => s.disconnectedSeat);
+  const deadline = useGameStore((s) => s.reconnectDeadline);
+  const name = useGameStore((s) => (seat != null ? s.seatPlayers[seat]?.name : null));
+  const secs = useCountdown(deadline);
+  const { t } = useI18n();
+  return (
+    <AnimatePresence>
+      {seat != null && (
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0 }}
+          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-40"
+        >
+          <div className="glass rounded-2xl px-4 py-3 flex items-center gap-2.5 text-sm">
+            <WifiOff className="size-5 text-rose-300 animate-pulse" />
+            <span className="text-cream/90">
+              {t("dc.waiting", { name: name ?? "", s: secs ?? 0 })}
+            </span>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
 /* ------------------------------ Overlays ------------------------------ */
 
 function Backdrop({ children }: { children: React.ReactNode }) {

src/components/PlayingCard.tsx

@@ -11,12 +11,19 @@ const SIZES = {
 
 export type CardSize = keyof typeof SIZES;
 
+interface CardBack {
+  c1: string;
+  c2: string;
+  accent: string;
+}
+
 interface Props {
   card?: Card;
   faceDown?: boolean;
   size?: CardSize;
   className?: string;
   dimmed?: boolean;
+  back?: CardBack;
 }
 
 export function PlayingCard({
@@ -25,18 +32,34 @@ export function PlayingCard({
   size = "md",
   className,
   dimmed,
+  back,
 }: Props) {
   const s = SIZES[size];
 
   if (faceDown || !card) {
+    const styled = back
+      ? {
+          width: s.w,
+          height: s.h,
+          borderRadius: 8,
+          background: `repeating-linear-gradient(45deg, ${back.accent}40 0 6px, transparent 6px 12px), linear-gradient(160deg, ${back.c1}, ${back.c2})`,
+          border: `1px solid ${back.accent}80`,
+          boxShadow: "0 6px 14px rgba(0,0,0,0.4)",
+        }
+      : { width: s.w, height: s.h };
     return (
       <div
-        className={cn("card-back rounded-lg shrink-0", className)}
+        className={cn(!back && "card-back", "rounded-lg shrink-0", className)}
-        style={{ width: s.w, height: s.h }}
+        style={styled}
         aria-hidden
       >
         <div className="h-full w-full rounded-lg flex items-center justify-center">
-          <div className="text-gold-500/70 text-lg font-bold">✦</div>
+          <div
+            className={cn("text-lg font-bold", !back && "text-gold-500/70")}
+            style={back ? { color: `${back.accent}cc` } : undefined}
+          >
+            ✦
+          </div>
         </div>
       </div>
     );

src/components/online/Avatar.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { avatarEmoji } from "@/lib/online/types";
+import { cn } from "@/lib/cn";
+
+export function Avatar({
+  id,
+  image,
+  size = 40,
+  className,
+}: {
+  id: string;
+  image?: string | null;
+  size?: number;
+  className?: string;
+}) {
+  if (image) {
+    // eslint-disable-next-line @next/next/no-img-element
+    return (
+      <img
+        src={image}
+        alt=""
+        width={size}
+        height={size}
+        className={cn("rounded-full object-cover", className)}
+        style={{ width: size, height: size }}
+      />
+    );
+  }
+  return (
+    <span
+      className={cn("inline-flex items-center justify-center", className)}
+      style={{ width: size, height: size, fontSize: size * 0.62 }}
+    >
+      {avatarEmoji(id)}
+    </span>
+  );
+}

src/components/online/PostMatchRewardsModal.tsx

@@ -107,6 +107,28 @@ export function PostMatchRewardsModal({
           </div>
         )}
 
+        {reward.newTitles.length > 0 && (
+          <div className="mt-3 space-y-2">
+            {reward.newTitles.map((tt, i) => (
+              <motion.div
+                key={tt.id}
+                initial={{ opacity: 0, x: locale === "fa" ? 20 : -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.7 + i * 0.12 }}
+                className="glass rounded-xl px-3 py-2 flex items-center gap-2 text-start"
+              >
+                <span className="text-xl">🏷️</span>
+                <span className="flex-1">
+                  <span className="block text-[10px] text-gold-400">{t("reward.newTitle")}</span>
+                  <span className="block text-sm text-cream font-semibold">
+                    {locale === "fa" ? tt.nameFa : tt.nameEn}
+                  </span>
+                </span>
+              </motion.div>
+            ))}
+          </div>
+        )}
+
         <button onClick={onClose} className="btn-gold w-full rounded-xl py-3 mt-6">
           {t("reward.continue")}
         </button>

src/components/online/TopBar.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { Coins, Gift } from "lucide-react";
+import { Coins, Crown, Gift } from "lucide-react";
 import { useSessionStore } from "@/lib/session-store";
 import { useUIStore } from "@/lib/ui-store";
 import { useI18n } from "@/lib/i18n";
-import { avatarEmoji } from "@/lib/online/types";
+import { Avatar } from "./Avatar";
 
 export function TopBar() {
   const profile = useSessionStore((s) => s.profile);
@@ -19,12 +19,13 @@ export function TopBar() {
         onClick={() => go("profile")}
         className="glass rounded-full ltr:pr-4 rtl:pl-4 ltr:pl-1.5 rtl:pr-1.5 py-1.5 flex items-center gap-2 hover:bg-navy-800/80 transition"
       >
-        <span className="size-9 rounded-full bg-navy-900 gold-border flex items-center justify-center text-xl">
+        <span className="relative size-9 rounded-full bg-navy-900 gold-border flex items-center justify-center overflow-hidden">
-          {avatarEmoji(profile.avatar)}
+          <Avatar id={profile.avatar} image={profile.avatarImage} size={profile.avatarImage ? 36 : 26} />
         </span>
         <span className="text-start leading-tight">
-          <span className="block text-sm font-bold text-cream max-w-24 truncate">
+          <span className="flex items-center gap-1 text-sm font-bold text-cream max-w-28 truncate">
             {profile.displayName}
+            {profile.plan === "pro" && <Crown className="size-3 text-gold-400 fill-gold-500 shrink-0" />}
           </span>
           <span className="block text-[10px] text-gold-400/80">
             {t("common.level")} {profile.level}

src/components/screens/MatchmakingScreen.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { AnimatePresence, motion } from "framer-motion";
-import { Loader2 } from "lucide-react";
+import { Crown, Loader2 } from "lucide-react";
 import { ScreenShell } from "@/components/online/ScreenHeader";
 import { useGameStore } from "@/lib/game-store";
 import { useOnlineStore } from "@/lib/online-store";
+import { useSessionStore } from "@/lib/session-store";
 import { useUIStore } from "@/lib/ui-store";
 import { useI18n } from "@/lib/i18n";
 import { getService } from "@/lib/online/service";
@@ -15,10 +16,12 @@ export function MatchmakingScreen() {
   const mm = useOnlineStore((s) => s.matchmaking);
   const cancelMatchmaking = useOnlineStore((s) => s.cancelMatchmaking);
   const newOnlineMatch = useGameStore((s) => s.newOnlineMatch);
+  const upgradePlan = useSessionStore((s) => s.upgradePlan);
   const goGame = useUIStore((s) => s.goGame);
   const go = useUIStore((s) => s.go);
 
   const ready = mm.phase === "ready";
+  const queued = mm.phase === "queued";
   const slots = [0, 1, 2, 3];
 
   const cancel = async () => {
@@ -42,6 +45,39 @@ export function MatchmakingScreen() {
     goGame("home");
   };
 
+  if (queued) {
+    return (
+      <ScreenShell>
+        <div className="flex flex-col items-center justify-center min-h-[80dvh] text-center">
+          <div className="text-5xl mb-4">⏳</div>
+          <h1 className="gold-text text-2xl font-black">{t("queue.title")}</h1>
+          <p className="text-cream/60 text-sm mt-1">{t("queue.busy")}</p>
+          <div className="my-6 text-7xl font-black gold-text tabular-nums">
+            {mm.queuePosition ?? 0}
+          </div>
+          <p className="text-cream/70">{t("queue.position", { n: mm.queuePosition ?? 0 })}</p>
+
+          <div className="mt-9 flex flex-col items-center gap-3 w-full max-w-xs">
+            <button
+              onClick={() => upgradePlan()}
+              className="btn-gold w-full rounded-xl py-3 flex items-center justify-center gap-2"
+            >
+              <Crown className="size-4" />
+              {t("queue.upgrade")}
+            </button>
+            <span className="text-[11px] text-cream/45">{t("queue.skip")}</span>
+            <button
+              onClick={cancel}
+              className="glass rounded-xl px-6 py-2.5 text-cream/70 hover:text-cream"
+            >
+              {t("mm.cancel")}
+            </button>
+          </div>
+        </div>
+      </ScreenShell>
+    );
+  }
+
   return (
     <ScreenShell>
       <div className="flex flex-col items-center justify-center min-h-[80dvh] text-center">

src/components/screens/ProfileScreen.tsx

@@ -1,41 +1,73 @@
 "use client";
 
-import { Check, Coins, Pencil } from "lucide-react";
+import { Check, Coins, Crown, Pencil, Upload } from "lucide-react";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
 import { RankBadge } from "@/components/online/RankBadge";
 import { XpBar } from "@/components/online/XpBar";
+import { Avatar } from "@/components/online/Avatar";
 import { useSessionStore } from "@/lib/session-store";
 import { useI18n } from "@/lib/i18n";
-import { ACHIEVEMENTS, achievementProgress } from "@/lib/online/gamification";
+import {
-import { AVATARS, avatarEmoji } from "@/lib/online/types";
+  ACHIEVEMENTS,
+  CARD_STYLES,
+  TITLES,
+  achievementProgress,
+} from "@/lib/online/gamification";
+import { AVATARS } from "@/lib/online/types";
 import { cn } from "@/lib/cn";
 
 export function ProfileScreen() {
   const { t, locale } = useI18n();
   const profile = useSessionStore((s) => s.profile);
   const updateProfile = useSessionStore((s) => s.updateProfile);
+  const upgradePlan = useSessionStore((s) => s.upgradePlan);
+  const fileRef = useRef<HTMLInputElement>(null);
   const [editing, setEditing] = useState(false);
   const [name, setName] = useState(profile?.displayName ?? "");
 
   if (!profile) return null;
   const s = profile.stats;
   const winrate = s.games > 0 ? Math.round((s.wins / s.games) * 100) : 0;
+  const titleDef = TITLES.find((x) => x.id === profile.title);
+  const titleName = titleDef ? (locale === "fa" ? titleDef.nameFa : titleDef.nameEn) : null;
 
   const saveName = async () => {
     if (name.trim()) await updateProfile({ displayName: name.trim() });
     setEditing(false);
   };
 
+  const onUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => updateProfile({ avatarImage: String(reader.result) });
+    reader.readAsDataURL(file);
+  };
+
   return (
     <ScreenShell>
       <ScreenHeader title={t("profile.title")} />
 
       {/* identity */}
       <div className="glass rounded-3xl p-5 text-center">
-        <div className="size-20 mx-auto rounded-2xl bg-navy-900 gold-border flex items-center justify-center text-4xl">
+        <div className="relative size-20 mx-auto">
-          {avatarEmoji(profile.avatar)}
+          <div className="size-20 rounded-2xl bg-navy-900 gold-border flex items-center justify-center overflow-hidden">
+            <Avatar id={profile.avatar} image={profile.avatarImage} size={profile.avatarImage ? 80 : 56} />
           </div>
+          <button
+            onClick={() => fileRef.current?.click()}
+            className="absolute -bottom-1 ltr:-right-1 rtl:-left-1 btn-gold rounded-full p-1.5"
+            title={t("profile.upload")}
+          >
+            <Upload className="size-3.5" />
+          </button>
+          <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={onUpload} />
+        </div>
+
+        {titleName && (
+          <div className="mt-2 text-xs font-bold text-gold-300">{titleName}</div>
+        )}
 
         {editing ? (
           <div className="mt-3 flex items-center justify-center gap-2">
@@ -72,6 +104,23 @@ export function ProfileScreen() {
         <div className="mt-4">
           <XpBar level={profile.level} xp={profile.xp} />
         </div>
+
+        <div className="mt-4">
+          {profile.plan === "pro" ? (
+            <span className="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-bold text-gold-300 bg-gold-500/15 gold-border">
+              <Crown className="size-3.5 fill-gold-500" />
+              {t("plan.active")}
+            </span>
+          ) : (
+            <button
+              onClick={upgradePlan}
+              className="btn-gold inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs"
+            >
+              <Crown className="size-3.5" />
+              {t("plan.upgrade")} — {t("plan.proDesc")}
+            </button>
+          )}
+        </div>
       </div>
 
       {/* avatar picker */}
@@ -93,6 +142,57 @@ export function ProfileScreen() {
         </div>
       </div>
 
+      {/* title picker */}
+      <div className="glass rounded-2xl p-4 mt-4">
+        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.titleLabel")}</h3>
+        <div className="flex flex-wrap gap-2">
+          {TITLES.filter((tt) => profile.ownedTitles.includes(tt.id)).map((tt) => (
+            <button
+              key={tt.id}
+              onClick={() => updateProfile({ title: tt.id })}
+              className={cn(
+                "rounded-lg px-3 py-1.5 text-sm transition",
+                profile.title === tt.id
+                  ? "btn-gold"
+                  : "bg-navy-900/70 gold-border text-cream/70 hover:text-cream"
+              )}
+            >
+              {locale === "fa" ? tt.nameFa : tt.nameEn}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* card style picker */}
+      <div className="glass rounded-2xl p-4 mt-4">
+        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.cardStyleLabel")}</h3>
+        <div className="flex flex-wrap gap-2">
+          {CARD_STYLES.filter((c) => profile.ownedCardStyles.includes(c.id)).map((c) => (
+            <button
+              key={c.id}
+              onClick={() => updateProfile({ cardStyle: c.id })}
+              className={cn(
+                "rounded-xl p-1.5 flex items-center gap-2 transition",
+                profile.cardStyle === c.id
+                  ? "gold-border ring-2 ring-gold-400/60 bg-navy-900/70"
+                  : "bg-navy-900/70 border border-transparent hover:bg-navy-800"
+              )}
+            >
+              <span
+                className="w-7 h-10 rounded-md border"
+                style={{
+                  borderColor: `${c.accent}80`,
+                  background: `repeating-linear-gradient(45deg, ${c.accent}55 0 4px, transparent 4px 8px), ${c.c2}`,
+                }}
+              />
+              <span className="text-xs text-cream/80 pe-1">
+                {locale === "fa" ? c.nameFa : c.nameEn}
+              </span>
+            </button>
+          ))}
+        </div>
+      </div>
+
       {/* stats */}
       <div className="glass rounded-2xl p-4 mt-4">
         <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.stats")}</h3>

src/components/screens/ShopScreen.tsx

@@ -25,7 +25,7 @@ export function ShopScreen() {
   const owns = (item: ShopItem) =>
     item.kind === "avatar"
       ? profile.ownedAvatars.includes(item.id)
-      : profile.ownedThemes.includes(item.id);
+      : profile.ownedCardStyles.includes(item.id);
 
   const buy = async (item: ShopItem) => {
     const res = await getService().buyItem(item.id);
@@ -38,7 +38,7 @@ export function ShopScreen() {
   };
 
   const avatars = items.filter((i) => i.kind === "avatar");
-  const themes = items.filter((i) => i.kind === "theme");
+  const cardstyles = items.filter((i) => i.kind === "cardstyle");
 
   return (
     <ScreenShell>
@@ -64,9 +64,9 @@ export function ShopScreen() {
         </div>
       </Section>
 
-      <Section title={t("shop.themes")}>
+      <Section title={t("shop.cardstyles")}>
         <div className="grid grid-cols-3 gap-3">
-          {themes.map((item) => (
+          {cardstyles.map((item) => (
             <ItemCard
               key={item.id}
               item={item}
@@ -74,8 +74,11 @@ export function ShopScreen() {
               onBuy={() => buy(item)}
               preview={
                 <span
-                  className="size-10 rounded-xl border border-white/20"
+                  className="w-8 h-11 rounded-md border"
-                  style={{ background: item.preview }}
+                  style={{
+                    borderColor: `${item.preview}80`,
+                    background: `repeating-linear-gradient(45deg, ${item.preview}55 0 4px, transparent 4px 8px), #0a142e`,
+                  }}
                 />
               }
             />

src/lib/game-store.ts

@@ -11,7 +11,7 @@ import {
   selectHakem,
   startNextRound,
 } from "./hokm/engine";
-import { Card, GameState, RoundResult, Suit } from "./hokm/types";
+import { Card, GameState, RoundResult, Seat, Suit } from "./hokm/types";
 import { avatarEmoji } from "./online/types";
 
 const KOT_POINTS = 2;
@@ -25,6 +25,13 @@ export const TIMING = {
   roundPause: 2600,
 } as const;
 
+/** How long a player has to act before the system plays for them. */
+export const TURN_MS = 20000;
+/** Grace period to wait for a disconnected player to return. */
+export const RECONNECT_MS = 15000;
+/** Per-turn chance an online opponent briefly drops (mock). */
+const DISCONNECT_CHANCE = 0.07;
+
 export type GameMode = "ai" | "online";
 
 export interface SeatPlayer {
@@ -59,6 +66,12 @@ interface GameStore {
   matchMeta: { ranked: boolean; stake: number };
   tally: MatchTally;
 
+  /** epoch ms by which the current actor must act (for the turn-timer UI). */
+  turnDeadline: number | null;
+  /** a seat that has dropped and we're waiting on (online). */
+  disconnectedSeat: Seat | null;
+  reconnectDeadline: number | null;
+
   newMatch: (settings: GameSettings) => void;
   newOnlineMatch: (cfg: OnlineMatchConfig) => void;
   chooseTrump: (suit: Suit) => void;
@@ -93,12 +106,21 @@ export const useGameStore = create<GameStore>((set, get) => {
     });
   }
 
+  function playSeatAI(seat: Seat) {
+    const cur = get().game;
+    if (cur.phase !== "playing" || cur.turn !== seat) return;
+    const card = chooseCardAI(cur, seat);
+    set({ game: playCard(cur, seat, card) });
+    scheduleAuto();
+  }
+
   function scheduleAuto() {
     clearPending();
     const g = get().game;
 
     switch (g.phase) {
       case "selecting-hakem":
+        set({ turnDeadline: null, disconnectedSeat: null, reconnectDeadline: null });
         pending = setTimeout(() => {
           set({ game: dealForTrump(get().game) });
           scheduleAuto();
@@ -107,7 +129,18 @@ export const useGameStore = create<GameStore>((set, get) => {
 
       case "choosing-trump": {
         const hakem = g.hakem!;
-        if (!g.players[hakem].isHuman) {
+        if (g.players[hakem].isHuman) {
+          // human hakem: timed choice, system auto-picks on timeout
+          set({ turnDeadline: Date.now() + TURN_MS, disconnectedSeat: null, reconnectDeadline: null });
+          pending = setTimeout(() => {
+            const cur = get().game;
+            if (cur.phase !== "choosing-trump") return;
+            const suit = chooseTrumpAI(cur.players[cur.hakem!].hand);
+            set({ game: engineChooseTrump(cur, suit), turnDeadline: null });
+            scheduleAuto();
+          }, TURN_MS);
+        } else {
+          set({ turnDeadline: null });
           pending = setTimeout(() => {
             const cur = get().game;
             const suit = chooseTrumpAI(cur.players[cur.hakem!].hand);
@@ -120,29 +153,53 @@ export const useGameStore = create<GameStore>((set, get) => {
 
       case "playing": {
         const seat = g.turn!;
-        if (!g.players[seat].isHuman) {
+        if (g.players[seat].isHuman) {
+          // human turn: timed; system plays a smart legal move on timeout
+          set({ turnDeadline: Date.now() + TURN_MS, disconnectedSeat: null, reconnectDeadline: null });
           pending = setTimeout(() => {
             const cur = get().game;
-            const s = cur.turn!;
+            if (cur.phase !== "playing" || cur.turn !== seat) return;
-            const card = chooseCardAI(cur, s);
+            set({ game: playCard(cur, seat, chooseCardAI(cur, seat)), turnDeadline: null });
-            set({ game: playCard(cur, s, card) });
             scheduleAuto();
-          }, TIMING.aiPlay);
+          }, TURN_MS);
+        } else {
+          const st = get();
+          if (
+            st.mode === "online" &&
+            st.disconnectedSeat == null &&
+            Math.random() < DISCONNECT_CHANCE
+          ) {
+            // simulate this opponent dropping; wait for them, then they return
+            set({
+              turnDeadline: null,
+              disconnectedSeat: seat,
+              reconnectDeadline: Date.now() + RECONNECT_MS,
+            });
+            const back = Math.floor(RECONNECT_MS * (0.4 + Math.random() * 0.45));
+            pending = setTimeout(() => {
+              set({ disconnectedSeat: null, reconnectDeadline: null });
+              playSeatAI(seat);
+            }, back);
+          } else {
+            set({ turnDeadline: null });
+            pending = setTimeout(() => playSeatAI(seat), TIMING.aiPlay);
+          }
         }
         break;
       }
 
       case "trick-complete":
+        set({ turnDeadline: null, disconnectedSeat: null, reconnectDeadline: null });
         pending = setTimeout(() => {
           const next = advanceAfterTrick(get().game, KOT_POINTS);
           set({ game: next });
-          // record the round once when it finalizes into match-over
           if (next.phase === "match-over") recordRound(next.lastRoundResult);
           scheduleAuto();
         }, TIMING.trickPause);
         break;
 
       case "round-over":
+        set({ turnDeadline: null, disconnectedSeat: null, reconnectDeadline: null });
         pending = setTimeout(() => {
           recordRound(get().game.lastRoundResult);
           set({ game: startNextRound(get().game) });
@@ -151,6 +208,7 @@ export const useGameStore = create<GameStore>((set, get) => {
         break;
 
       default:
+        set({ turnDeadline: null });
         break;
     }
   }
@@ -162,6 +220,9 @@ export const useGameStore = create<GameStore>((set, get) => {
     seatPlayers: [],
     matchMeta: { ranked: false, stake: 0 },
     tally: freshTally(),
+    turnDeadline: null,
+    disconnectedSeat: null,
+    reconnectDeadline: null,
 
     newMatch: (settings) => {
       clearPending();
@@ -172,6 +233,9 @@ export const useGameStore = create<GameStore>((set, get) => {
         mode: "ai",
         matchMeta: { ranked: false, stake: 0 },
         tally: freshTally(),
+        turnDeadline: null,
+        disconnectedSeat: null,
+        reconnectDeadline: null,
         seatPlayers: settings.names.map((name, i) => ({
           name,
           avatar: AI_AVATARS[i],
@@ -191,6 +255,9 @@ export const useGameStore = create<GameStore>((set, get) => {
         mode: "online",
         matchMeta: { ranked: cfg.ranked, stake: cfg.stake },
         tally: freshTally(),
+        turnDeadline: null,
+        disconnectedSeat: null,
+        reconnectDeadline: null,
         seatPlayers: cfg.players.map((p) => ({
           name: p.displayName,
           avatar: avatarEmoji(p.avatar),
@@ -203,14 +270,14 @@ export const useGameStore = create<GameStore>((set, get) => {
     chooseTrump: (suit) => {
       const g = get().game;
       if (g.phase !== "choosing-trump") return;
-      set({ game: engineChooseTrump(g, suit) });
+      set({ game: engineChooseTrump(g, suit), turnDeadline: null });
       scheduleAuto();
     },
 
     playHuman: (card) => {
       const g = get().game;
       if (g.phase !== "playing" || g.turn !== 0) return;
-      set({ game: playCard(g, 0, card) });
+      set({ game: playCard(g, 0, card), turnDeadline: null });
       scheduleAuto();
     },
 
@@ -222,6 +289,9 @@ export const useGameStore = create<GameStore>((set, get) => {
         mode: "ai",
         seatPlayers: [],
         tally: freshTally(),
+        turnDeadline: null,
+        disconnectedSeat: null,
+        reconnectDeadline: null,
       });
     },
   };

src/lib/i18n.tsx

@@ -196,6 +196,29 @@ const fa: Dict = {
   "daily.come": "فردا برگردید",
 
   "rank.label": "لیگ",
+
+  "dc.waiting": "{name} قطع شد — منتظر بازگشت ({s})",
+
+  "profile.titleLabel": "عنوان",
+  "profile.cardStyleLabel": "طرح کارت",
+  "profile.image": "تصویر پروفایل",
+  "profile.upload": "آپلود تصویر",
+  "profile.plan": "اشتراک",
+
+  "plan.pro": "ویژه",
+  "plan.free": "رایگان",
+  "plan.upgrade": "ارتقا به ویژه",
+  "plan.proDesc": "بازی بدون صف، در هر زمان",
+  "plan.active": "اشتراک ویژه فعال است",
+
+  "queue.title": "در صف بازی",
+  "queue.busy": "سرور شلوغ است",
+  "queue.position": "نفر {n} در صف",
+  "queue.skip": "با اشتراک ویژه بدون صف وارد شوید",
+  "queue.upgrade": "ورود سریع (ویژه)",
+
+  "shop.cardstyles": "طرح کارت‌ها",
+  "reward.newTitle": "عنوان جدید",
 };
 
 const en: Dict = {
@@ -381,6 +404,29 @@ const en: Dict = {
   "daily.come": "Come back tomorrow",
 
   "rank.label": "League",
+
+  "dc.waiting": "{name} disconnected — waiting ({s})",
+
+  "profile.titleLabel": "Title",
+  "profile.cardStyleLabel": "Card style",
+  "profile.image": "Profile image",
+  "profile.upload": "Upload image",
+  "profile.plan": "Plan",
+
+  "plan.pro": "Pro",
+  "plan.free": "Free",
+  "plan.upgrade": "Upgrade to Pro",
+  "plan.proDesc": "Skip the queue, play anytime",
+  "plan.active": "Pro plan active",
+
+  "queue.title": "In queue",
+  "queue.busy": "Server is busy",
+  "queue.position": "{n} in line",
+  "queue.skip": "Go Pro to skip the queue",
+  "queue.upgrade": "Skip queue (Pro)",
+
+  "shop.cardstyles": "Card styles",
+  "reward.newTitle": "New title",
 };
 
 const DICTS: Record<Locale, Dict> = { fa, en };

src/lib/online/gamification.ts

@@ -4,12 +4,15 @@
 import {
   AchievementDef,
   AchievementUnlock,
+  CardStyleDef,
   LeagueInfo,
   MatchSummary,
   PlayerStats,
   RankTier,
   RankTierId,
   RewardResult,
+  TitleDef,
+  TitleUnlock,
   UserProfile,
 } from "./types";
 
@@ -176,6 +179,55 @@ export function achievementProgress(
   }
 }
 
+/* ------------------------------ Titles ------------------------------- */
+
+export const TITLES: TitleDef[] = [
+  { id: "novice", nameFa: "تازه‌کار", nameEn: "Novice", hintFa: "پیش‌فرض", hintEn: "Default" },
+  { id: "winner", nameFa: "برنده", nameEn: "Winner", hintFa: "۱۰ برد", hintEn: "10 wins" },
+  { id: "kot_master", nameFa: "استاد کُت", nameEn: "Kot Master", hintFa: "۱۰ کُت", hintEn: "10 kots" },
+  { id: "veteran", nameFa: "کهنه‌کار", nameEn: "Veteran", hintFa: "سطح ۲۰", hintEn: "Level 20" },
+  { id: "champion", nameFa: "قهرمان", nameEn: "Champion", hintFa: "لیگ طلا", hintEn: "Gold league" },
+  { id: "legend", nameFa: "اسطوره", nameEn: "Legend", hintFa: "لیگ استاد", hintEn: "Master league" },
+];
+
+export function titleUnlocked(
+  id: string,
+  stats: PlayerStats,
+  rating: number,
+  level: number
+): boolean {
+  switch (id) {
+    case "novice":
+      return true;
+    case "winner":
+      return stats.wins >= 10;
+    case "kot_master":
+      return stats.kotsFor >= 10;
+    case "veteran":
+      return level >= 20;
+    case "champion":
+      return rating >= tierById("gold").floor;
+    case "legend":
+      return rating >= tierById("master").floor;
+    default:
+      return false;
+  }
+}
+
+/* ---------------------------- Card styles ---------------------------- */
+
+export const CARD_STYLES: CardStyleDef[] = [
+  { id: "classic", nameFa: "کلاسیک", nameEn: "Classic", c1: "#14274f", c2: "#0a142e", accent: "#d4af37", price: 0 },
+  { id: "sapphire", nameFa: "یاقوت کبود", nameEn: "Sapphire", c1: "#0b3a82", c2: "#06173a", accent: "#6aa6ff", price: 800 },
+  { id: "ruby", nameFa: "یاقوت", nameEn: "Ruby", c1: "#7f1d2e", c2: "#2b0a12", accent: "#ff7a90", price: 800 },
+  { id: "emerald", nameFa: "زمرد", nameEn: "Emerald", c1: "#0d6b5e", c2: "#062420", accent: "#2dd4bf", price: 1000 },
+  { id: "royal", nameFa: "سلطنتی", nameEn: "Royal", c1: "#4a1d7f", c2: "#1a0a2e", accent: "#c77dff", price: 1500 },
+];
+
+export function cardStyleById(id: string): CardStyleDef {
+  return CARD_STYLES.find((c) => c.id === id) ?? CARD_STYLES[0];
+}
+
 /* ---------------------- Apply a match result ------------------------- */
 
 function applyStats(stats: PlayerStats, summary: MatchSummary): PlayerStats {
@@ -239,6 +291,19 @@ export function applyMatchResult(
 
   const coinsAfter = Math.max(0, coinsBefore + cDelta + achievementCoins);
 
+  // Titles unlocked by the new state.
+  const ownedTitles = [...(profile.ownedTitles ?? [])];
+  const newTitles: TitleUnlock[] = [];
+  for (const tdef of TITLES) {
+    if (
+      titleUnlocked(tdef.id, stats, ratingAfter, lvl.level) &&
+      !ownedTitles.includes(tdef.id)
+    ) {
+      ownedTitles.push(tdef.id);
+      newTitles.push({ id: tdef.id, nameFa: tdef.nameFa, nameEn: tdef.nameEn });
+    }
+  }
+
   const leagueBefore = getLeagueInfo(ratingBefore);
   const leagueAfter = getLeagueInfo(ratingAfter);
   const tierIndex = (id: RankTierId) => RANK_TIERS.findIndex((t) => t.id === id);
@@ -256,6 +321,7 @@ export function applyMatchResult(
     stats,
     achievements,
     unlocked,
+    ownedTitles,
   };
 
   const reward: RewardResult = {
@@ -270,6 +336,7 @@ export function applyMatchResult(
     levelAfter: lvl.level,
     leveledUp: lvl.level > levelBefore,
     newAchievements,
+    newTitles,
     promoted,
     demoted,
   };

src/lib/online/mock-service.ts

@@ -2,7 +2,7 @@
 // Simulates remote players, friends presence, room invites and matchmaking
 // with timers, and computes rewards via gamification.ts.
 
-import { applyMatchResult, dailyRewardFor } from "./gamification";
+import { CARD_STYLES, applyMatchResult, dailyRewardFor } from "./gamification";
 import {
   CreateRoomOptions,
   MatchmakingOptions,
@@ -94,7 +94,7 @@ function defaultProfile(session: AuthSession): UserProfile {
     username: "player_" + session.userId.slice(-4),
     displayName: "بازیکن",
     avatar: AVATARS[0].id,
-    phone: session.method === "phone" ? undefined : undefined,
+    plan: "free",
     level: 1,
     xp: 0,
     coins: 1000,
@@ -110,13 +110,29 @@ function defaultProfile(session: AuthSession): UserProfile {
       currentWinStreak: 0,
     },
     ownedAvatars: [AVATARS[0].id, AVATARS[1].id],
-    ownedThemes: ["royal"],
+    ownedCardStyles: ["classic"],
+    ownedTitles: ["novice"],
+    title: "novice",
+    cardStyle: "classic",
     achievements: {},
     unlocked: [],
     createdAt: Date.now(),
   };
 }
 
+/** Backfill fields on older persisted profiles so the app never crashes. */
+function migrateProfile(p: UserProfile): UserProfile {
+  return {
+    ...p,
+    plan: p.plan ?? "free",
+    ownedAvatars: p.ownedAvatars ?? [AVATARS[0].id],
+    ownedCardStyles: p.ownedCardStyles ?? ["classic"],
+    ownedTitles: p.ownedTitles ?? ["novice"],
+    title: p.title ?? "novice",
+    cardStyle: p.cardStyle ?? "classic",
+  };
+}
+
 function makeFriend(status?: PresenceStatus): Friend {
   return {
     id: rid("fr"),
@@ -147,6 +163,7 @@ export class MockOnlineService implements OnlineService {
     | null = null;
   private currentOppRating = 1000;
   private lastOtp = "";
+  private mmOpts: MatchmakingOptions | null = null;
 
   private messages: Record<string, ChatMessage[]> = {};
   private unread: Record<string, number> = {};
@@ -159,7 +176,8 @@ export class MockOnlineService implements OnlineService {
 
   constructor() {
     this.session = load<AuthSession>(LS.session);
-    this.profile = load<UserProfile>(LS.profile);
+    const loaded = load<UserProfile>(LS.profile);
+    this.profile = loaded ? migrateProfile(loaded) : null;
     this.messages = load<Record<string, ChatMessage[]>>(LS.chats) ?? {};
     this.seedFriends();
   }
@@ -282,10 +300,10 @@ export class MockOnlineService implements OnlineService {
 
   async getProfile() {
     if (!this.profile) {
-      // guest fallback profile (not persisted as session)
+      const loaded = load<UserProfile>(LS.profile);
-      this.profile =
+      this.profile = loaded
-        load<UserProfile>(LS.profile) ??
+        ? migrateProfile(loaded)
-        defaultProfile({
+        : defaultProfile({
             userId: rid("guest"),
             token: "",
             method: "guest",
@@ -296,13 +314,26 @@ export class MockOnlineService implements OnlineService {
     return this.profile;
   }
 
-  async updateProfile(patch: Partial<Pick<UserProfile, "displayName" | "avatar">>) {
+  async updateProfile(
+    patch: Partial<
+      Pick<UserProfile, "displayName" | "avatar" | "avatarImage" | "title" | "cardStyle">
+    >
+  ) {
     const p = await this.getProfile();
     this.profile = { ...p, ...patch };
     this.saveProfile();
     return this.profile;
   }
 
+  async upgradePlan(): Promise<UserProfile> {
+    const p = await this.getProfile();
+    this.profile = { ...p, plan: "pro", planUntil: Date.now() + 30 * 864e5 };
+    this.saveProfile();
+    // pro players skip the queue immediately
+    if (this.matchmaking.phase === "queued") this.beginSearch();
+    return this.profile;
+  }
+
   /* ----------------------------- friends ----------------------------- */
 
   async listFriends() {
@@ -536,6 +567,44 @@ export class MockOnlineService implements OnlineService {
 
   async startMatchmaking(opts: MatchmakingOptions) {
     await this.getProfile();
+    this.mmOpts = opts;
+    const me = this.profile!;
+    const pro = me.plan === "pro";
+    const busy = Math.random() < 0.7;
+
+    if (!pro && busy) {
+      // server is busy and the player is on the free plan → queue them
+      let pos = randInt(3, 8);
+      this.matchmaking = {
+        phase: "queued",
+        players: [{ id: me.id, displayName: me.displayName, avatar: me.avatar, level: me.level, rating: me.rating }],
+        elapsedMs: 0,
+        ranked: opts.ranked,
+        stake: opts.stake,
+        queuePosition: pos,
+      };
+      this.emitMM();
+      const tick = () =>
+        this.after(1100, () => {
+          if (this.matchmaking.phase !== "queued") return;
+          pos -= 1;
+          if (pos <= 0) {
+            this.beginSearch();
+          } else {
+            this.matchmaking.queuePosition = pos;
+            this.emitMM();
+            tick();
+          }
+        });
+      tick();
+      return;
+    }
+
+    this.beginSearch();
+  }
+
+  private beginSearch() {
+    const opts = this.mmOpts!;
     const me = this.profile!;
     this.matchmaking = {
       phase: "searching",
@@ -646,12 +715,15 @@ export class MockOnlineService implements OnlineService {
       price: 500 + i * 150,
       preview: a.emoji,
     }));
-    const themes: ShopItem[] = [
+    const cardItems: ShopItem[] = CARD_STYLES.filter((c) => c.price > 0).map((c) => ({
-      { id: "midnight", kind: "theme", nameFa: "تم نیمه‌شب", nameEn: "Midnight", price: 1200, preview: "#0a142e" },
+      id: c.id,
-      { id: "emerald", kind: "theme", nameFa: "تم زمرد", nameEn: "Emerald", price: 1500, preview: "#0d6b6b" },
+      kind: "cardstyle",
-      { id: "crimson", kind: "theme", nameFa: "تم یاقوت", nameEn: "Crimson", price: 1800, preview: "#7f1d2e" },
+      nameFa: c.nameFa,
-    ];
+      nameEn: c.nameEn,
-    return [...avatarItems, ...themes];
+      price: c.price,
+      preview: c.accent,
+    }));
+    return [...avatarItems, ...cardItems];
   }
 
   async buyItem(id: string) {
@@ -660,7 +732,7 @@ export class MockOnlineService implements OnlineService {
     const item = items.find((i) => i.id === id);
     if (!item) return { ok: false, messageFa: "آیتم یافت نشد", messageEn: "Item not found" };
     const owned =
-      item.kind === "avatar" ? p.ownedAvatars.includes(id) : p.ownedThemes.includes(id);
+      item.kind === "avatar" ? p.ownedAvatars.includes(id) : p.ownedCardStyles.includes(id);
     if (owned) return { ok: false, messageFa: "قبلاً خریداری شده", messageEn: "Already owned" };
     if (p.coins < item.price)
       return { ok: false, messageFa: "سکه کافی نیست", messageEn: "Not enough coins" };
@@ -669,7 +741,8 @@ export class MockOnlineService implements OnlineService {
       ...p,
       coins: p.coins - item.price,
       ownedAvatars: item.kind === "avatar" ? [...p.ownedAvatars, id] : p.ownedAvatars,
-      ownedThemes: item.kind === "theme" ? [...p.ownedThemes, id] : p.ownedThemes,
+      ownedCardStyles:
+        item.kind === "cardstyle" ? [...p.ownedCardStyles, id] : p.ownedCardStyles,
     };
     this.saveProfile();
     return { ok: true, profile: this.profile, messageFa: "خرید انجام شد", messageEn: "Purchased" };

src/lib/online/service.ts

@@ -44,7 +44,12 @@ export interface OnlineService {
 
   /* ----- profile ----- */
   getProfile(): Promise<UserProfile>;
-  updateProfile(patch: Partial<Pick<UserProfile, "displayName" | "avatar">>): Promise<UserProfile>;
+  updateProfile(
+    patch: Partial<
+      Pick<UserProfile, "displayName" | "avatar" | "avatarImage" | "title" | "cardStyle">
+    >
+  ): Promise<UserProfile>;
+  upgradePlan(): Promise<UserProfile>;
 
   /* ----- friends ----- */
   listFriends(): Promise<Friend[]>;

src/lib/online/types.ts

@@ -28,22 +28,35 @@ export interface PlayerStats {
   currentWinStreak: number;
 }
 
+export type PlanId = "free" | "pro";
+
 export interface UserProfile {
   id: string;
   username: string;
   displayName: string;
   avatar: string; // avatar id (see AVATARS)
+  avatarImage?: string; // custom uploaded image (data URL); overrides avatar
   phone?: string;
   email?: string;
 
+  plan: PlanId;
+  /** epoch ms when a pro plan expires (mock: far future) */
+  planUntil?: number;
+
   level: number;
   xp: number; // xp within the current level
   coins: number;
   rating: number; // competitive rating
 
   stats: PlayerStats;
+
+  // cosmetics
   ownedAvatars: string[];
-  ownedThemes: string[];
+  ownedCardStyles: string[];
+  ownedTitles: string[];
+  title: string | null; // equipped title id
+  cardStyle: string; // equipped card-back style id
+
   achievements: Record<string, number>; // achievementId -> progress count
   unlocked: string[]; // achievementId list already unlocked
 
@@ -98,6 +111,27 @@ export interface AchievementView extends AchievementDef {
   unlocked: boolean;
 }
 
+/* ----------------------- Titles & card styles ------------------------ */
+
+export interface TitleDef {
+  id: string;
+  nameFa: string;
+  nameEn: string;
+  /** how it's unlocked (for display) */
+  hintFa: string;
+  hintEn: string;
+}
+
+export interface CardStyleDef {
+  id: string;
+  nameFa: string;
+  nameEn: string;
+  c1: string; // back gradient start
+  c2: string; // back gradient end
+  accent: string; // pattern/border accent
+  price: number; // 0 = free/default
+}
+
 /* ------------------------------ Friends ------------------------------ */
 
 export type PresenceStatus = "online" | "offline" | "in-game";
@@ -152,6 +186,7 @@ export interface Room {
 
 export type MatchmakingPhase =
   | "idle"
+  | "queued" // server busy, free plan waiting in line
   | "searching"
   | "found"
   | "ready"
@@ -170,6 +205,8 @@ export interface MatchmakingState {
   elapsedMs: number;
   ranked: boolean;
   stake: number;
+  /** position in the queue when phase === "queued" */
+  queuePosition?: number;
 }
 
 /* ------------------------- Match + Rewards --------------------------- */
@@ -193,6 +230,12 @@ export interface AchievementUnlock {
   coinReward: number;
 }
 
+export interface TitleUnlock {
+  id: string;
+  nameFa: string;
+  nameEn: string;
+}
+
 export interface RewardResult {
   ratingBefore: number;
   ratingAfter: number;
@@ -205,6 +248,7 @@ export interface RewardResult {
   levelAfter: number;
   leveledUp: boolean;
   newAchievements: AchievementUnlock[];
+  newTitles: TitleUnlock[];
   promoted: boolean;
   demoted: boolean;
 }
@@ -223,7 +267,7 @@ export interface LeaderboardEntry {
 
 /* ------------------------------- Shop -------------------------------- */
 
-export type ShopItemKind = "avatar" | "theme";
+export type ShopItemKind = "avatar" | "cardstyle";
 
 export interface ShopItem {
   id: string;

src/lib/session-store.ts

@@ -21,7 +21,10 @@ interface SessionStore {
   signInGoogle: () => Promise<void>;
   signOut: () => Promise<void>;
 
-  updateProfile: (patch: Partial<Pick<UserProfile, "displayName" | "avatar">>) => Promise<void>;
+  updateProfile: (
+    patch: Partial<Pick<UserProfile, "displayName" | "avatar" | "avatarImage" | "title" | "cardStyle">>
+  ) => Promise<void>;
+  upgradePlan: () => Promise<void>;
 }
 
 export const useSessionStore = create<SessionStore>((set, get) => ({
@@ -84,4 +87,9 @@ export const useSessionStore = create<SessionStore>((set, get) => ({
     const profile = await getService().updateProfile(patch);
     set({ profile });
   },
+
+  upgradePlan: async () => {
+    const profile = await getService().upgradePlan();
+    set({ profile });
+  },
 }));