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/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]) => (