Character sheet UI: full skills, spells, and inventory

The sheet now shows all 18 skills with computed modifiers (+ expertise),
the spellcasting block (save DC/attack, slots remaining, known spells by
level with effects), and inventory with equipped markers + gold.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: SociableSteve

packages/web/src/screens/CharacterViewer.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { api } from "../api.js";
-import { ABILITIES, ABILITY_NAMES, type CharacterDTO } from "../types.js";
+import { ABILITIES, ABILITY_NAMES, type CharacterDTO, SKILL_ABILITY, SKILLS } from "../types.js";
 import { Shell } from "./Shell.js";
 
 const mod = (score: number) => Math.floor((score - 10) / 2);
@@ -125,16 +125,21 @@ export function CharacterViewer() {
             </ul>
           </div>
           <div>
-            <h3>Skill Proficiencies</h3>
-            {c.skillProficiencies.length === 0 ? (
-              <p className="muted">None</p>
-            ) : (
-              <ul className="taglist">
-                {c.skillProficiencies.map((s) => (
-                  <li key={s}>{titleize(s)}</li>
-                ))}
-              </ul>
-            )}
+            <h3>Skills</h3>
+            <ul className="proflist skills-list">
+              {SKILLS.map((sk) => {
+                const prof = c.skillProficiencies.includes(sk);
+                const exp = (c.expertise ?? []).includes(sk);
+                const total = mod(c.abilities[SKILL_ABILITY[sk]!]!) + (prof ? c.proficiencyBonus * (exp ? 2 : 1) : 0);
+                return (
+                  <li key={sk} className={prof ? "prof" : ""}>
+                    <span className="dot" /> {titleize(sk)}
+                    {exp && <span className="exp-tag">expertise</span>}
+                    <span className="val">{fmt(total)}</span>
+                  </li>
+                );
+              })}
+            </ul>
             <h3 style={{ marginTop: 18 }}>Attack</h3>
             <p className="attack-line">
               {fmt(atk.attackBonus)} to hit · {atk.damageDice}
@@ -143,6 +148,41 @@ export function CharacterViewer() {
           </div>
         </div>
 
+        {c.spellcasting && (
+          <div className="sheet-section">
+            <h3>
+              Spells <span className="muted">· save DC {c.spellcasting.saveDc} · attack {fmt(c.spellcasting.attackBonus)}</span>
+            </h3>
+            <div className="slots">
+              {Object.entries(c.spellcasting.slots).map(([lvl, st]) => (
+                <span key={lvl} className="slot-pip">L{lvl}: {st.max - st.used}/{st.max}</span>
+              ))}
+            </div>
+            <ul className="spell-list">
+              {[...c.spellcasting.known].sort((a, b) => a.level - b.level).map((sp) => (
+                <li key={sp.name}>
+                  <span className="spell-lvl">{sp.level === 0 ? "C" : sp.level}</span>
+                  <span className="spell-name">{sp.name}</span>
+                  <span className="spell-desc">{sp.desc}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {(c.inventory?.length || c.gold != null) && (
+          <div className="sheet-section">
+            <h3>Inventory <span className="muted">· {c.gold ?? 0} gp</span></h3>
+            <ul className="taglist">
+              {(c.inventory ?? []).map((it) => (
+                <li key={it.id} className={it.equipped ? "equipped" : ""}>
+                  {it.name}{it.qty > 1 ? ` ×${it.qty}` : ""}{it.equipped ? " ⚔" : ""}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
         {character.backstory && (
           <div className="sheet-backstory">
             <h3>Back-story</h3>

packages/web/src/styles.css

@@ -305,3 +305,19 @@ textarea { resize: vertical; }
 /* ── Suggestions ─────────────────────────────────────────── */
 .suggestions { display: flex; flex-direction: column; gap: 4px; }
 .suggestions-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
+
+/* ── Expanded sheet: skills, spells, inventory ───────────── */
+.skills-list { columns: 2; column-gap: 24px; }
+.skills-list li { break-inside: avoid; }
+.exp-tag { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 4px; padding: 0 4px; margin-left: 6px; }
+.sheet-section { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 16px; }
+.sheet-section h3 { color: var(--gold); margin: 0 0 10px; }
+.slots { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
+.slot-pip { font-size: 12px; background: var(--panel-2); border: 1px solid var(--gold-dim); border-radius: 6px; padding: 3px 8px; color: var(--gold); }
+.spell-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
+.spell-list li { display: grid; grid-template-columns: 22px 160px 1fr; gap: 10px; align-items: baseline; font-size: 14px; }
+.spell-lvl { text-align: center; background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; color: var(--gold); font-size: 12px; }
+.spell-name { font-weight: 600; }
+.spell-desc { color: var(--muted); font-size: 13px; }
+.taglist li.equipped { border-color: var(--gold-dim); color: var(--ink); }
+@media (max-width: 720px) { .skills-list { columns: 1; } .spell-list li { grid-template-columns: 20px 1fr; } .spell-desc { display: none; } }

packages/web/src/types.ts

@@ -48,6 +48,38 @@ export interface SrdCatalog {
   maxLevel: number;
 }
 
+export const SKILL_ABILITY: Record<string, Ability> = {
+  athletics: "str",
+  acrobatics: "dex", sleightOfHand: "dex", stealth: "dex",
+  arcana: "int", history: "int", investigation: "int", nature: "int", religion: "int",
+  animalHandling: "wis", insight: "wis", medicine: "wis", perception: "wis", survival: "wis",
+  deception: "cha", intimidation: "cha", performance: "cha", persuasion: "cha",
+};
+export const SKILLS: string[] = Object.keys(SKILL_ABILITY);
+
+export interface SpellRef {
+  name: string;
+  level: number;
+  school: string;
+  desc: string;
+}
+export interface Spellcasting {
+  ability: Ability;
+  saveDc: number;
+  attackBonus: number;
+  slots: Record<number, { max: number; used: number }>;
+  known: SpellRef[];
+}
+export interface Item {
+  id: string;
+  name: string;
+  qty: number;
+  type: string;
+  equipped?: boolean;
+  attuned?: boolean;
+  description?: string;
+}
+
 export interface CreatureSheet {
   id: string;
   name: string;
@@ -59,6 +91,10 @@ export interface CreatureSheet {
   speed: number;
   saveProficiencies: Ability[];
   skillProficiencies: string[];
+  expertise: string[];
+  spellcasting?: Spellcasting;
+  inventory?: Item[];
+  gold?: number;
 }
 export interface BuildSuggestion {
   raceId: string;