From e788052f9602f6c4e4f0a9d3db7591ca5db4b1ff Mon Sep 17 00:00:00 2001
From: KevinBigham <tkb1230@gmail.com>
Date: Thu, 30 Apr 2026 13:04:17 -0500
Subject: [PATCH] Sprint 46: Polish coaching tree visuals

Adds visual lineage signals to the existing coaching tree without changing engine data or save state.
---
 .../features/coaching/CoachingTree.test.tsx   | 126 +++++++++++++
 .../src/features/coaching/CoachingTree.tsx    | 169 ++++++++++++------
 .../coaching/coachArchetypeGlyphSvg.test.tsx  |  46 +++++
 .../coaching/coachArchetypeGlyphSvg.tsx       |  95 ++++++++++
 4 files changed, 385 insertions(+), 51 deletions(-)
 create mode 100644 apps/web/src/features/coaching/CoachingTree.test.tsx
 create mode 100644 apps/web/src/features/coaching/coachArchetypeGlyphSvg.test.tsx
 create mode 100644 apps/web/src/features/coaching/coachArchetypeGlyphSvg.tsx

diff --git a/apps/web/src/features/coaching/CoachingTree.test.tsx b/apps/web/src/features/coaching/CoachingTree.test.tsx
new file mode 100644
index 00000000..c000c9df
--- /dev/null
+++ b/apps/web/src/features/coaching/CoachingTree.test.tsx
@@ -0,0 +1,126 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it, vi } from 'vitest';
+import { CoachingTree } from './CoachingTree';
+
+const rootCoach = {
+  id: 'root-hc',
+  name: 'Dana Vale',
+  role: 'HC',
+  archetype: 'strategist',
+  traits: ['calm_clock'],
+  mentorCoachId: 'mentor-direct',
+  disciples: ['disciple-one'],
+  yearsUnderMentor: 4,
+};
+
+const directMentor = {
+  id: 'mentor-direct',
+  name: 'Mika Stone',
+  role: 'HC',
+  archetype: 'defensive_minded',
+  traits: ['red_zone_wall'],
+  mentorCoachId: 'mentor-indirect',
+  disciples: ['root-hc'],
+  yearsUnderMentor: 5,
+};
+
+const indirectMentor = {
+  id: 'mentor-indirect',
+  name: 'Alex North',
+  role: 'HC',
+  archetype: 'disciplinarian',
+  traits: ['accountability'],
+  mentorCoachId: null,
+  disciples: ['mentor-direct'],
+  yearsUnderMentor: 0,
+};
+
+const disciple = {
+  id: 'disciple-one',
+  name: 'River Cross',
+  role: 'OC',
+  archetype: 'offensive_minded',
+  traits: ['motion_packages'],
+  mentorCoachId: 'root-hc',
+  disciples: [],
+  yearsUnderMentor: 2,
+};
+
+const userTeam = {
+  id: 'user',
+  abbr: 'USR',
+  staff: { hc: rootCoach, oc: null, dc: null },
+};
+
+const mockState = {
+  game: {
+    year: 2032,
+    eventLog: [],
+    coachingHistory: [],
+    teams: {
+      user: userTeam,
+      north: { id: 'north', abbr: 'NTH', staff: { hc: directMentor, oc: null, dc: null } },
+      summit: { id: 'summit', abbr: 'SUM', staff: { hc: indirectMentor, oc: null, dc: null } },
+      metro: { id: 'metro', abbr: 'MET', staff: { hc: null, oc: disciple, dc: null } },
+    },
+  },
+  userTeam,
+};
+
+vi.mock('@mfd/engine', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@mfd/engine')>();
+  return {
+    ...actual,
+    buildCoachingLegacy: () => ({
+      treeDepth: 3,
+      headCoachesProduced: 1,
+      coordinatorsPlaced: 1,
+      retiredWithEpilogue: 0,
+      notableProteges: [disciple],
+    }),
+  };
+});
+
+vi.mock('../../app/store/game-store', () => ({
+  useGameStore: (selector: (state: typeof mockState) => unknown) => selector(mockState),
+  selectUserTeam: (state: typeof mockState) => state.userTeam,
+}));
+
+describe('CoachingTree', () => {
+  it('renders archetype glyphs next to each coach card', () => {
+    const markup = renderToStaticMarkup(<CoachingTree />);
+
+    expect(markup.match(/data-coach-archetype-glyph=/g)).toHaveLength(4);
+  });
+
+  it('renders SVG connection lines between linked coaches', () => {
+    const markup = renderToStaticMarkup(<CoachingTree />);
+
+    expect(markup).toContain('data-coaching-tree-connection-lines="true"');
+    expect(markup).toContain('data-coaching-tree-line="true"');
+  });
+
+  it('uses gold stroke for direct mentor relationships', () => {
+    const markup = renderToStaticMarkup(<CoachingTree />);
+
+    expect(markup).toContain('data-line-kind="direct-mentor"');
+    expect(markup).toContain('stroke="var(--mfd-gold)"');
+  });
+
+  it('uses dashed connection lines for indirect relationships', () => {
+    const markup = renderToStaticMarkup(<CoachingTree />);
+
+    expect(markup).toContain('data-line-kind="indirect-mentor"');
+    expect(markup).toContain('stroke-dasharray="5 5"');
+  });
+
+  it('preserves the existing coaching-tree behavior surface', () => {
+    const markup = renderToStaticMarkup(<CoachingTree />);
+
+    expect(markup).toContain('COACHING TREE');
+    expect(markup).toContain('TREE DEPTH');
+    expect(markup).toContain('DANA VALE');
+    expect(markup).toContain('MIKA STONE');
+    expect(markup).toContain('RIVER CROSS');
+  });
+});
diff --git a/apps/web/src/features/coaching/CoachingTree.tsx b/apps/web/src/features/coaching/CoachingTree.tsx
index 4daba76d..6c3cea90 100644
--- a/apps/web/src/features/coaching/CoachingTree.tsx
+++ b/apps/web/src/features/coaching/CoachingTree.tsx
@@ -16,6 +16,7 @@ import {
   screenStackStyle,
   teamThemeVars,
 } from '../shared/pixelUi';
+import { CoachArchetypeGlyphSvg } from './coachArchetypeGlyphSvg';
 
 interface ResolvedCoach {
   coachId: string;
@@ -209,11 +210,14 @@ function CoachCard({
     ? `${labelPrefix} ${entry.roleLabel}: ${entry.name}`
     : `${entry.roleLabel}: ${entry.name}`;
   return (
-    <div style={{ position: 'relative' }}>
+    <div style={{ position: 'relative', zIndex: 1 }}>
       <PixelPanel title={title} accent={accent}>
         <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', paddingBottom: entry.retired ? '18px' : 0 }}>
-          <div style={{ ...monoSm, color: 'var(--mfd-text-dim)' }}>
-            Team: {entry.teamAbbr} | Archetype: {entry.archetype}
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0 }}>
+            <CoachArchetypeGlyphSvg archetype={entry.archetype} label={`${entry.archetype} archetype`} />
+            <div style={{ ...monoSm, color: 'var(--mfd-text-dim)' }}>
+              Team: {entry.teamAbbr} | Archetype: {entry.archetype}
+            </div>
           </div>
           {typeof entry.yearsUnderMentor === 'number' && entry.yearsUnderMentor > 0 ? (
             <div style={{ ...monoSm, color: 'var(--mfd-text-dim)' }}>
@@ -238,6 +242,66 @@ function CoachCard({
   );
 }
 
+function lineWidth(entry: ResolvedCoach): number {
+  const years = entry.yearsUnderMentor ?? 1;
+  return Math.max(1, Math.min(3, 1 + Math.floor(years / 3)));
+}
+
+function CoachingTreeConnectionLines({
+  mentorChain,
+  disciples,
+}: {
+  mentorChain: ResolvedCoach[];
+  disciples: ResolvedCoach[];
+}) {
+  if (mentorChain.length === 0 && disciples.length === 0) return null;
+  return (
+    <svg
+      data-coaching-tree-connection-lines="true"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="none"
+      aria-hidden="true"
+      style={{
+        position: 'absolute',
+        inset: 0,
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+        opacity: 0.78,
+      }}
+    >
+      {mentorChain.map((entry, idx) => {
+        const direct = idx === 0;
+        return (
+          <path
+            key={`mentor-line-${entry.coachId}`}
+            data-coaching-tree-line="true"
+            data-line-kind={direct ? 'direct-mentor' : 'indirect-mentor'}
+            d={direct ? 'M34 34 C42 36 46 45 50 52' : `M22 ${24 + idx * 12} C34 ${28 + idx * 10} 41 ${38 + idx * 4} 50 52`}
+            fill="none"
+            stroke={direct ? 'var(--mfd-gold)' : 'var(--mfd-text-dim)'}
+            strokeWidth={lineWidth(entry)}
+            strokeLinecap="round"
+            strokeDasharray={direct ? undefined : '5 5'}
+          />
+        );
+      })}
+      {disciples.map((entry, idx) => (
+        <path
+          key={`disciple-line-${entry.coachId}`}
+          data-coaching-tree-line="true"
+          data-line-kind="direct-disciple"
+          d={`M50 52 C60 ${44 + idx * 9} 68 ${37 + idx * 10} 78 ${31 + idx * 10}`}
+          fill="none"
+          stroke="var(--mfd-cyan)"
+          strokeWidth={lineWidth(entry)}
+          strokeLinecap="round"
+        />
+      ))}
+    </svg>
+  );
+}
+
 function EmptyState() {
   return (
     <PixelPanel title="NO LINEAGE YET" accent="default">
@@ -350,54 +414,57 @@ export function CoachingTree() {
             <PixelMetricCard label="Notable Proteges" value={legacy.notableProteges.length} accent="default" detail="Top five active branches ranked by titles and tenure" />
           </div>
 
-          <div style={layoutStyle}>
-            {/* Mentor chain upward */}
-            <div style={{ ...columnStyle, flexBasis: '320px' }}>
-              <div style={{ ...pixelSm, color: 'var(--mfd-gold)' }}>MENTOR CHAIN</div>
-              {mentorChain.length === 0 ? (
-                <PixelPanel title="NO MENTOR ON RECORD" accent="default">
-                  <div style={{ ...monoSm, color: 'var(--mfd-text-dim)' }}>
-                    Your head coach has no recorded mentor.
-                  </div>
-                </PixelPanel>
-              ) : (
-                mentorChain.map((entry, idx) => (
-                  <CoachCard
-                    key={entry.coachId}
-                    entry={entry}
-                    accent="cyan"
-                    labelPrefix={`Mentor ${idx + 1}`}
-                  />
-                ))
-              )}
-            </div>
-
-            {/* User head coach centered */}
-            <div style={{ ...columnStyle, flexBasis: '320px' }}>
-              <div style={{ ...pixelSm, color: 'var(--mfd-gold)' }}>YOUR HEAD COACH</div>
-              <CoachCard entry={root} accent="gold" labelPrefix="" />
-              {!hasLineage ? <EmptyState /> : null}
-            </div>
-
-            {/* Disciples fan downward */}
-            <div style={{ ...columnStyle, flexBasis: '320px' }}>
-              <div style={{ ...pixelSm, color: 'var(--mfd-gold)' }}>DISCIPLES</div>
-              {disciples.length === 0 ? (
-                <PixelPanel title="NO DISCIPLES YET" accent="default">
-                  <div style={{ ...monoSm, color: 'var(--mfd-text-dim)' }}>
-                    No coaches have come up under this tree.
-                  </div>
-                </PixelPanel>
-              ) : (
-                disciples.map((entry) => (
-                  <CoachCard
-                    key={entry.coachId}
-                    entry={entry}
-                    accent="cyan"
-                    labelPrefix="Disciple"
-                  />
-                ))
-              )}
+          <div style={{ position: 'relative' }}>
+            <CoachingTreeConnectionLines mentorChain={mentorChain} disciples={disciples} />
+            <div style={layoutStyle}>
+              {/* Mentor chain upward */}
+              <div style={{ ...columnStyle, flexBasis: '320px' }}>
+                <div style={{ ...pixelSm, color: 'var(--mfd-gold)' }}>MENTOR CHAIN</div>
+                {mentorChain.length === 0 ? (
+                  <PixelPanel title="NO MENTOR ON RECORD" accent="default">
+                    <div style={{ ...monoSm, color: 'var(--mfd-text-dim)' }}>
+                      Your head coach has no recorded mentor.
+                    </div>
+                  </PixelPanel>
+                ) : (
+                  mentorChain.map((entry, idx) => (
+                    <CoachCard
+                      key={entry.coachId}
+                      entry={entry}
+                      accent="cyan"
+                      labelPrefix={`Mentor ${idx + 1}`}
+                    />
+                  ))
+                )}
+              </div>
+
+              {/* User head coach centered */}
+              <div style={{ ...columnStyle, flexBasis: '320px' }}>
+                <div style={{ ...pixelSm, color: 'var(--mfd-gold)' }}>YOUR HEAD COACH</div>
+                <CoachCard entry={root} accent="gold" labelPrefix="" />
+                {!hasLineage ? <EmptyState /> : null}
+              </div>
+
+              {/* Disciples fan downward */}
+              <div style={{ ...columnStyle, flexBasis: '320px' }}>
+                <div style={{ ...pixelSm, color: 'var(--mfd-gold)' }}>DISCIPLES</div>
+                {disciples.length === 0 ? (
+                  <PixelPanel title="NO DISCIPLES YET" accent="default">
+                    <div style={{ ...monoSm, color: 'var(--mfd-text-dim)' }}>
+                      No coaches have come up under this tree.
+                    </div>
+                  </PixelPanel>
+                ) : (
+                  disciples.map((entry) => (
+                    <CoachCard
+                      key={entry.coachId}
+                      entry={entry}
+                      accent="cyan"
+                      labelPrefix="Disciple"
+                    />
+                  ))
+                )}
+              </div>
             </div>
           </div>
         </div>
diff --git a/apps/web/src/features/coaching/coachArchetypeGlyphSvg.test.tsx b/apps/web/src/features/coaching/coachArchetypeGlyphSvg.test.tsx
new file mode 100644
index 00000000..dc8661c0
--- /dev/null
+++ b/apps/web/src/features/coaching/coachArchetypeGlyphSvg.test.tsx
@@ -0,0 +1,46 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import { COACH_ARCHETYPE_GLYPHS, CoachArchetypeGlyphSvg } from './coachArchetypeGlyphSvg';
+
+describe('CoachArchetypeGlyphSvg', () => {
+  it('renders the offensive_mind variant with route path data', () => {
+    const markup = renderToStaticMarkup(<CoachArchetypeGlyphSvg archetype="offensive_mind" label="Offense" />);
+
+    expect(markup).toContain('data-coach-archetype-glyph="offensive_mind"');
+    expect(markup).toContain('data-glyph-routes="true"');
+  });
+
+  it('renders all 6 glyph variants without error', () => {
+    for (const archetype of COACH_ARCHETYPE_GLYPHS) {
+      const markup = renderToStaticMarkup(<CoachArchetypeGlyphSvg archetype={archetype} label={archetype} />);
+
+      expect(markup).toContain(`data-coach-archetype-glyph="${archetype}"`);
+    }
+  });
+
+  it('renders a shield for defensive_mind', () => {
+    const markup = renderToStaticMarkup(<CoachArchetypeGlyphSvg archetype="defensive_mind" label="Defense" />);
+
+    expect(markup).toContain('data-glyph-shield="true"');
+  });
+
+  it('renders a handshake for players_coach', () => {
+    const markup = renderToStaticMarkup(<CoachArchetypeGlyphSvg archetype="players_coach" label="Players" />);
+
+    expect(markup).toContain('data-glyph-handshake="true"');
+  });
+
+  it('renders a flame for fire_starter', () => {
+    const markup = renderToStaticMarkup(<CoachArchetypeGlyphSvg archetype="fire_starter" label="Fire" />);
+
+    expect(markup).toContain('data-glyph-flame="true"');
+  });
+
+  it('renders distinct SVG path data across every glyph', () => {
+    const signatures = COACH_ARCHETYPE_GLYPHS.map((archetype) =>
+      renderToStaticMarkup(<CoachArchetypeGlyphSvg archetype={archetype} label={archetype} />).match(/d="[^"]+"/g)?.join('|') ?? '',
+    );
+
+    expect(new Set(signatures)).toHaveLength(COACH_ARCHETYPE_GLYPHS.length);
+  });
+});
diff --git a/apps/web/src/features/coaching/coachArchetypeGlyphSvg.tsx b/apps/web/src/features/coaching/coachArchetypeGlyphSvg.tsx
new file mode 100644
index 00000000..80724444
--- /dev/null
+++ b/apps/web/src/features/coaching/coachArchetypeGlyphSvg.tsx
@@ -0,0 +1,95 @@
+export const COACH_ARCHETYPE_GLYPHS = [
+  'offensive_mind',
+  'defensive_mind',
+  'players_coach',
+  'gm_track',
+  'cerebral',
+  'fire_starter',
+] as const;
+
+export type CoachArchetypeGlyph = typeof COACH_ARCHETYPE_GLYPHS[number];
+
+function normalizeArchetype(archetype: string): CoachArchetypeGlyph {
+  const normalized = archetype.trim().toLowerCase();
+  if (normalized.includes('offensive') || normalized.includes('air') || normalized.includes('west_coast')) return 'offensive_mind';
+  if (normalized.includes('defensive') || normalized.includes('coverage') || normalized.includes('aggressive')) return 'defensive_mind';
+  if (normalized.includes('player') || normalized.includes('motivator')) return 'players_coach';
+  if (normalized.includes('gm') || normalized.includes('front_office')) return 'gm_track';
+  if (normalized.includes('disciplinarian') || normalized.includes('fire')) return 'fire_starter';
+  return 'cerebral';
+}
+
+export function CoachArchetypeGlyphSvg({
+  archetype,
+  label,
+}: {
+  archetype: CoachArchetypeGlyph | string;
+  label: string;
+}) {
+  const glyph = normalizeArchetype(archetype);
+
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      width="24"
+      height="24"
+      role="img"
+      aria-label={label}
+      data-coach-archetype-glyph={glyph}
+      style={{ display: 'block', flexShrink: 0 }}
+    >
+      {glyph === 'offensive_mind' ? (
+        <g data-glyph-routes="true" fill="none" stroke="var(--mfd-gold)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M5 6h22v20H5z" fill="var(--mfd-bg-2)" />
+          <path d="M10 21c5-8 9-8 14-13" />
+          <path d="M10 11l4 4" />
+          <path d="M14 11l-4 4" />
+          <path d="M22 20h4" />
+          <path d="M24 18v4" />
+        </g>
+      ) : null}
+      {glyph === 'defensive_mind' ? (
+        <g data-glyph-shield="true" fill="none" stroke="var(--mfd-cyan)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M16 3l10 5v8c0 7-4 11-10 14-6-3-10-7-10-14V8z" fill="var(--mfd-bg-2)" />
+          <path d="M10 13l12 8" />
+          <path d="M22 13l-12 8" />
+          <path d="M9 10h14" />
+        </g>
+      ) : null}
+      {glyph === 'players_coach' ? (
+        <g data-glyph-handshake="true" fill="none" stroke="var(--mfd-green)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M4 17l6-6 5 5" />
+          <path d="M28 17l-6-6-8 8" />
+          <path d="M12 19l4 4 4-4" />
+          <path d="M8 20l5 5" />
+          <path d="M24 20l-5 5" />
+        </g>
+      ) : null}
+      {glyph === 'gm_track' ? (
+        <g data-glyph-briefcase="true" fill="none" stroke="var(--mfd-gold)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M6 12h20v14H6z" fill="var(--mfd-bg-2)" />
+          <path d="M12 12V8h8v4" />
+          <path d="M6 17h20" />
+          <path d="M12 21h8" />
+          <path d="M12 24h6" />
+        </g>
+      ) : null}
+      {glyph === 'cerebral' ? (
+        <g data-glyph-brain="true" fill="none" stroke="var(--mfd-cyan)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M11 25c-4 0-6-3-6-6 0-2 1-4 3-5-1-5 3-9 8-7 5-2 9 2 8 7 2 1 3 3 3 5 0 3-2 6-6 6" />
+          <path d="M16 7v18" />
+          <path d="M11 12c2 1 3 2 3 4" />
+          <path d="M21 12c-2 1-3 2-3 4" />
+          <path d="M25 5l2-3" stroke="var(--mfd-gold)" />
+          <path d="M28 9l3-1" stroke="var(--mfd-gold)" />
+        </g>
+      ) : null}
+      {glyph === 'fire_starter' ? (
+        <g data-glyph-flame="true" fill="none" stroke="var(--mfd-red)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M16 29c-6 0-10-4-10-10 0-5 4-8 7-11 1 4 4 6 7 8 0-5-2-8-4-12 6 3 10 8 10 15 0 6-4 10-10 10z" fill="var(--mfd-bg-2)" />
+          <path d="M16 25c-3 0-5-2-5-5 0-2 2-4 4-6 0 3 2 4 4 6 1 3 0 5-3 5z" stroke="var(--mfd-gold)" />
+        </g>
+      ) : null}
+    </svg>
+  );
+}