Team Quest Log

When to use

Reach for TeamQuestLog to give a team a light sense of story over its journey — a name for the quest and milestone beats framed as chapters. It is the E5 (Autonomy + Relatedness) surface of the gamification pack. The narrative is optional and skippable: a blank quest name falls back to the team's literal name, and the chapter timeline degrades quietly when no chapters are authored. It is deliberately lighter than the Gantt / calendar — chapters, not a time axis.

Basic example

import { TeamQuestLog } from "@/components/team-quest-log"

<TeamQuestLog
  team={team}               // { id, name, questName? }
  milestones={milestones}   // host-owned shared spine
  chapters={chapters}       // { id, title, milestoneId, order }
  onQuestNameChange={(name) => saveQuestName(team.id, name)} // "" reverts to team name
  onEvent={(e) => analytics.track(e.type, e)}                // narrative.chapter-viewed
/>

Never forced

The displayed title is questName?.trim() || name. Clearing the field (saving blank) reverts to the literal team name — a first-class skip path, no required-field validation, no nag. On the default name a quiet Name your quest invitation shows (never a blocking prompt).

Beat states

• done — the milestone is complete (check marker).
• current — the first not-done beat by order (the you are here pin).
• upcoming — later not-done beats (hollow marker).

State is derived from milestones and conveyed by icon + color (never color alone). An unresolved milestoneId renders gracefully (as upcoming) and dev-warns — it never crashes.

Compose a lighter version

import { TeamQuestLogRoot, TeamQuestChapters } from "@/components/team-quest-log"

// Timeline-only — the name-editor code never enters this bundle:
<TeamQuestLogRoot team={team} milestones={milestones} chapters={chapters} onEvent={track}>
  <TeamQuestChapters />
</TeamQuestLogRoot>

Notes

• Telemetry. onEvent emits narrative.chapter-viewed once per chapter per mount, when a beat first scrolls into view (IntersectionObserver). Omit onEvent and no observer attaches.
• Imperative handle. A ref exposes focusNameEditor() and scrollToChapter(id) for onboarding / deep-link hosts.
• Team-scoped.Only this team's narrative — no comparison, no other team's data.
• Portable. No next/*, own types.ts slice, no other registry import; only the shadcn input / button primitives + lucide.