Add skill & mission tree dashboard page

[vcarl]

Overview

Add a dashboard page that visualizes player skill progression and mission advancement as an interconnected tree/graph. The visual metaphor is inspired by Path of Exile's passive skill tree — a large, interconnected web of nodes — but the design goal is clarity over complexity. The tree is inherently large (138 skills across 14 categories with prerequisite chains), so the challenge is presenting that scope without overwhelming the player.

Context

The gameserver defines 138 skills across these categories:

• Combat (26): weapons, energy, ballistic, missiles, shields, evasion, etc.
• Support (15): drones, repairs, fleet support
• Trading (11): market, negotiation, smuggling
• Mining (11): extraction, refining, surveying
• Crafting (11): components, assembly, blueprints
• Prestige (10): endgame mastery paths
• Empire (10): faction standing, diplomacy
• Exploration (9): scanning, cartography, navigation
• Engineering (8): ship fitting, power management
• Drones (8): drone operation and combat
• Ships (7): piloting, class specializations
• Navigation (5): jump drives, fuel efficiency
• Salvaging (4): wreck processing, material recovery
• Faction (3): leadership, logistics

Skills have prerequisite chains (e.g., weapons_basic:5 -> weapons_advanced -> weapons_specialization), XP-per-level curves, and bonuses per level.

Design Goals

1. Overview at a glance: Players should quickly see where they are in the tree — what's trained, what's available, what's locked behind prerequisites
2. Navigable depth: Clicking/focusing a node shows detail (current level, XP to next, bonuses, prerequisites)
3. Category clustering: Related skills should be visually grouped (combat cluster, mining cluster, etc.) with clear visual boundaries
4. Progressive disclosure: Start zoomed out showing the full tree shape with category clusters; zoom in to see individual skill nodes and their connections
5. Path highlighting: Show prerequisite chains clearly — if you hover a locked skill, highlight what you need to train first
6. Responsive to player state: Trained skills are visually distinct from available (meetable prereqs) vs locked (unmet prereqs)

Visual States for Nodes

• Trained (has levels): Bright/filled, shows current level
• Available (prereqs met, 0 levels): Outlined/ready, inviting interaction
• Locked (prereqs not met): Dim/muted, shows what's blocking it
• Maxed: Special glow or indicator for fully trained skills

Technical Notes

• Skill data comes from the gameserver API (get_skills command or player info)
• The dashboard already fetches player skills as Record<string, number> in the PlayerInfo interface
• This is a www (Next.js) frontend feature — the dashboard is at www/src/app/dashboard/page.tsx
• Consider a canvas or SVG-based renderer for the graph (DOM nodes at this scale may be sluggish)
• Layout could be computed client-side or pre-computed from the skill prerequisite graph

Non-Goals (for initial version)

• Mission tree integration (skills only first, missions can layer on later)
• Skill training interaction (just visualization for now)
• Mobile optimization (desktop-first is fine)

Inspiration

Path of Exile's skill tree is the visual touchstone, but PoE's tree has ~1300 nodes and is intentionally overwhelming. SpaceMolt's 138 skills are large but manageable. The goal is to evoke that "wow, there's a lot to explore" feeling while remaining navigable and informative. Think PoE's tree if it were designed with a UX budget.

[vcarl]

Implementation Context

Skill Tree Structure

The gameserver defines 138 skills across 14 categories with rich prerequisite chains:

Category	Count	Notes
Combat	26	Deepest chains, most interconnected
Support	15	Leadership, diplomacy, fleet ops
Trading	11	Branching market specializations
Mining	11	Extraction → refining → specialization
Crafting	11	Complex production chains
Prestige	10	Endgame mastery paths
Empire	10	Faction standing, diplomacy
Exploration	9	Scanning, cartography
Engineering	8	Ship fitting, power management
Drones	8	Autonomous combat/mining
Ships	7	Piloting, class specializations
Navigation	5	Jump drives, fuel efficiency
Salvaging	4	Wreck processing
Faction	3	Leadership, logistics

Graph properties:

• 80% of skills have prerequisites (111 of 138)
• Max chain depth: 4 levels (e.g., weapons_basic:5 → weapons_advanced:7 → weapons_specialization → capital_weapons)
• 10+ convergent nodes requiring cross-category mastery (e.g., capital_weapons needs weapons_advanced:7 + capital_ships:5)
• Shape is funnel-and-tree: wide foundations narrowing into deep specializations

Mission System (future layer)

• 292 mission templates, 68% chained via chain_next
• Longest chains are 4 parts with escalating difficulty
• 22+ objective types, 7 mission categories
• Missions integrate with skills (award XP, require skill levels as triggers)
• Per-empire storylines (~23 each) plus 100+ shared missions

What's Already Available

The dashboard (src/app/dashboard/page.tsx) already fetches PlayerInfo which includes:

• skills?: Record<string, number> — player's current skill levels

What's missing for the tree visualization:

• Full skill definitions (names, descriptions, categories, requiredSkills prereqs, xpPerLevel curves, bonusPerLevel)
• The gameserver has all this in data/skills.yaml — need to verify if there's an API endpoint that serves skill definitions to clients, or if one needs to be added

Rendering Approach Considerations

With 138 nodes + ~190 edges, this is a medium-sized graph. Options:

• SVG with predetermined layout — categories placed in fixed positions (like PoE's class regions), skills laid out within each cluster. Most predictable, easiest to make look good. Recommended.
• Canvas with force-directed layout — auto-arranges nodes. More dynamic but harder to control aesthetics and can be jittery.
• HTML/CSS grid per category — simplest but loses the interconnected tree feel, especially for cross-category prereqs.

SVG with predetermined category positions (arranged in a circle or cloud) and force-directed layout within each category cluster would give the best of both worlds.