The selected companion everywhere, each with a small trait; next-APK notes

- state/companion.ts: one store for the chosen companion (also in localStorage so splash/login show it). BrandMark (the orange «π» tile) now shows the companion's symbol (Σ Δ π ω) in its colour; screen-header mascots, loaders and empty/error states default to it; the assistant is «از {name} بپرس» with its face, colour and wording; the shop, lesson and quiz «ask» buttons name it; the active tab takes its tint. - Traits, all client-side and light: Σ sigma keeps a running tally of correct answers in the quiz header; Δ delta shows a flame «×N» chip and an extra buzz for answers in a row; π pi gives a short solving tip after a wrong answer; ω omega throws gold confetti at the end of every island whatever the score. Each companion's «correct» sound is pitched differently; confetti uses its colours. Characters screen lists each trait. - android/README.md: what MainActivity.kt has that the installed APK lacks (vibrate bridge, media gesture, in-app gateway + paysInApp), what to check on a phone after building, signing owner, Bazaar policy note. Checked in headless Chrome with Sigma, Delta and Omega selected (home, assistant, shop, characters, quiz). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-10 18:51:19 +03:30
parent 737414f246
commit 8a61cb25b8
21 changed files with 256 additions and 69 deletions
--- a/src/components/BottomNav.tsx
+++ b/src/components/BottomNav.tsx
@@ -1,4 +1,6 @@
 import { sounds } from '@/lib/sound';
+import { useCompanion } from '@/state/companion';
+import { onWhite } from '@/lib/color';
 import { Brain, ShoppingBag, Home, BookOpen, UserRound, type LucideIcon } from 'lucide-react';
 import type { TabName } from '@/nav/routes';

@@ -11,6 +13,8 @@ const ITEMS: { id: TabName; icon: LucideIcon; label: string }[] = [
 ];

 export function BottomNav({ active, onChange }: { active: TabName | null; onChange: (tab: TabName) => void }) {
+  // تبِ روشن به رنگِ همراهِ انتخابی (تیره‌شده تا روی سفید خوانا بماند؛ امگای طلایی بی‌آن کم‌رنگ بود).
+  const tint = onWhite(useCompanion().color);
  return (
    <nav className="flex flex-shrink-0 items-center justify-around border-t border-line bg-white px-2 pb-safe pt-1.5">
      {ITEMS.map(({ id, icon: Icon, label }) => {
@@ -24,9 +28,10 @@ export function BottomNav({ active, onChange }: { active: TabName | null; onChan
              onChange(id);
            }}
            aria-current={on ? 'page' : undefined}
-            className={`flex min-w-14 flex-col items-center gap-0.5 rounded-xl px-2 pb-1.5 transition-[color,transform] active:scale-90 ${on ? 'text-coral' : 'text-muted'}`}
+            className={`flex min-w-14 flex-col items-center gap-0.5 rounded-xl px-2 pb-1.5 transition-[color,transform] active:scale-90 ${on ? '' : 'text-muted'}`}
+            style={on ? { color: tint } : undefined}
          >
-            <span className={`rounded-xl p-1.5 transition-colors ${on ? 'bg-[#fde9e5]' : ''}`}>
+            <span className="rounded-xl p-1.5 transition-colors" style={on ? { backgroundColor: `${tint}1F` } : undefined}>
              <Icon size={20} strokeWidth={on ? 2.5 : 1.9} />
            </span>
            <span className="text-[11px] font-bold">{label}</span>
--- a/src/components/BrandMark.tsx
+++ b/src/components/BrandMark.tsx
@@ -1,20 +1,28 @@
+import { useId } from 'react';
+import { useCompanion } from '@/state/companion';
+
 /**
- * نشانِ تدریسینو: یک کاشیِ گرد با «π» و جرقه‌ی کوچکِ چشمک‌زن، کنارِ نامِ تدریسینو.
- * خودِ SVG است (بی‌فایلِ تصویر)، پس در هر اندازه تیز است و چیزی دانلود نمی‌شود.
+ * نشانِ تدریسینو: یک کاشیِ گرد با نمادِ همراهِ انتخابیِ کاربر (Σ، Δ، π، ω) به رنگِ همان همراه، و جرقه‌ی کوچکِ
+ * چشمک‌زن، کنارِ نامِ تدریسینو. پیش‌تر همیشه «π»ِ نارنجی بود و با همراهِ کاربر جور نبود (خواستِ مالک، ۱۴۰۵-۰۷).
+ * خودِ SVG است (بی‌فایلِ تصویر).
 */
 export function BrandMark({ size = 28, tone = 'light', withName = true }: { size?: number; tone?: 'light' | 'dark'; withName?: boolean }) {
  const ink = tone === 'light' ? '#fff' : '#3C3F8F';
+  const c = useCompanion();
+  const gid = useId();
  return (
    <span className="inline-flex items-center gap-1.5" aria-label="تدریسینو">
      <svg width={size} height={size} viewBox="0 0 32 32" aria-hidden="true">
        <defs>
-          <linearGradient id="bm-g" x1="0" y1="0" x2="1" y2="1">
-            <stop offset="0" stopColor="#FF9A5C" />
-            <stop offset="1" stopColor="#ED6956" />
+          <linearGradient id={gid} x1="0" y1="0" x2="1" y2="1">
+            <stop offset="0" stopColor={c.light} />
+            <stop offset="1" stopColor={c.color} />
          </linearGradient>
        </defs>
-        <rect x="1" y="1" width="30" height="30" rx="9" fill="url(#bm-g)" stroke={tone === 'light' ? 'rgba(255,255,255,.55)' : 'none'} />
-        <path d="M9 11.5h14M12.5 11.5v10M19 11.5v8.2c0 1.2.7 1.8 1.8 1.8" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" fill="none" />
+        <rect x="1" y="1" width="30" height="30" rx="9" fill={`url(#${gid})`} stroke={tone === 'light' ? 'rgba(255,255,255,.55)' : 'none'} />
+        <text x="16" y="17" textAnchor="middle" dominantBaseline="central" fill="#fff" fontSize="19" fontWeight="900" fontFamily="Vazirmatn, system-ui, sans-serif">
+          {c.symbol}
+        </text>
        <path className="spark" d="M25 4.5l.9 1.9 1.9.9-1.9.9-.9 1.9-.9-1.9-1.9-.9 1.9-.9z" fill="#FFD23F" />
      </svg>
      {withName && <span className="font-black tracking-tight" style={{ color: ink, fontSize: size * 0.62 }}>تدریسینو</span>}
--- a/src/components/NoHeartsScreen.tsx
+++ b/src/components/NoHeartsScreen.tsx
@@ -7,6 +7,7 @@ import { useNav } from '@/nav/Navigator';
 import { SeyarMascot } from '@/mascots/SeyarMascot';
 import { PrimaryButton, Screen } from '@/components/ui';
 import { toFa } from '@/lib/format';
+import { useCompanion } from '@/state/companion';

 /**
 * «قلب‌هات تموم شد»: با قلبِ صفر سرور هیچ جوابی نمی‌پذیرد (۴۰۳ با code=no_hearts) و پایانِ درس یا
@@ -56,6 +57,7 @@ export function NoHeartsScreen({
  /** قلب برگشت و کاربر «ادامه بده» زد. */
  onRefilled: () => void;
 }) {
+  const companionName = useCompanion().name;
  const nav = useNav();
  const { companion } = useAppData();
  const now = useNow();
@@ -174,7 +176,7 @@ export function NoHeartsScreen({
                <Brain size={20} />
              </span>
              <span className="flex-1">
-                <span className="block text-sm font-black text-ink">تا اون موقع از «پی» بپرس</span>
+                <span className="block text-sm font-black text-ink">تا اون موقع از «{companionName}» بپرس</span>
                <span className="block text-xs leading-6 text-muted">جایی که گیر کردی رو با هم مرور کنیم؛ قلب خرج نمی‌کنه.</span>
              </span>
            </button>
--- a/src/components/ui.tsx
+++ b/src/components/ui.tsx
@@ -5,6 +5,7 @@ import type { SeyarChar, SeyarMood } from '@/mascots/seyar';
 import { friendlyError } from '@/lib/errors';
 import { useNav } from '@/nav/Navigator';
 import { onWhite, shade } from '@/lib/color';
+import { useCompanion } from '@/state/companion';

 /* ─── سربرگِ رنگیِ صفحه ──────────────────────────────────────────────────── */

@@ -22,12 +23,14 @@ export function ScreenHeader({
  color: string;
  /** دکمه‌ی بازگشت؛ true یعنی صفحه‌ی قبل در پشته. */
  back?: boolean | (() => void);
-  mascot?: { char: SeyarChar; mood?: SeyarMood; size?: number };
+  /** بی `char` همراهِ انتخابیِ کاربر است؛ همه‌ی صفحه‌ها همین را می‌خواهند. */
+  mascot?: { char?: SeyarChar; mood?: SeyarMood; size?: number };
  /** رنگ را همان‌طور که هست بگذار (بی‌تیره‌کردن برای کنتراست)؛ انتخابِ مالک برای چند صفحه. */
  exact?: boolean;
  children?: ReactNode;
 }) {
  const nav = useNav();
+  const companion = useCompanion().char;
  const onBack = typeof back === 'function' ? back : nav.back;
  const bg = exact ? color : onWhite(color);
  return (
@@ -52,7 +55,7 @@ export function ScreenHeader({
            <h1 className="text-xl font-black leading-snug">{title}</h1>
            {subtitle && <div className="mt-1 text-xs text-white/75">{subtitle}</div>}
          </div>
-          {mascot && <SeyarMascot char={mascot.char} mood={mascot.mood ?? 'happy'} size={mascot.size ?? 64} />}
+          {mascot && <SeyarMascot char={mascot.char ?? companion} mood={mascot.mood ?? 'happy'} size={mascot.size ?? 64} />}
        </div>
        {children}
      </div>
@@ -128,10 +131,11 @@ export function Spinner({ size = 20, className = '' }: { size?: number; classNam

 /* ─── حالت‌های بارگذاری / خطا / خالی ───────────────────────────────────────── */

-function StateBox({ char, mood, text, children }: { char: SeyarChar; mood: SeyarMood; text: ReactNode; children?: ReactNode }) {
+function StateBox({ char, mood, text, children }: { char?: SeyarChar; mood: SeyarMood; text: ReactNode; children?: ReactNode }) {
+  const companion = useCompanion().char;
  return (
    <div className="flex flex-col items-center justify-center gap-3 px-8 py-16 text-center">
-      <SeyarMascot char={char} mood={mood} size={72} />
+      <SeyarMascot char={char ?? companion} mood={mood} size={72} />
      <p className="text-sm leading-7 text-muted">{text}</p>
      {children}
    </div>
@@ -143,7 +147,7 @@ function StateBox({ char, mood, text, children }: { char: SeyarChar; mood: Seyar
 * همان چند فریم، پرشِ ریزِ «لودر ← محتوا» می‌ساخت؛ حالا تا آن لحظه جای خالی می‌ماند. اگر پاسخ
 * کند باشد کاربر باز هم لودر را می‌بیند. در مرورگر با شبکه‌ی کند آزموده نشده.
 */
-export function LoadingState({ text = 'یه لحظه صبر کن…', char = 'sigma' as SeyarChar, delayMs = 300 }) {
+export function LoadingState({ text = 'یه لحظه صبر کن…', char, delayMs = 300 }: { text?: string; char?: SeyarChar; delayMs?: number }) {
  const [show, setShow] = useState(delayMs <= 0);
  useEffect(() => {
    if (delayMs <= 0) return;
@@ -155,7 +159,7 @@ export function LoadingState({ text = 'یه لحظه صبر کن…', char = 'si

 export function ErrorState({ error, onRetry, text }: { error?: unknown; onRetry?: () => void; text?: string }) {
  return (
-    <StateBox char="pi" mood="sad" text={text ?? friendlyError(error)}>
+    <StateBox mood="sad" text={text ?? friendlyError(error)}>
      {onRetry && (
        <button
          type="button"
@@ -169,7 +173,7 @@ export function ErrorState({ error, onRetry, text }: { error?: unknown; onRetry?
  );
 }

-export function EmptyState({ text, char = 'pi' as SeyarChar }: { text: string; char?: SeyarChar }) {
+export function EmptyState({ text, char }: { text: string; char?: SeyarChar }) {
  return <StateBox char={char} mood="idle" text={text} />;
 }

--- a/src/lib/sound.ts
+++ b/src/lib/sound.ts
@@ -130,11 +130,18 @@ export const sounds = {
    note(880, 0, 0.05, 0.025, 'triangle');
    buzz(8);
  },
-  correct: () => {
-    note(E5, 0, 0.12, 0.05);
-    note(C6, 0.09, 0.22, 0.05);
+  /** `pitch`: نیم‌پرده بالاتر برای همراهِ انتخابی (state/companion)؛ هر همراه صدای خودش را دارد. */
+  correct: (pitch = 0) => {
+    const k = 2 ** (pitch / 12);
+    note(E5 * k, 0, 0.12, 0.05);
+    note(C6 * k, 0.09, 0.22, 0.05);
    buzz(25);
  },
+  /** دلتا: جوابِ درستِ پشتِ هم یک لرزشِ دوتایی و یک نتِ بالاتر اضافه دارد. */
+  combo: () => {
+    note(G6, 0.2, 0.15, 0.03);
+    buzz([20, 40, 30]);
+  },
  wrong: () => {
    note(311, 0, 0.16, 0.045, 'triangle');
    note(233, 0.12, 0.24, 0.045, 'triangle');
--- a/src/lib/storage.ts
+++ b/src/lib/storage.ts
@@ -28,4 +28,5 @@ export const KEYS = {
  conversationId: 'tadrisino.conversationId',
  sound: 'tadrisino.sound',
  referralCode: 'tadrisino.referralCode',
+  companion: 'tadrisino.companion',
 } as const;
--- a/src/screens/AskScreen.tsx
+++ b/src/screens/AskScreen.tsx
@@ -13,12 +13,14 @@ import { MathText } from '@/lib/MathText';
 import { friendlyError } from '@/lib/errors';
 import { toFa } from '@/lib/format';
 import { useGateHold } from '@/lib/useAsync';
+import { iAm, useCompanion } from '@/state/companion';

 const STARTERS = ['این فصل درباره‌ی چیه؟', 'یه مثالِ ساده برام حل کن', 'چطور برای امتحان تمرین کنم؟'];

-/** «از پی بپرس»: دستیارِ ریاضی که از روی کتابِ پایه‌ی کاربر جواب می‌دهد. */
+/** «از {همراه} بپرس»: دستیارِ ریاضی که از روی کتابِ پایه‌ی کاربر جواب می‌دهد؛ چهره و نامش همراهِ انتخابیِ کاربر است. */
 export function AskScreen({ lessonId, questionId, prompt }: { lessonId?: number; questionId?: string; prompt?: string }) {
  const { profile } = useAppData();
+  const companion = useCompanion();
  const chat = useAskState();
  const [input, setInput] = useState('');
  const [busy, setBusy] = useState(false);
@@ -132,11 +134,11 @@ export function AskScreen({ lessonId, questionId, prompt }: { lessonId?: number;
  return (
    <Screen>
      <ScreenHeader
-        title="از پی بپرس"
+        title={`از ${companion.name} بپرس`}
        subtitle={chat.lessonId ? 'از روی کتابِ همین درس جواب می‌دم' : 'دستیارِ ریاضی، از روی کتابِ خودت'}
-        color="#9B7BFF"
+        color={companion.color}
        back={lessonId !== undefined || prompt !== undefined}
-        mascot={{ char: 'pi', mood: busy ? 'excited' : 'idle', size: 60 }}
+        mascot={{ mood: busy ? 'excited' : 'idle', size: 60 }}
      >
        <div className="mt-3 flex flex-wrap items-center gap-2">
          {quota !== null && <QuotaPills free={quota.free} credits={quota.credits} />}
@@ -155,7 +157,7 @@ export function AskScreen({ lessonId, questionId, prompt }: { lessonId?: number;

      <div className="flex flex-1 flex-col gap-3 overflow-y-auto px-4 py-4">
        <Bubble role="assistant">
-          سلام {profile.name || 'دوستِ من'}! من پی‌ام 🙂 هر سوالی از ریاضیِ کتابت داری بپرس؛ قدم‌به‌قدم با هم حلش می‌کنیم.
+          سلام {profile.name || 'دوستِ من'}! {`من ${iAm(companion.name)}`} 🙂 هر سوالی از ریاضیِ کتابت داری بپرس؛ قدم‌به‌قدم با هم حلش می‌کنیم.
        </Bubble>

        {empty && chat.historyLoaded && (
@@ -216,11 +218,12 @@ export function AskScreen({ lessonId, questionId, prompt }: { lessonId?: number;

 function Bubble({ role, children, extra }: { role: 'user' | 'assistant'; children: React.ReactNode; extra?: React.ReactNode }) {
  const mine = role === 'user';
+  const companion = useCompanion().char;
  return (
    <div className={`flex gap-2 ${mine ? 'flex-row-reverse' : ''}`}>
      {!mine && (
        <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center overflow-hidden rounded-full bg-[#f5f1ff]">
-          <SeyarMascot char="pi" mood="happy" size={32} />
+          <SeyarMascot char={companion} mood="happy" size={32} />
        </span>
      )}
      <div
@@ -242,8 +245,8 @@ function Bubble({ role, children, extra }: { role: 'user' | 'assistant'; childre
 * سرور وصل نیستند.
 */
 const THINKING_STEPS: [number, string][] = [
-  [0, 'پی داره تو کتابت می‌گرده'],
-  [4, 'پی داره حلش می‌کنه'],
+  [0, '{name} داره تو کتابت می‌گرده'],
+  [4, '{name} داره حلش می‌کنه'],
  [15, 'داره قدم‌ها رو مرتب می‌نویسه'],
  [28, 'جوابِ کامل یه کم طول می‌کشه، الان می‌رسه'],
 ];
@@ -255,11 +258,12 @@ function Thinking() {
    const timer = setInterval(() => setSeconds((Date.now() - started) / 1000), 1000);
    return () => clearInterval(timer);
  }, []);
-  const text = [...THINKING_STEPS].reverse().find(([at]) => seconds >= at)![1];
+  const companion = useCompanion();
+  const text = [...THINKING_STEPS].reverse().find(([at]) => seconds >= at)![1].replace('{name}', companion.name);
  return (
    <div className="flex items-center gap-2">
      <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center overflow-hidden rounded-full bg-[#f5f1ff]">
-        <SeyarMascot char="pi" mood="idle" size={32} />
+        <SeyarMascot char={companion.char} mood="idle" size={32} />
      </span>
      <div className="flex items-center gap-2 rounded-2xl border border-line bg-white px-4 py-3 text-xs text-muted" aria-live="polite">
        {text}
--- a/src/screens/CharactersScreen.tsx
+++ b/src/screens/CharactersScreen.tsx
@@ -4,7 +4,8 @@ import { api, type Character } from '@/api';
 import { useAppData } from '@/state/AppData';
 import { useAsync } from '@/lib/useAsync';
 import { SeyarMascot } from '@/mascots/SeyarMascot';
-import { SEYAR_INFO, seyarFromSlug } from '@/mascots/seyar';
+import { seyarFromSlug } from '@/mascots/seyar';
+import { COMPANIONS } from '@/state/companion';
 import { useToast } from '@/components/Toast';
 import { EmptyState, ErrorState, LoadingState, Screen, ScreenHeader, Sep } from '@/components/ui';
 import { friendlyError } from '@/lib/errors';
@@ -54,6 +55,7 @@ export function CharactersScreen() {
          <div className="grid grid-cols-2 gap-3">
            {list.data.map((c) => {
              const seyar = seyarFromSlug(c.slug);
+              const look = seyar ? COMPANIONS[seyar] : null;
              return (
                <button
                  key={c.characterId}
@@ -62,11 +64,12 @@ export function CharactersScreen() {
                  onClick={() => void select(c)}
                  aria-pressed={c.selected}
                  className={`relative flex flex-col items-center gap-2 rounded-3xl border-2 p-4 transition-transform ${
-                    c.selected ? 'border-violet bg-[#F5F1FF]' : c.unlocked ? 'border-line bg-white active:scale-95' : 'border-line bg-[#f4f3fa]'
+                    c.selected ? '' : c.unlocked ? 'border-line bg-white active:scale-95' : 'border-line bg-[#f4f3fa]'
                  }`}
+                  style={c.selected && look ? { borderColor: look.color, backgroundColor: `${look.color}12` } : undefined}
                >
                  {c.selected && (
-                    <span className="absolute left-2 top-2 flex h-5 w-5 items-center justify-center rounded-full bg-violet">
+                    <span className="absolute left-2 top-2 flex h-5 w-5 items-center justify-center rounded-full bg-violet" style={look ? { backgroundColor: look.color } : undefined}>
                      <Check size={11} className="text-white" strokeWidth={3} />
                    </span>
                  )}
@@ -84,15 +87,14 @@ export function CharactersScreen() {
                      <Lock size={16} className="text-[#5a5580]" />
                    </span>
                  )}
-                  <span className="text-sm font-bold text-ink">{c.name}</span>
+                  <span className="text-sm font-bold text-ink">{look ? `${look.symbol} ${c.name}` : c.name}</span>
+                  {look && (
+                    <span className="text-center text-[11px] leading-5 text-body">
+                      <b style={{ color: look.color }}>{look.trait.title}:</b> {look.trait.text}
+                    </span>
+                  )}
                  <span className="text-center text-[10px] leading-5 text-muted">
-                    {!c.unlocked
-                      ? `با ${toFa(c.unlockXp)} امتیاز باز می‌شه`
-                      : c.selected
-                        ? 'همراهِ فعلی'
-                        : seyar
-                          ? SEYAR_INFO[seyar].role
-                          : 'بازشده'}
+                    {!c.unlocked ? `با ${toFa(c.unlockXp)} امتیاز باز می‌شه` : c.selected ? 'همراهِ فعلی' : 'بزن تا همراهت بشه'}
                  </span>
                </button>
              );
--- a/src/screens/InviteScreen.tsx
+++ b/src/screens/InviteScreen.tsx
@@ -35,7 +35,7 @@ export function InviteScreen() {

  return (
    <Screen>
-      <ScreenHeader title="معرفی به دوستان" subtitle="دوستات رو بیار، با هم ریاضی بخونید" color="#5FBF8F" back mascot={{ char: 'delta', mood: 'happy', size: 56 }} />
+      <ScreenHeader title="معرفی به دوستان" subtitle="دوستات رو بیار، با هم ریاضی بخونید" color="#5FBF8F" back mascot={{ mood: 'happy', size: 56 }} />
      <ScreenBody className="flex flex-col gap-4">
        {me.loading ? (
          <LoadingState />
--- a/src/screens/LeaderboardScreen.tsx
+++ b/src/screens/LeaderboardScreen.tsx
@@ -22,7 +22,7 @@ export function LeaderboardScreen() {

  return (
    <Screen>
-      <ScreenHeader title="جدولِ امتیازها" color="#FF7A3D" back mascot={{ char: 'delta', mood: 'excited', size: 56 }}>
+      <ScreenHeader title="جدولِ امتیازها" color="#FF7A3D" back mascot={{ mood: 'excited', size: 56 }}>
        <div className="mt-4 flex gap-1 rounded-2xl bg-white/15 p-1" role="tablist">
          {([['weekly', 'این هفته'], ['all_time', 'همه‌ی زمان‌ها']] as const).map(([p, label]) => (
            <button
@@ -41,7 +41,7 @@ export function LeaderboardScreen() {

      <div className="flex-1 overflow-y-auto px-4 py-4">
        {board.loading ? (
-          <LoadingState char="delta" text="دارم جدول رو میارم…" />
+          <LoadingState text="دارم جدول رو میارم…" />
        ) : board.error ? (
          <ErrorState error={board.error} onRetry={board.reload} />
        ) : entries.length === 0 ? (
--- a/src/screens/LessonScreen.tsx
+++ b/src/screens/LessonScreen.tsx
@@ -1,3 +1,4 @@
+import { useCompanion } from '@/state/companion';
 import { Brain, Play, Zap } from 'lucide-react';
 import { api } from '@/api';
 import { useAppData } from '@/state/AppData';
@@ -15,6 +16,7 @@ import { StepText } from '@/lib/StepText';
 /** معرفیِ درس، پیش از تمرین. */
 export function LessonScreen({ lessonId, nodeId }: { lessonId: number; nodeId?: string }) {
  const { home, companion } = useAppData();
+  const companionName = useCompanion().name;
  const nav = useNav();
  const intro = useAsync(() => api.lesson.intro(lessonId), [lessonId], { key: `lesson-intro:${lessonId}` });
  const ref = findNode(home, nodeId) ?? findNodeOfLesson(home, lessonId);
@@ -50,7 +52,7 @@ export function LessonScreen({ lessonId, nodeId }: { lessonId: number; nodeId?:
        ) : (
          <>
            <div className="flex items-start gap-3">
-              <SeyarMascot char="sigma" mood="idle" size={56} />
+              <SeyarMascot char={companion} mood="idle" size={56} />
              <div className="flex-1 rounded-3xl rounded-tr-sm border border-line bg-white p-4 shadow-sm">
                <StepText text={data.introText} color={color} className="text-[15px] leading-[1.95] text-body" />
                {figs('intro')}
@@ -100,7 +102,7 @@ export function LessonScreen({ lessonId, nodeId }: { lessonId: number; nodeId?:
                onClick={() => nav.push({ name: 'ask', lessonId })}
                className="flex items-center justify-center gap-2 rounded-2xl bg-[#F5F1FF] py-3 text-sm font-bold text-[#7857E0]"
              >
-                <Brain size={16} /> درباره‌ی این درس از پی بپرس
+                <Brain size={16} /> درباره‌ی این درس از {companionName} بپرس
              </button>
            </div>
          </>
--- a/src/screens/LessonsScreen.tsx
+++ b/src/screens/LessonsScreen.tsx
@@ -40,7 +40,7 @@ export function LessonsScreen() {
        subtitle={<>{gradeTitle && <>{gradeTitle}<Sep /></>}اول بخون، بعد آزمونِ جزیره رو بده</>}
        color="#2FB36B"
        exact
-        mascot={{ char: 'sigma', mood: 'happy' }}
+        mascot={{ mood: 'happy' }}
      >
        {home && totalNodes > 0 && (
          <div className="mt-4">
--- a/src/screens/NotificationsScreen.tsx
+++ b/src/screens/NotificationsScreen.tsx
@@ -51,7 +51,7 @@ export function NotificationsScreen() {

  return (
    <Screen>
-      <ScreenHeader title="اعلان‌ها" color="#4C5FD5" back mascot={{ char: 'sigma', mood: 'idle', size: 54 }}>
+      <ScreenHeader title="اعلان‌ها" color="#4C5FD5" back mascot={{ mood: 'idle', size: 54 }}>
        {unread > 0 && (
          <button type="button" onClick={() => void markAll()} className="mt-3 rounded-full bg-white/15 px-3 py-1.5 text-xs font-bold">
            همه خوانده شد
--- a/src/screens/QuizScreen.tsx
+++ b/src/screens/QuizScreen.tsx
@@ -17,7 +17,8 @@ import { toFa } from '@/lib/format';
 import { MathText } from '@/lib/MathText';
 import { sounds } from '@/lib/sound';
 import { useGateHold } from '@/lib/useAsync';
-import { StreakCelebration } from '@/components/StreakFlame';
+import { StreakCelebration, StreakFlame } from '@/components/StreakFlame';
+import { useCompanion } from '@/state/companion';

 type Phase =
  | { kind: 'loading' }
@@ -49,6 +50,7 @@ type PlayQuestion = Question & { lessonId?: string };
 */
 export function QuizScreen({ lessonId, nodeId }: { lessonId?: number; nodeId?: string }) {
  const { home, companion, summary, refreshHome, refreshSummary } = useAppData();
+  const look = useCompanion();
  // زنجیره پیش از این تمرین؛ اگر بعد از ثبت امروز روشن شد، صفحه‌ی «روزِ پیاپی» نشان داده می‌شود.
  const streakBefore = useRef(summary?.streak ?? null);
  const [streakUp, setStreakUp] = useState<{ from: number; to: number } | null>(null);
@@ -137,8 +139,9 @@ export function QuizScreen({ lessonId, nodeId }: { lessonId?: number; nodeId?: s
      setHearts((h) => (h ? { ...h, currentHearts: result.heartsRemaining } : h));
      if (result.correct) {
        setCorrectCount((c) => c + 1);
-        setCombo((c) => c + 1);
-        sounds.correct();
+        setCombo(combo + 1);
+        if (look.char === 'delta' && combo + 1 >= 2) sounds.combo();
+        sounds.correct(look.pitch);
      } else {
        setCombo(0);
        sounds.wrong();
@@ -187,7 +190,13 @@ export function QuizScreen({ lessonId, nodeId }: { lessonId?: number; nodeId?: s
        : await api.lesson.complete(lessonId, payload, completeKey.current);
      setPhase({ kind: 'result', result });
      sounds.finish();
-      if (result.stars >= 2) void import('canvas-confetti').then(({ default: confetti }) => confetti({ particleCount: 90, spread: 70, origin: { y: 0.35 } }));
+      // کاغذرنگی به رنگِ همراه؛ امگا («جشن‌ساز») با هر نمره‌ای جشن می‌گیرد، بقیه از دو ستاره.
+      if (result.stars >= 2 || look.char === 'tedi') {
+        const colors = [look.color, look.light, '#FFD23F', '#ffffff'];
+        void import('canvas-confetti').then(({ default: confetti }) =>
+          confetti({ particleCount: look.char === 'tedi' ? 140 : 90, spread: look.char === 'tedi' ? 100 : 70, origin: { y: 0.35 }, colors }),
+        );
+      }
      void refreshHome();
      void refreshSummary();
      const before = streakBefore.current;
@@ -295,6 +304,7 @@ export function QuizScreen({ lessonId, nodeId }: { lessonId?: number; nodeId?: s
          <div className="h-2.5 flex-1 overflow-hidden rounded-full bg-soft">
            <div className="h-full rounded-full transition-all duration-500" style={{ width: `${((index + (answer ? 1 : 0)) / questions.length) * 100}%`, backgroundColor: color }} />
          </div>
+          <TraitChip char={look.char} color={look.color} correct={correctCount} combo={combo} />
          <span className="flex-shrink-0 text-left text-xs font-bold text-muted">
            {/* «۱/۴» در اپِ ریاضی کسر خوانده می‌شد. */}
            {toFa(index + 1)} از {toFa(questions.length)}
@@ -359,12 +369,22 @@ export function QuizScreen({ lessonId, nodeId }: { lessonId?: number; nodeId?: s

      </div>

+      {answer && !answer.correct && look.char === 'pi' && (
+        <motion.div
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mx-4 mb-2 flex items-start gap-2 rounded-2xl bg-[#F5F1FF] px-3 py-2.5 text-xs font-bold leading-6 text-[#5B3FA0]"
+        >
+          <span className="text-base leading-5">π</span>
+          <span>{PI_TIPS[index % PI_TIPS.length]}</span>
+        </motion.div>
+      )}
      <div className="flex flex-shrink-0 flex-col gap-2.5 border-t border-line bg-white px-4 pb-[max(env(safe-area-inset-bottom),1rem)] pt-3">
        {answer ? (
          <>
            {!answer.correct && (
              <button type="button" onClick={askWhy} className="flex items-center justify-center gap-2 rounded-2xl bg-[#F5F1FF] py-3 text-sm font-bold text-[#7857E0]">
-                <Brain size={16} /> از پی بپرس چرا غلط شد
+                <Brain size={16} /> از {look.name} بپرس چرا غلط شد
              </button>
            )}
            <PrimaryButton color={answer.correct ? '#5FBF8F' : color} onClick={() => void next()}>
@@ -516,6 +536,36 @@ function Result({
 const PRAISE = ['آفرین! درست بود', 'دقیقاً همینه!', 'عالی! خوب فکر کردی', 'درسته! داری راه میفتی'];
 const NUDGE = ['نزدیک بودی! جوابِ درست رو ببین.', 'اشکالی نداره؛ از همین اشتباه یاد می‌گیریم.', 'این یکی سخت بود؛ جوابِ درست سبز شده.'];

+/** «راهنمای مهربون»ِ پی: نکته‌ی عمومیِ کوتاه بعد از جوابِ غلط؛ نه جوابِ سوال، فقط عادتِ خوبِ حل کردن. */
+const PI_TIPS = [
+  'صورتِ سوال رو یه بار دیگه آروم بخون؛ کلمه‌ی «نیست» یا «بیشترین» زیاد جا می‌مونه.',
+  'علامتِ منفی‌ها رو یه بار دیگه چک کن.',
+  'اول داخلِ پرانتز، بعد ضرب و تقسیم، آخرش جمع و تفریق.',
+  'جوابت رو بذار توی سوال؛ اگه درست درنیومد یه جا اشتباه شده.',
+];
+
+/**
+ * ویژگیِ همراه کنارِ نوارِ پیشرفتِ آزمون: سیگما جمعِ جوابای درست (Σ)، دلتا شعله‌ی جوابای پشتِ هم. پی و امگا
+ * ویژگی‌شان جای دیگری است (نکته بعد از غلط، جشنِ پایان)، پس این‌جا چیزی نشان نمی‌دهند.
+ */
+function TraitChip({ char, color, correct, combo }: { char: string; color: string; correct: number; combo: number }) {
+  if (char === 'sigma') {
+    return (
+      <motion.span key={correct} initial={{ scale: 1.4 }} animate={{ scale: 1 }} className="flex-shrink-0 rounded-full px-2 py-0.5 text-xs font-black text-white" style={{ backgroundColor: color }}>
+        Σ {toFa(correct)}
+      </motion.span>
+    );
+  }
+  if (char === 'delta' && combo >= 2) {
+    return (
+      <motion.span key={combo} initial={{ scale: 0.4, rotate: -12 }} animate={{ scale: 1, rotate: 0 }} transition={{ type: 'spring', stiffness: 500, damping: 12 }} className="flex flex-shrink-0 items-center gap-0.5 rounded-full px-2 py-0.5 text-xs font-black text-white" style={{ backgroundColor: color }}>
+        <StreakFlame state="lit" size={11} className="[&_path]:fill-white" /> ×{toFa(combo)}
+      </motion.span>
+    );
+  }
+  return null;
+}
+
 const REASONS: { id: ReportReason; label: string }[] = [
  { id: 'wrong_answer', label: 'جوابِ درست اشتباهه' },
  { id: 'unclear', label: 'صورتِ سوال گنگه' },
--- a/src/screens/ReportScreen.tsx
+++ b/src/screens/ReportScreen.tsx
@@ -7,6 +7,7 @@ import { SeyarMascot } from '@/mascots/SeyarMascot';
 import type { SeyarMood } from '@/mascots/seyar';
 import { ErrorState, LoadingState, Screen, ScreenBody, ScreenHeader } from '@/components/ui';
 import { toFa } from '@/lib/format';
+import { useCompanion } from '@/state/companion';

 /*
 * «گزارشِ والدین». تا ۱۴۰۵-۰۷ والد حسابِ جدا و کدِ دعوت داشت؛ به خواستِ سینیور
@@ -46,7 +47,7 @@ export function ReportScreen() {
        subtitle={`پیشرفتِ ${profile.name || 'دانش‌آموز'} در ۷ روزِ اخیر`}
        color={THIS_WEEK}
        back
-        mascot={{ char: 'sigma', mood: 'happy', size: 56 }}
+        mascot={{ mood: 'happy', size: 56 }}
      />
      <ScreenBody className="flex flex-col gap-4">
        {report.loading ? (
@@ -143,9 +144,10 @@ function verdict(now: ReportTotals, before: ReportTotals, name: string): { mood:

 function Verdict({ now, before, name }: { now: ReportTotals; before: ReportTotals; name: string }) {
  const { mood, text } = verdict(now, before, name);
+  const companion = useCompanion().char;
  return (
    <div className="flex items-center gap-3 rounded-3xl border border-line bg-white p-4">
-      <SeyarMascot char="sigma" mood={mood} size={52} />
+      <SeyarMascot char={companion} mood={mood} size={52} />
      <p className="flex-1 text-sm font-bold leading-7 text-ink">{text}</p>
    </div>
  );
--- a/src/screens/StreakScreen.tsx
+++ b/src/screens/StreakScreen.tsx
@@ -40,10 +40,10 @@ export function StreakScreen() {

  return (
    <Screen>
-      <ScreenHeader title="زنجیره‌ی روزها" subtitle="هر روز حداقل یه درس، زنجیره‌ت رو زنده نگه می‌داره" color="#FF7A3D" back mascot={{ char: 'delta', mood: 'excited', size: 56 }} />
+      <ScreenHeader title="زنجیره‌ی روزها" subtitle="هر روز حداقل یه درس، زنجیره‌ت رو زنده نگه می‌داره" color="#FF7A3D" back mascot={{ mood: 'excited', size: 56 }} />
      <ScreenBody className="flex flex-col gap-4">
        {calendar.loading ? (
-          <LoadingState char="delta" />
+          <LoadingState />
        ) : calendar.error || !calendar.data ? (
          <ErrorState error={calendar.error} onRetry={calendar.reload} />
        ) : (
--- a/src/screens/SubscriptionScreen.tsx
+++ b/src/screens/SubscriptionScreen.tsx
@@ -10,6 +10,7 @@ import { useBackStep } from '@/nav/Navigator';
 import { EmptyState, ErrorState, InlineError, LoadingState, PrimaryButton, Screen, ScreenHeader } from '@/components/ui';
 import { friendlyError } from '@/lib/errors';
 import { formatJalaliDate, formatNumber, formatToman, toFa } from '@/lib/format';
+import { useCompanion } from '@/state/companion';

 function durationLabel(days: number): string {
  if (days === 30 || days === 31) return 'یک‌ماهه';
@@ -42,6 +43,7 @@ export function SubscriptionScreen({ initialView }: { initialView?: View }) {
  const [picked, setPicked] = useState<string | null>(null);
  const [buying, setBuying] = useState<Plan | null>(null);
  const bazaar = inBazaarApp();
+  const look = useCompanion();
  // از فهرست، «برگشت» اول به دو گزینه برمی‌گردد.
  useBackStep(view !== null && !initialView, () => setView(null));

@@ -64,11 +66,11 @@ export function SubscriptionScreen({ initialView }: { initialView?: View }) {
      <div className="flex-1 overflow-y-auto">
        <ScreenHeader
          title={view === 'pack' ? 'بسته‌ی سوال' : view === 'subscription' ? (active ? 'تمدیدِ اشتراک' : 'اشتراکِ تدریسینو') : 'فروشگاه'}
-          subtitle={view === 'pack' ? 'سوالِ بیشتر از پی، بدونِ تاریخِ انقضا' : 'همه‌ی فصل‌ها، قلبِ نامحدود'}
+          subtitle={view === 'pack' ? `سوالِ بیشتر از ${look.name}، بدونِ تاریخِ انقضا` : 'همه‌ی فصل‌ها، قلبِ نامحدود'}
          color="#ED6956"
          exact
          back={view !== null && !initialView ? () => setView(null) : true}
-          mascot={{ char: 'pi', mood: 'excited', size: 60 }}
+          mascot={{ mood: 'excited', size: 60 }}
        />

        <div className="flex flex-col gap-4 px-4 py-5">
@@ -88,7 +90,7 @@ export function SubscriptionScreen({ initialView }: { initialView?: View }) {
                icon={<Sparkles size={26} />}
                tone="#9B7BFF"
                title="بسته‌ی سوال"
-                text="سوالِ بیشتر از پی، هیچ‌وقت تموم نمی‌شه"
+                text={`سوالِ بیشتر از ${look.name}، هیچ‌وقت تموم نمی‌شه`}
                onClick={() => setView('pack')}
              />
            </div>
--- a/src/screens/SupportScreen.tsx
+++ b/src/screens/SupportScreen.tsx
@@ -58,7 +58,7 @@ export function SupportScreen() {

  return (
    <Screen>
-      <ScreenHeader title="پشتیبانی" subtitle="سوال، مشکل یا پیشنهاد داری؟ بنویس." color="#4C5FD5" back mascot={{ char: 'sigma', mood: 'happy', size: 56 }} />
+      <ScreenHeader title="پشتیبانی" subtitle="سوال، مشکل یا پیشنهاد داری؟ بنویس." color="#4C5FD5" back mascot={{ mood: 'happy', size: 56 }} />
      <ScreenBody className="flex flex-col gap-4">
        <div className="flex gap-1 rounded-2xl bg-soft p-1">
          {([['ticket', 'پیام به پشتیبانی', MessageCircle], ['bug', 'گزارشِ خطای اپ', Bug]] as const).map(([id, label, Icon]) => (
--- a/src/state/AppData.tsx
+++ b/src/state/AppData.tsx
@@ -1,6 +1,7 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
 import { api, type Character, type Grade, type HomeResponse, type UserProfile, type UserSummary } from '@/api';
 import { seyarFromSlug, type SeyarChar } from '@/mascots/seyar';
+import { companionStore, useCompanion } from '@/state/companion';

 /**
 * داده‌هایی که چند صفحه با هم لازم دارند: پروفایل، آمار، نقشه، همراهِ انتخابی
@@ -48,7 +49,9 @@ export function AppDataProvider({
  const [summary, setSummary] = useState<UserSummary | null>(prefetch?.summary ?? null);
  const [home, setHome] = useState<HomeResponse | null>(prefetch?.home ?? null);
  const [homeError, setHomeError] = useState<unknown>(null);
-  const [companion, setCompanionChar] = useState<SeyarChar>('sigma');
+  // همراه در companionStore است تا بیرون از AppData (اسپلش، نشان، لودرها) هم خوانده شود.
+  const companion = useCompanion().char;
+  const setCompanionChar = companionStore.set;
  const [unreadCount, setUnreadCount] = useState(0);

  const refreshHome = useCallback(async () => {
@@ -84,10 +87,10 @@ export function AppDataProvider({
    api.characters
      .list()
      .then((list) => {
-        const selected = seyarFromSlug(list.find((c) => c.selected)?.slug);
-        if (selected) setCompanionChar(selected);
+        // بی‌انتخاب یعنی پیش‌فرضِ سرور (سیگما)؛ همراهِ کاربرِ قبلی روی این دستگاه نباید بماند.
+        setCompanionChar(seyarFromSlug(list.find((c) => c.selected)?.slug) ?? 'sigma');
      })
-      .catch(() => {});
+      .catch((err: unknown) => console.warn('companion lookup failed; keeping the stored one', err));
    // فقط بارِ اول؛ prefetch بعد از mount عوض نمی‌شود.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [refreshHome, refreshSummary, refreshUnread]);
--- a/src/state/companion.ts
+++ b/src/state/companion.ts
@@ -0,0 +1,70 @@
+import { useSyncExternalStore } from 'react';
+import { KEYS, store } from '@/lib/storage';
+import { SEYAR_INFO, seyarFromSlug, type SeyarChar } from '@/mascots/seyar';
+
+/**
+ * همراهِ انتخابیِ کاربر، یک جا برای کلِ اپ: نشانِ سرِ خانه، ماسکوتِ سربرگ‌ها و لودرها، نام و چهره‌ی دستیار، و ویژگیِ
+ * کوچکِ هر همراه. پیش‌تر هر صفحه همراهِ خودش را ثابت نوشته بود (فروشگاه و دستیار «پی»، درس‌ها «سیگما»، …) و انتخابِ
+ * کاربر فقط در خانه و درس دیده می‌شد.
+ *
+ * در localStorage هم می‌ماند تا اسپلش و صفحه‌ی ورود پیش از رسیدنِ پاسخِ سرور همان همراه را نشان دهند؛ منبعِ حقیقت
+ * همچنان سرور است (AppData بعد از ورود از /characters می‌خواند و این را به‌روز می‌کند).
+ */
+export interface CompanionLook {
+  char: SeyarChar;
+  name: string;
+  symbol: string;
+  /** رنگِ اصلی (بدنه‌ی ماسکوت) و رنگِ روشن‌ترِ کنارش، برای نشان و ته‌رنگ. */
+  color: string;
+  light: string;
+  /** ویژگیِ این همراه؛ در صفحه‌ی همراه‌ها نوشته شده و در آزمون دیده می‌شود (QuizScreen). */
+  trait: { title: string; text: string };
+  /** گامِ صدای «درست» نسبت به سیگما (نیم‌پرده)؛ هر همراه صدای خودش را دارد. */
+  pitch: number;
+}
+
+export const COMPANIONS: Record<SeyarChar, CompanionLook> = {
+  sigma: {
+    char: 'sigma', name: SEYAR_INFO.sigma.name, symbol: 'Σ', color: '#4C5FD5', light: '#7A8CFF', pitch: 0,
+    trait: { title: 'جمع‌زن', text: 'تو آزمون جوابای درستت رو یکی‌یکی برات جمع می‌زنه.' },
+  },
+  delta: {
+    char: 'delta', name: SEYAR_INFO.delta.name, symbol: 'Δ', color: '#FF7A3D', light: '#FFB25E', pitch: 2,
+    trait: { title: 'شعله‌ی سرعت', text: 'جوابای درستِ پشتِ هم رو آتیشی می‌کنه و تشویقت می‌کنه.' },
+  },
+  pi: {
+    char: 'pi', name: SEYAR_INFO.pi.name, symbol: 'π', color: '#9B7BFF', light: '#C6B3FF', pitch: 4,
+    trait: { title: 'راهنمای مهربون', text: 'وقتی غلط می‌زنی یه نکته‌ی کوچیک می‌گه که دفعه‌ی بعد گیر نکنی.' },
+  },
+  tedi: {
+    char: 'tedi', name: SEYAR_INFO.tedi.name, symbol: 'ω', color: '#E8A400', light: '#FFC63D', pitch: 7,
+    trait: { title: 'جشن‌ساز', text: 'آخرِ هر جزیره، هر نمره‌ای بگیری، برات جشنِ طلایی می‌گیره.' },
+  },
+};
+
+let current: SeyarChar = seyarFromSlug(store.get(KEYS.companion)) ?? 'sigma';
+const listeners = new Set<() => void>();
+
+export const companionStore = {
+  get: () => current,
+  set(char: SeyarChar) {
+    if (char === current) return;
+    current = char;
+    store.set(KEYS.companion, char);
+    listeners.forEach((l) => l());
+  },
+  subscribe(listener: () => void) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  },
+};
+
+export function useCompanion(): CompanionLook {
+  const char = useSyncExternalStore(companionStore.subscribe, companionStore.get, companionStore.get);
+  return COMPANIONS[char];
+}
+
+/** «من سیگمام»، «من پی‌ام». */
+export function iAm(name: string): string {
+  return name.endsWith('ی') ? `${name}‌ام` : `${name}م`;
+}