UI/UX "Living Codex" 4/n: assistant features + emoji purge

- Replace all emoji icons (~26 instances) with Lucide icons across the app (DashboardPage, SessionSidebar, PlayerBoards, MyCharacterPanel, PlayerViewPage, EncounterTracker, CampaignsPage, HandoutControl, SessionControl, CharacterSheet, EncounterTipCard, ActionGuide) - Expose real 5e race data in wizard (ASI/vision/traits instead of stub desc); add vision field to loadRaces5e return type - Surface subclass descriptions after picking a subclass in the wizard - Add per-class tips, race synergy notes, and ability/skill guidance in wizard - New ActionGuide component: collapsible "What can I do on my turn?" in player view - New SessionPrepCard: AI + fallback session hook generator on assistant page - New NpcGenCard: AI + fallback quick NPC generator with "Add to campaign" action - Inline NPC detail generator (wand button) on each NPC card in NpcsPage - Quest hook generator button in QuestsPage header - Condition tooltips in player party view (useConditionGlossary) - Pass campaign.system through session snapshot so player view is system-aware Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-08 23:29:06 +02:00
parent 235cdecb53
commit 740cf20b93
24 changed files with 1176 additions and 67 deletions
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Link } from '@tanstack/react-router';
-import { ArrowLeft, Shield, Gauge, Footprints, Award } from 'lucide-react';
+import { ArrowLeft, Check, Shield, Gauge, Footprints, Award } from 'lucide-react';
 import type { Character } from '@/lib/schemas';
 import type { AbilityKey, CharacterRulesInput, ProficiencyRank, SystemId } from '@/lib/rules';
 import { getSystem, ABILITY_ABBR } from '@/lib/rules';
@@ -161,7 +161,7 @@ export function CharacterSheet({ character }: { character: Character }) {
          </div>
        </div>
        <div className="flex flex-wrap items-center justify-end gap-2 border-t border-line bg-surface-2 px-5 py-3">
-          {c.kind === 'pc' && <Button size="sm" variant="ghost" onClick={() => void shareWithPlayer()} title="Copy a link the player opens to manage this character">{shared ? 'Link copied ✓' : 'Share with player'}</Button>}
+          {c.kind === 'pc' && <Button size="sm" variant="ghost" onClick={() => void shareWithPlayer()} title="Copy a link the player opens to manage this character">{shared ? <><Check size={12} aria-hidden /> Link copied</> : 'Share with player'}</Button>}
          <Button size="sm" variant="secondary" onClick={() => setLevelUp(true)}>Level up</Button>
          <Button size="sm" variant="ghost" onClick={() => window.print()} title="Print / save as PDF">Print</Button>
        </div>
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from '@tanstack/react-router';
+import { Lightbulb } from 'lucide-react';
 import type { Campaign, Character, SpellEntry } from '@/lib/schemas';
 import { charactersRepo } from '@/lib/db/repositories';
 import {
@@ -12,8 +13,10 @@ import type { RulesetClass } from '@/lib/ruleset/normalize';
 import { createRng } from '@/lib/rng';
 import { newId } from '@/lib/ids';
 import { formatModifier } from '@/lib/format';
+import { getClassTip, raceSynergyNote } from '@/lib/assistant/builder';
 import { Modal } from '@/components/ui/Modal';
 import { Button } from '@/components/ui/Button';
+import { Badge } from '@/components/ui/Codex';
 import { Field, Input, Select } from '@/components/ui/Input';
 import { NumberField } from '@/components/ui/NumberField';
 import { cn } from '@/lib/cn';
@@ -33,16 +36,16 @@ function playstyle(c: RulesetClass): string {

 const TEMPLATES: Record<string, { label: string; hint: string; className: string; ability: AbilityScores }[]> = {
  '5e': [
-    { label: '🛡️ Stalwart Fighter', hint: 'Tough front-liner. Easy to play.', className: 'Fighter', ability: { str: 15, dex: 13, con: 14, int: 8, wis: 12, cha: 10 } },
-    { label: '🔥 Clever Wizard', hint: 'Versatile spellcaster.', className: 'Wizard', ability: { str: 8, dex: 14, con: 13, int: 15, wis: 12, cha: 10 } },
-    { label: '🗡️ Sneaky Rogue', hint: 'Skills + big sneak attacks.', className: 'Rogue', ability: { str: 10, dex: 15, con: 13, int: 12, wis: 14, cha: 8 } },
-    { label: '✨ Helpful Cleric', hint: 'Heals and supports the party.', className: 'Cleric', ability: { str: 14, dex: 10, con: 13, int: 8, wis: 15, cha: 12 } },
+    { label: 'Stalwart Fighter', hint: 'Tough front-liner. Easy to play.', className: 'Fighter', ability: { str: 15, dex: 13, con: 14, int: 8, wis: 12, cha: 10 } },
+    { label: 'Clever Wizard', hint: 'Versatile spellcaster.', className: 'Wizard', ability: { str: 8, dex: 14, con: 13, int: 15, wis: 12, cha: 10 } },
+    { label: 'Sneaky Rogue', hint: 'Skills + big sneak attacks.', className: 'Rogue', ability: { str: 10, dex: 15, con: 13, int: 12, wis: 14, cha: 8 } },
+    { label: 'Helpful Cleric', hint: 'Heals and supports the party.', className: 'Cleric', ability: { str: 14, dex: 10, con: 13, int: 8, wis: 15, cha: 12 } },
  ],
  pf2e: [
-    { label: '🛡️ Stalwart Fighter', hint: 'Best weapon proficiency in the game.', className: 'Fighter', ability: { str: 18, dex: 14, con: 14, int: 10, wis: 12, cha: 10 } },
-    { label: '🔥 Clever Wizard', hint: 'Prepared arcane spellcaster.', className: 'Wizard', ability: { str: 8, dex: 14, con: 12, int: 18, wis: 12, cha: 10 } },
-    { label: '🗡️ Sneaky Rogue', hint: 'Skills, mobility, sneak attack.', className: 'Rogue', ability: { str: 10, dex: 18, con: 12, int: 12, wis: 14, cha: 10 } },
-    { label: '✨ Healing Cleric', hint: 'Divine font of healing.', className: 'Cleric', ability: { str: 12, dex: 10, con: 12, int: 10, wis: 18, cha: 12 } },
+    { label: 'Stalwart Fighter', hint: 'Best weapon proficiency in the game.', className: 'Fighter', ability: { str: 18, dex: 14, con: 14, int: 10, wis: 12, cha: 10 } },
+    { label: 'Clever Wizard', hint: 'Prepared arcane spellcaster.', className: 'Wizard', ability: { str: 8, dex: 14, con: 12, int: 18, wis: 12, cha: 10 } },
+    { label: 'Sneaky Rogue', hint: 'Skills, mobility, sneak attack.', className: 'Rogue', ability: { str: 10, dex: 18, con: 12, int: 12, wis: 14, cha: 10 } },
+    { label: 'Healing Cleric', hint: 'Divine font of healing.', className: 'Cleric', ability: { str: 12, dex: 10, con: 12, int: 10, wis: 18, cha: 12 } },
  ],
 };

@@ -65,10 +68,37 @@ export function CreationWizard({ campaign, onClose }: { campaign: Campaign; onCl
  useEffect(() => {
    let on = true;
    if (system === '5e') {
-      void loadRaces5e().then((rs) => on && setOrigins(rs.map((r) => ({ name: r.name, desc: r.desc, meta: r.asi || r.speed }))));
+      void loadRaces5e().then((rs) => {
+        if (!on) return;
+        const strip = (s: string) => s.replace(/\*{2,3}[^*]+\*{2,3}\s*/g, '').trim();
+        setOrigins(rs.map((r) => {
+          const desc = [r.asi, r.vision, r.traits].filter(Boolean).map(strip).join('\n\n');
+          const speedFt = /(\d+) feet/.exec(r.speed)?.[1];
+          const asiMatches = [...r.asi.matchAll(/(\w+) score (?:each )?increases? by (\d+)/g)];
+          const asiSummary = asiMatches.map(([, ability, n]) => ability && n ? `+${n} ${ability.slice(0, 3).toUpperCase()}` : '').filter(Boolean).join(', ');
+          const meta = [asiSummary, speedFt ? `${speedFt} ft` : ''].filter(Boolean).join(' · ');
+          return { name: r.name, desc, meta };
+        }));
+      });
      void loadBackgrounds5e().then((bs) => on && setBackgrounds(bs.map((b) => ({ name: b.name, desc: b.desc, meta: b.skills }))));
    } else {
-      void loadPf2e('ancestries').then((rs) => on && setOrigins(rs.map((r) => ({ name: String(r.name), desc: String((r.description ?? r.text) ?? ''), ...(typeof r.hp === 'number' ? { hp: r.hp } : {}), ...((r.speed as { land?: number } | undefined)?.land ? { speed: (r.speed as { land: number }).land } : {}) }))));
+      void loadPf2e('ancestries').then((rs) => {
+        if (!on) return;
+        setOrigins(rs.map((r) => {
+          const hp = typeof r.hp === 'number' ? r.hp : undefined;
+          const speed = (r.speed as { land?: number } | undefined)?.land;
+          const attrArr = Array.isArray(r.attribute) ? (r.attribute as string[]).filter((a) => a !== 'Free') : [];
+          const attrSummary = attrArr.map((a) => `+${String(a).slice(0, 3)}`).join('/');
+          const meta = [attrSummary, hp !== undefined ? `${hp} HP` : ''].filter(Boolean).join(' · ');
+          return {
+            name: String(r.name),
+            desc: String((r.summary ?? r.text) ?? ''),
+            ...(hp !== undefined ? { hp } : {}),
+            ...(speed ? { speed } : {}),
+            meta,
+          };
+        }));
+      });
      void loadPf2e('backgrounds').then((bs) => on && setBackgrounds(bs.map((b) => ({ name: String(b.name), desc: String((b.description ?? b.text) ?? '') }))));
    }
    return () => { on = false; };
@@ -285,21 +315,61 @@ export function CreationWizard({ campaign, onClose }: { campaign: Campaign; onCl
            </div>
          </div>

-          {selectedClass && selectedClass.subclasses.length > 0 && (
-            <Field label={system === 'pf2e' ? 'Subclass / focus (optional)' : 'Subclass (optional)'}>
-              <Select value={subclass} onChange={(e) => setSubclass(e.target.value)}>
-                <option value="">— decide later —</option>
-                {selectedClass.subclasses.map((s) => <option key={s.name} value={s.name}>{s.name}</option>)}
-              </Select>
-            </Field>
-          )}
+          {selectedClass && (() => {
+            const tip = getClassTip(system, selectedClass.slug);
+            if (!tip) return null;
+            return (
+              <div className="rounded-lg border border-accent/30 bg-accent/5 p-3 text-sm">
+                <div className="flex items-start gap-2">
+                  <Lightbulb size={15} className="mt-0.5 shrink-0 text-accent" aria-hidden />
+                  <div>
+                    <div className="font-medium text-ink">{selectedClass.name}</div>
+                    <p className="mt-0.5 text-muted">{tip.role}</p>
+                    <div className="mt-1.5 text-xs text-muted">
+                      <span className="font-medium text-ink">Key abilities:</span> {tip.primaryAbilities}
+                    </div>
+                    {tip.beginner && <Badge tone="verdigris" className="mt-1.5">Good for beginners</Badge>}
+                  </div>
+                </div>
+              </div>
+            );
+          })()}
+
+          {selectedClass && selectedClass.subclasses.length > 0 && (() => {
+            const sc = selectedClass.subclasses.find((s) => s.name === subclass);
+            return (
+              <Field label={system === 'pf2e' ? 'Subclass / focus (optional)' : 'Subclass (optional)'}>
+                <Select value={subclass} onChange={(e) => setSubclass(e.target.value)}>
+                  <option value="">— decide later —</option>
+                  {selectedClass.subclasses.map((s) => <option key={s.name} value={s.name}>{s.name}</option>)}
+                </Select>
+                {sc?.desc && (
+                  <p className="mt-1 max-h-28 overflow-y-auto rounded-md border border-line bg-surface-2 p-2 text-xs text-muted">
+                    {sc.desc}
+                  </p>
+                )}
+              </Field>
+            );
+          })()}
        </div>
      )}

      {stepName === 'Origin' && (
-        <div className="grid gap-4 sm:grid-cols-2">
-          <OriginPicker title={system === 'pf2e' ? 'Ancestry' : 'Race'} options={origins} value={ancestry} onPick={setAncestry} />
-          <OriginPicker title="Background" options={backgrounds} value={background} onPick={setBackground} />
+        <div className="space-y-3">
+          <div className="grid gap-4 sm:grid-cols-2">
+            <OriginPicker title={system === 'pf2e' ? 'Ancestry' : 'Race'} options={origins} value={ancestry} onPick={setAncestry} />
+            <OriginPicker title="Background" options={backgrounds} value={background} onPick={setBackground} />
+          </div>
+          {selectedClass && selectedOrigin && (() => {
+            const synergy = raceSynergyNote(selectedOrigin.meta ?? '', selectedClass.keyAbilities);
+            if (!synergy) return null;
+            return (
+              <p className="flex items-center gap-1.5 text-xs text-accent">
+                <Lightbulb size={12} className="shrink-0" aria-hidden />
+                {synergy}
+              </p>
+            );
+          })()}
        </div>
      )}

@@ -312,7 +382,18 @@ export function CreationWizard({ campaign, onClose }: { campaign: Campaign; onCl
          </div>
          {method === 'roll' && <Button size="sm" variant="secondary" className="mb-3" onClick={() => chooseMethod('roll')}>↻ Reroll</Button>}
          {method === 'pointbuy' && <p className={cn('mb-3 text-sm', pointBuyRemaining(pb) < 0 ? 'text-danger' : 'text-muted')}>Points remaining: <span className="font-semibold text-ink">{pointBuyRemaining(pb)}</span> / 27</p>}
-          {selectedClass && selectedClass.keyAbilities.length > 0 && <p className="mb-3 text-xs text-muted">Tip: prioritise <span className="text-ink">{selectedClass.keyAbilities.map((k) => ABILITY_ABBR[k as AbilityKey]).join(' / ')}</span> for a {selectedClass.name}.</p>}
+          {selectedClass && (() => {
+            const tip = getClassTip(system, selectedClass.slug);
+            const text = tip?.abilityTip ?? (selectedClass.keyAbilities.length > 0
+              ? `Prioritise ${selectedClass.keyAbilities.map((k) => ABILITY_ABBR[k as AbilityKey]).join(' / ')} for a ${selectedClass.name}.`
+              : null);
+            return text ? (
+              <p className="mb-3 flex items-start gap-1.5 text-xs text-muted">
+                <Lightbulb size={12} className="mt-0.5 shrink-0 text-accent" aria-hidden />
+                {text}
+              </p>
+            ) : null;
+          })()}
          {usesPool && !poolValid && <p className="mb-2 text-sm text-warning">Assign each value to a different ability.</p>}
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
            {ABILITIES.map((a, i) => {
@@ -339,7 +420,16 @@ export function CreationWizard({ campaign, onClose }: { campaign: Campaign; onCl
      {stepName === 'Skills' && (
        <div>
          <p className="mb-1 text-sm text-muted">Choose <span className="font-semibold text-ink">{Math.min(skillCount, skillOptions.length)}</span> {system === 'pf2e' ? 'Trained' : 'proficient'} {skillCount === 1 ? 'skill' : 'skills'} ({skills.length} selected).</p>
-          <p className="mb-3 text-xs text-muted">{system === 'pf2e' ? 'These start at the Trained proficiency rank; you can raise ranks as you level up.' : 'You gain proficiency in these skills, adding your proficiency bonus to checks.'}</p>
+          <p className="mb-2 text-xs text-muted">{system === 'pf2e' ? 'These start at the Trained proficiency rank; you can raise ranks as you level up.' : 'You gain proficiency in these skills, adding your proficiency bonus to checks.'}</p>
+          {selectedClass && (() => {
+            const tip = getClassTip(system, selectedClass.slug);
+            return tip?.skillSuggestions ? (
+              <p className="mb-3 flex items-center gap-1.5 text-xs text-muted">
+                <Lightbulb size={12} className="shrink-0 text-accent" aria-hidden />
+                {selectedClass.name}s often pick: <span className="ml-1 text-ink">{tip.skillSuggestions}</span>
+              </p>
+            ) : null;
+          })()}
          <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
            {skillOptions.map((key) => {
              const checked = skills.includes(key);