diff --git a/web/e2e/dashboard.spec.ts b/web/e2e/dashboard.spec.ts
index b918723..eb23c24 100644
--- a/web/e2e/dashboard.spec.ts
+++ b/web/e2e/dashboard.spec.ts
@@ -106,8 +106,12 @@ test('shot shape chart renders', async ({ page }) => {
 test('excluding a shot drops it from stats and restores on second click', async ({ page }) => {
   const shotsTile = page.getByTestId('stat-shots').getByTestId('stat-value')
   const before = Number(await shotsTile.innerText())
-  const dot = page.getByTestId('fan-dot').first()
-  // The owner may have excluded shots of their own, so count relative.
+  // The owner may have excluded shots of their own, so count relative
+  // and pick a dot that is not already excluded. nth() keeps the same
+  // dot across re-renders, unlike a :not([data-excluded]) locator.
+  const dots = page.getByTestId('fan-dot')
+  const flags = await dots.evaluateAll((els) => els.map((el) => el.hasAttribute('data-excluded')))
+  const dot = dots.nth(flags.indexOf(false))
   const hollow = page.locator('[data-testid="fan-dot"][data-excluded]')
   const hollowBefore = await hollow.count()
 
@@ -123,6 +127,28 @@ test('excluding a shot drops it from stats and restores on second click', async
   await expect(shotsTile).toHaveText(String(before))
 })
 
+test('session grouping recolours the charts and adds interactive legends', async ({ page }) => {
+  await page.getByTestId('group-by-session').click()
+  await expect(page.getByTestId('group-by-session')).toHaveAttribute('aria-pressed', 'true')
+
+  // Session legends replace or join the club legend.
+  await expect(page.getByTestId('fan-session-legend')).toBeVisible()
+  await expect(page.getByTestId('shape-session-legend')).toBeVisible()
+  expect(await page.getByTestId('fan-dot').count()).toBeGreaterThan(0)
+
+  // Hovering a session date dims every other session's dots.
+  const entries = page.getByTestId('fan-session-legend').locator('.entry')
+  if ((await entries.count()) >= 2) {
+    await entries.first().hover()
+    await expect(page.locator('[data-testid="fan-dot"][opacity="0.12"]').first()).toBeVisible()
+  }
+
+  // Back to club colours restores the club legend.
+  await page.getByTestId('group-by-club').click()
+  await expect(page.getByTestId('fan-legend')).toBeVisible()
+  await expect(page.getByTestId('fan-session-legend')).toHaveCount(0)
+})
+
 test('theme toggle stamps an explicit theme', async ({ page }) => {
   const toggle = page.getByTestId('theme-toggle')
   await toggle.click() // auto -> light
diff --git a/web/src/App.tsx b/web/src/App.tsx
index d8b267c..3148a69 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,4 +1,4 @@
-import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from 'react'
+import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { currentUser } from './api/client'
 import type { Mode } from './theme'
 import { slotColor } from './theme'
@@ -16,8 +16,10 @@ import { TrendCard } from './components/TrendCard'
 import { SessionTrendsCard } from './components/SessionTrendsCard'
 import { ClubTable } from './components/ClubTable'
 import { LoginPanel } from './components/LoginPanel'
+import { SessionLegend } from './components/SessionLegend'
 import { toShotInput } from './api/toShotInput'
 import { calibrateShot, offsetsBySession } from './calibration'
+import { clubGlyph, clubSymbol, sessionSlots } from './sessionGroups'
 import type { ShotInput } from 'golf-shot-viz'
 
 // three.js only loads when someone opens the 3D view.
@@ -76,6 +78,8 @@ function Dashboard({
   const [sessionId, setSessionId] = useState('all')
   const [activeClubs, setActiveClubs] = useState<Set<string> | null>(null)
   const [metric, setMetric] = useState<'carry' | 'total'>('carry')
+  const [grouping, setGrouping] = useState<'club' | 'session'>('club')
+  const [hoverSessionId, setHoverSessionId] = useState<string | null>(null)
   const [viz3DOpen, setViz3DOpen] = useState(false)
 
   // Fixed slot assignment from the full club list (ordered by loft), so
@@ -85,11 +89,17 @@ function Dashboard({
       (a, b) => Number(a.static_loft_deg) - Number(b.static_loft_deg),
     )
     const slots = new Map(ordered.map((c, i) => [ c.id, i ]))
-    const colorOf = (clubId: string | null) =>
-      slotColor(clubId !== null ? (slots.get(clubId) ?? null) : null, mode)
-    return { ordered, colorOf }
+    const slotOf = (clubId: string | null) =>
+      clubId !== null ? (slots.get(clubId) ?? null) : null
+    const colorOf = (clubId: string | null) => slotColor(slotOf(clubId), mode)
+    return { ordered, colorOf, slotOf }
   }, [data.clubs, mode])
 
+  // Session grouping: ramp colours over every session, oldest to
+  // newest, so progression reads as a colour sweep in the charts.
+  const groupBySession = grouping === 'session'
+  const slots = useMemo(() => sessionSlots(data.sessions, mode), [data.sessions, mode])
+
   // The calibration layer: pure math over the raw shots the API served.
   // Nothing is refetched when the toggle flips.
   const shots = useMemo(() => {
@@ -135,6 +145,37 @@ function Dashboard({
     return entries
   }, [enriched, palette, sessionId])
 
+  // Session comparison is one club at a time: mixing Driver and 7 Iron
+  // dots under session colours reads as noise. Switching to By session
+  // narrows to the busiest club; switching back restores the previous
+  // selection unless the user changed clubs in between.
+  const savedClubs = useRef<{ prev: Set<string> | null; auto: Set<string> | null } | null>(null)
+  const changeGrouping = useCallback(
+    (g: 'club' | 'session') => {
+      if (g === grouping) return
+      if (g === 'session') {
+        const busiest = chips.reduce<ClubChip | null>(
+          (a, b) => (a === null || b.count > a.count ? b : a),
+          null,
+        )
+        const auto = busiest && chips.length > 1 ? new Set([busiest.key]) : null
+        savedClubs.current = { prev: activeClubs, auto }
+        if (auto) setActiveClubs(auto)
+      } else if (savedClubs.current) {
+        const { prev, auto } = savedClubs.current
+        const untouched =
+          auto === null ||
+          (activeClubs !== null &&
+            activeClubs.size === auto.size &&
+            [...auto].every((k) => activeClubs.has(k)))
+        if (untouched) setActiveClubs(prev)
+        savedClubs.current = null
+      }
+      setGrouping(g)
+    },
+    [grouping, chips, activeClubs],
+  )
+
   const toggleClub = useCallback(
     (key: string) => {
       setActiveClubs((prev) => {
@@ -168,6 +209,32 @@ function Dashboard({
     [enriched, activeClubs],
   )
 
+  // Sessions present in the current filter, in ramp order, for the
+  // interactive legends under the session-grouped charts.
+  const visibleSlots = useMemo(() => {
+    const ids = new Set(filtered.map((s) => s.training_session_id))
+    return [...slots.values()].filter((s) => ids.has(s.id)).sort((a, b) => a.index - b.index)
+  }, [filtered, slots])
+
+  const clubGlyphs = useMemo(
+    () =>
+      chips
+        .filter((c) => activeClubs === null || activeClubs.has(c.key))
+        .map((c) => ({
+          glyph: clubGlyph(c.key === UNCLASSIFIED_KEY ? null : palette.slotOf(c.key)),
+          label: c.label,
+        })),
+    [chips, activeClubs, palette],
+  )
+
+  // Club symbols matter only when two clubs share a session-coloured
+  // chart; a single club reads best as plain dots.
+  const multiClub = clubGlyphs.length > 1
+  const symbolOf = useCallback(
+    (clubId: string | null) => (multiClub ? clubSymbol(palette.slotOf(clubId)) : 'circle'),
+    [multiClub, palette],
+  )
+
   // Excluded shots stay visible (hollow dots) so they can be restored,
   // but every stat and aggregate chart ignores them.
   const analyzed = useMemo(() => filtered.filter((s) => !s.excluded), [filtered])
@@ -193,6 +260,8 @@ function Dashboard({
         onToggleClub={toggleClub}
         metric={metric}
         onMetricChange={setMetric}
+        grouping={grouping}
+        onGroupingChange={changeGrouping}
         onOpen3D={() => setViz3DOpen(true)}
         calibrated={calibrated}
         onToggleCalibrated={onToggleCalibrated}
@@ -221,7 +290,8 @@ function Dashboard({
         <section className="card" aria-label="Shot dispersion">
           <h2>Dispersion</h2>
           <p className="subtitle">
-            Top-down view from the tee. Dashed ellipses are 1σ per club.
+            Top-down view from the tee. Dashed ellipses are 2σ of full swings per{' '}
+            {groupBySession ? 'session. Hover a dot or a date to isolate a session.' : 'club.'}
             {calibrated && <span data-testid="calibrated-note"> Bay-calibrated view.</span>}
             {excludedCount > 0 && (
               <span className="excluded-note" data-testid="excluded-note">
@@ -229,17 +299,33 @@ function Dashboard({
               </span>
             )}
           </p>
-          <RangeFan shots={filtered} metric={metric} mode={mode} onToggle={onToggleShot} />
-          <div className="fan-legend" data-testid="fan-legend">
-            {chips
-              .filter((c) => activeClubs === null || activeClubs.has(c.key))
-              .map((c) => (
-                <span className="entry" key={c.key}>
-                  <span className="dot" style={{ background: c.color }} />
-                  {c.label}
-                </span>
-              ))}
-          </div>
+          <RangeFan
+            shots={filtered}
+            metric={metric}
+            mode={mode}
+            onToggle={onToggleShot}
+            sessionSlots={groupBySession ? slots : null}
+            hoverSessionId={hoverSessionId}
+          />
+          {groupBySession ? (
+            <SessionLegend
+              slots={visibleSlots}
+              hovered={hoverSessionId}
+              onHover={setHoverSessionId}
+              testId="fan-session-legend"
+            />
+          ) : (
+            <div className="fan-legend" data-testid="fan-legend">
+              {chips
+                .filter((c) => activeClubs === null || activeClubs.has(c.key))
+                .map((c) => (
+                  <span className="entry" key={c.key}>
+                    <span className="dot" style={{ background: c.color }} />
+                    {c.label}
+                  </span>
+                ))}
+            </div>
+          )}
         </section>
         <div className="right-col">
           <section className="card" aria-label="Ball flight">
@@ -258,11 +344,29 @@ function Dashboard({
         <h2>Shot shape</h2>
         <p className="subtitle">
           Face angle vs club path at impact. Click a dot to exclude a mishit from every stat.
+          {groupBySession &&
+            ' Ellipses are 2σ of full swings per session, the dashed trail links session means. Hover a dot or a date to isolate a session.'}
           {calibrated && ' Bay-calibrated view.'}
         </p>
         <div className="shape-chart">
-          <ShotShapeChart shots={filtered} mode={mode} onToggle={onToggleShot} />
+          <ShotShapeChart
+            shots={filtered}
+            mode={mode}
+            onToggle={onToggleShot}
+            sessionSlots={groupBySession ? slots : null}
+            hoverSessionId={hoverSessionId}
+            symbolOf={symbolOf}
+          />
         </div>
+        {groupBySession && (
+          <SessionLegend
+            slots={visibleSlots}
+            hovered={hoverSessionId}
+            onHover={setHoverSessionId}
+            testId="shape-session-legend"
+            extras={clubGlyphs.length > 1 ? clubGlyphs : undefined}
+          />
+        )}
       </section>
       <section className="card table-card" aria-label="Club averages">
         <h2>Club averages</h2>
diff --git a/web/src/components/FilterBar.tsx b/web/src/components/FilterBar.tsx
index 8d9dae6..69214bf 100644
--- a/web/src/components/FilterBar.tsx
+++ b/web/src/components/FilterBar.tsx
@@ -17,6 +17,8 @@ interface Props {
   onToggleClub: (key: string) => void
   metric: 'carry' | 'total'
   onMetricChange: (m: 'carry' | 'total') => void
+  grouping: 'club' | 'session'
+  onGroupingChange: (g: 'club' | 'session') => void
   onOpen3D: () => void
   calibrated: boolean
   onToggleCalibrated: () => void
@@ -81,6 +83,8 @@ export function FilterBar({
   onToggleClub,
   metric,
   onMetricChange,
+  grouping,
+  onGroupingChange,
   onOpen3D,
   calibrated,
   onToggleCalibrated,
@@ -128,6 +132,19 @@ export function FilterBar({
         </button>
       </div>
 
+      <div className="segmented" role="group" aria-label="Colour dots by" title="Colour dots by club or by session date">
+        <button data-testid="group-by-club" aria-pressed={grouping === 'club'} onClick={() => onGroupingChange('club')}>
+          By club
+        </button>
+        <button
+          data-testid="group-by-session"
+          aria-pressed={grouping === 'session'}
+          onClick={() => onGroupingChange('session')}
+        >
+          By session
+        </button>
+      </div>
+
       <button
         className="ghost-btn"
         data-testid="calibration-toggle"
diff --git a/web/src/components/RangeFan.tsx b/web/src/components/RangeFan.tsx
index 5389483..8ddf156 100644
--- a/web/src/components/RangeFan.tsx
+++ b/web/src/components/RangeFan.tsx
@@ -2,11 +2,17 @@ import { useMemo, useState } from 'react'
 import type { Shot } from '../api/types'
 import type { Mode } from '../theme'
 import { hexToRgba, INK } from '../theme'
+import type { SessionSlot } from '../sessionGroups'
+import { covEllipse, ellipsePoints, fullSwings, GROUP_MIN } from '../sessionGroups'
 
 // Top-down driving range view. Equal metres-per-pixel on both axes, so
 // the distance arcs are true circles around the tee. SVG rather than a
 // chart library: the fan geometry (arcs, tee, sigma ellipses) is easier
 // to own directly.
+//
+// With session grouping on, dots and ellipses take the session ramp
+// colour, ellipses split per session-club group, and hovering a dot or
+// a legend entry dims every other session.
 
 export interface FanShot extends Shot {
   color: string
@@ -18,6 +24,9 @@ interface Props {
   metric: 'carry' | 'total'
   mode: Mode
   onToggle: (id: string, excluded: boolean) => void
+  /** Session ramp slots; null renders the classic by-club view */
+  sessionSlots: Map<string, SessionSlot> | null
+  hoverSessionId: string | null
 }
 
 const W = 480
@@ -45,10 +54,18 @@ function sideLabel(v: number): string {
 
 const kmh = (mps: number) => Math.round(mps * 3.6)
 
-export function RangeFan({ shots, metric, mode, onToggle }: Props) {
+export function RangeFan({ shots, metric, mode, onToggle, sessionSlots, hoverSessionId }: Props) {
   const ink = INK[mode]
   const [hover, setHover] = useState<Hover | null>(null)
 
+  // Session to isolate: the legend hover wins, then a hovered dot's own
+  // session. Only meaningful with session grouping on.
+  const hlSession = sessionSlots
+    ? (hoverSessionId ?? hover?.shot.training_session_id ?? null)
+    : null
+  const colorOf = (s: FanShot) =>
+    sessionSlots ? (sessionSlots.get(s.training_session_id)?.color ?? s.color) : s.color
+
   const plotted = useMemo(
     () => shots.filter((s) => dist(s, metric) !== null && side(s, metric) !== null),
     [shots, metric],
@@ -63,28 +80,35 @@ export function RangeFan({ shots, metric, mode, onToggle }: Props) {
     return { maxDist, scale, tee, toXY }
   }, [plotted, metric])
 
-  // Per-club 1-sigma dispersion ellipses (5+ shots). Unclassified
+  // 1-sigma dispersion ellipses (GROUP_MIN+ shots): per club, or per
+  // session-club group when session grouping is on. Unclassified
   // strokes (chips, mishits) get dots but no ellipse: they are not one
   // club, so their sigma is meaningless and the ellipse dwarfs the fan.
   const ellipses = useMemo(() => {
-    const byClub = new Map<string, FanShot[]>()
+    const groups = new Map<string, FanShot[]>()
     for (const s of plotted) {
       if (!s.club || s.excluded) continue
-      byClub.set(s.club.id, [ ...(byClub.get(s.club.id) ?? []), s ])
+      const key = sessionSlots ? `${s.training_session_id}:${s.club.id}` : s.club.id
+      groups.set(key, [ ...(groups.get(key) ?? []), s ])
     }
-    return [ ...byClub.values() ]
-      .filter((group) => group.length >= 5)
-      .map((group) => {
-        const xs = group.map((s) => side(s, metric)!)
-        const ys = group.map((s) => dist(s, metric)!)
-        const mean = (v: number[]) => v.reduce((a, b) => a + b, 0) / v.length
-        const sd = (v: number[], m: number) =>
-          Math.sqrt(v.reduce((a, b) => a + (b - m) ** 2, 0) / (v.length - 1))
-        const mx = mean(xs)
-        const my = mean(ys)
-        return { mx, my, sx: sd(xs, mx), sy: sd(ys, my), color: group[0].color }
-      })
-  }, [plotted, metric])
+    return [ ...groups.values() ]
+      // Fit on full swings only: drills and chips keep their dots but
+      // would smear the ellipse across half the range.
+      .map((group) => fullSwings(group, (s) => dist(s, metric)))
+      .filter((group) => group.length >= GROUP_MIN)
+      .map((group) => ({
+        ellipse: covEllipse(
+          group.map((s) => side(s, metric)!),
+          group.map((s) => dist(s, metric)!),
+          2,
+          2,
+        ),
+        color: sessionSlots
+          ? (sessionSlots.get(group[0].training_session_id)?.color ?? group[0].color)
+          : group[0].color,
+        sessionId: sessionSlots ? group[0].training_session_id : null,
+      }))
+  }, [plotted, metric, sessionSlots])
 
   const arcs = []
   for (let d = 25; d <= geo.maxDist; d += 25) arcs.push(d)
@@ -111,19 +135,24 @@ export function RangeFan({ shots, metric, mode, onToggle }: Props) {
             strokeWidth={1}
             strokeDasharray="3 5"
           />
-          {ellipses.map((e, i) => (
-            <ellipse
-              key={i}
-              cx={geo.tee.x + e.mx * geo.scale}
-              cy={geo.tee.y - e.my * geo.scale}
-              rx={Math.max(e.sx * geo.scale, 4)}
-              ry={Math.max(e.sy * geo.scale, 4)}
-              fill={hexToRgba(e.color, 0.09)}
-              stroke={hexToRgba(e.color, 0.55)}
-              strokeWidth={1}
-              strokeDasharray="4 4"
-            />
-          ))}
+          {ellipses.map((e, i) => {
+            const dim = hlSession !== null && e.sessionId !== hlSession
+            const focus = hlSession !== null && e.sessionId === hlSession
+            const points = ellipsePoints(e.ellipse)
+              .map(([x, y]) => `${(geo.tee.x + x * geo.scale).toFixed(1)},${(geo.tee.y - y * geo.scale).toFixed(1)}`)
+              .join(' ')
+            return (
+              <polygon
+                key={i}
+                points={points}
+                fill={hexToRgba(e.color, dim ? 0.02 : focus ? 0.13 : 0.09)}
+                stroke={hexToRgba(e.color, dim ? 0.12 : focus ? 0.85 : 0.55)}
+                strokeWidth={focus ? 1.8 : 1}
+                strokeDasharray="4 4"
+                strokeLinejoin="round"
+              />
+            )
+          })}
         </g>
 
         {arcs.map((d) => (
@@ -150,6 +179,8 @@ export function RangeFan({ shots, metric, mode, onToggle }: Props) {
         {plotted.map((s) => {
           const p = geo.toXY(s)
           const active = hover?.shot.id === s.id
+          const dim = hlSession !== null && s.training_session_id !== hlSession
+          const fill = colorOf(s)
           return (
             <circle
               key={s.id}
@@ -160,10 +191,10 @@ export function RangeFan({ shots, metric, mode, onToggle }: Props) {
               cx={p.x}
               cy={p.y}
               r={active ? 6.5 : 4.4}
-              fill={s.excluded ? ink.surface : s.color}
-              stroke={s.excluded ? s.color : ink.surface}
+              fill={s.excluded ? ink.surface : fill}
+              stroke={s.excluded ? fill : ink.surface}
               strokeWidth={1.4}
-              opacity={s.excluded ? 0.55 : 1}
+              opacity={dim ? 0.12 : s.excluded ? 0.55 : 1}
               onMouseEnter={() => setHover({ shot: s, x: p.x, y: p.y })}
               onMouseLeave={() => setHover(null)}
               onClick={() => onToggle(s.id, !s.excluded)}
@@ -179,8 +210,11 @@ export function RangeFan({ shots, metric, mode, onToggle }: Props) {
           style={{ left: `${(hover.x / W) * 100}%`, top: `${(hover.y / H) * 100}%` }}
         >
           <div className="head">
-            <span className="dot" style={{ background: hover.shot.color }} />
+            <span className="dot" style={{ background: colorOf(hover.shot) }} />
             {hover.shot.clubLabel}
+            {sessionSlots?.get(hover.shot.training_session_id) && (
+              <> · {sessionSlots.get(hover.shot.training_session_id)!.label}</>
+            )}
             {hover.shot.excluded && <span className="flag"> excluded</span>}
           </div>
           {hover.shot.carry !== null && (
diff --git a/web/src/components/SessionLegend.tsx b/web/src/components/SessionLegend.tsx
new file mode 100644
index 0000000..be32dc0
--- /dev/null
+++ b/web/src/components/SessionLegend.tsx
@@ -0,0 +1,38 @@
+import type { SessionSlot } from '../sessionGroups'
+
+// Legend for session-grouped charts. Hovering an entry highlights that
+// session in every chart that takes hoverSessionId.
+
+interface Props {
+  slots: SessionSlot[]
+  hovered: string | null
+  onHover: (id: string | null) => void
+  testId: string
+  /** Club symbol key, e.g. "▲ Driver", appended after the sessions */
+  extras?: { glyph: string; label: string }[]
+}
+
+export function SessionLegend({ slots, hovered, onHover, testId, extras }: Props) {
+  return (
+    <div className="fan-legend session-legend" data-testid={testId}>
+      {slots.map((s) => (
+        <span
+          className={`entry${hovered && hovered !== s.id ? ' dim' : ''}`}
+          key={s.id}
+          title={s.title}
+          onMouseEnter={() => onHover(s.id)}
+          onMouseLeave={() => onHover(null)}
+        >
+          <span className="dot" style={{ background: s.color }} />
+          {s.label}
+        </span>
+      ))}
+      {extras?.map((e) => (
+        <span className="entry glyph-entry" key={e.label}>
+          <span className="glyph">{e.glyph}</span>
+          {e.label}
+        </span>
+      ))}
+    </div>
+  )
+}
diff --git a/web/src/components/ShotShapeChart.tsx b/web/src/components/ShotShapeChart.tsx
index 3349703..8d826a2 100644
--- a/web/src/components/ShotShapeChart.tsx
+++ b/web/src/components/ShotShapeChart.tsx
@@ -1,7 +1,10 @@
 import { useMemo } from 'react'
 import type { EChartsCoreOption } from 'echarts/core'
+import type { CustomSeriesRenderItemAPI, CustomSeriesRenderItemParams } from 'echarts'
 import type { Mode } from '../theme'
 import { hexToRgba, INK } from '../theme'
+import type { CovEllipse, SessionSlot } from '../sessionGroups'
+import { covEllipse, ellipsePoints, fullSwings, GROUP_MIN } from '../sessionGroups'
 import type { FanShot } from './RangeFan'
 import type { ChartClick } from './EChart'
 import { EChart } from './EChart'
@@ -10,11 +13,20 @@ import { EChart } from './EChart'
 // The dashed diagonal is face = path (zero side spin). Above it the
 // face is open to the path (fade side spin), below it closed (draw).
 // Clicking a dot flags the shot out of analysis.
+//
+// With session grouping on, dots take the session ramp colour and the
+// club moves to the symbol. Each session-club group of GROUP_MIN+
+// shots draws a 1-sigma ellipse, session means chain into a trail, and
+// hovering a dot or a legend entry isolates that session.
 
 interface Props {
   shots: FanShot[]
   mode: Mode
   onToggle: (id: string, excluded: boolean) => void
+  /** Session ramp slots; null renders the classic by-club view */
+  sessionSlots: Map<string, SessionSlot> | null
+  hoverSessionId: string | null
+  symbolOf: (clubId: string | null) => string
 }
 
 interface DotDatum {
@@ -26,9 +38,23 @@ interface DotDatum {
   faceToPath: number | null
   carry: number | null
   side: number | null
+  dateLabel?: string
 }
 
-export function ShotShapeChart({ shots, mode, onToggle }: Props) {
+interface EllipseSpec {
+  ellipse: CovEllipse
+  color: string
+  dim: boolean
+}
+
+export function ShotShapeChart({
+  shots,
+  mode,
+  onToggle,
+  sessionSlots,
+  hoverSessionId,
+  symbolOf,
+}: Props) {
   const ink = INK[mode]
 
   const option = useMemo<EChartsCoreOption>(() => {
@@ -39,16 +65,43 @@ export function ShotShapeChart({ shots, mode, onToggle }: Props) {
     )
     const r = Math.ceil(extent / 5) * 5
 
-    const data: DotDatum[] = plotted.map((s) => ({
+    const dotStyle = (s: FanShot, color: string, dimmed: boolean) =>
+      s.excluded
+        ? { color: ink.surface, borderColor: ink.muted, borderWidth: 1.4, opacity: dimmed ? 0.15 : 0.6 }
+        : {
+            color: hexToRgba(color, dimmed ? 0.1 : 0.85),
+            borderColor: ink.surface,
+            borderWidth: 1,
+            opacity: dimmed ? 0.25 : 1,
+          }
+
+    const toDatum = (s: FanShot, color: string, dateLabel?: string): DotDatum => ({
       value: [s.club_path!, s.face_angle!],
       shotId: s.id,
       excluded: s.excluded,
       label: s.clubLabel,
-      color: s.color,
+      color,
       faceToPath: s.face_to_path,
       carry: s.carry,
       side: s.total_side,
-    }))
+      dateLabel,
+    })
+
+    const dotTooltip = {
+      formatter: (p: { data: DotDatum }) => {
+        const d = p.data
+        const head = d.dateLabel ? `${d.label} · ${d.dateLabel}` : d.label
+        const rows = [
+          `<b style="color:${ink.text}">${head}</b>${d.excluded ? ' (excluded)' : ''}`,
+          `face ${d.value[1].toFixed(1)}°, path ${d.value[0].toFixed(1)}°`,
+          d.faceToPath !== null ? `face to path ${d.faceToPath.toFixed(1)}°` : null,
+          d.carry !== null ? `carry ${d.carry.toFixed(0)} m` : null,
+          d.side !== null ? `side ${Math.abs(d.side).toFixed(1)} m ${d.side < 0 ? 'L' : 'R'}` : null,
+          `<i>click to ${d.excluded ? 'restore' : 'exclude'}</i>`,
+        ]
+        return rows.filter(Boolean).join('<br/>')
+      },
+    }
 
     const axis = (name: string) => ({
       type: 'value' as const,
@@ -63,6 +116,145 @@ export function ShotShapeChart({ shots, mode, onToggle }: Props) {
       splitLine: { lineStyle: { color: ink.grid } },
     })
 
+    const markLine = {
+      silent: true,
+      symbol: 'none',
+      animation: false,
+      label: { show: false },
+      data: [
+        { xAxis: 0, lineStyle: { color: ink.axis, type: 'solid' as const, width: 1 } },
+        { yAxis: 0, lineStyle: { color: ink.axis, type: 'solid' as const, width: 1 } },
+        [
+          { coord: [-r, -r], lineStyle: { color: ink.muted, type: 'dashed' as const, width: 1 } },
+          { coord: [r, r] },
+        ],
+      ],
+    }
+
+    let series: object[]
+
+    if (!sessionSlots) {
+      series = [
+        {
+          type: 'scatter',
+          symbolSize: 9.5,
+          cursor: 'pointer',
+          data: plotted.map((s) => ({
+            ...toDatum(s, s.color),
+            itemStyle: dotStyle(s, s.color, false),
+          })),
+          tooltip: dotTooltip,
+          markLine,
+          z: 2,
+        },
+      ]
+    } else {
+      // One scatter series per session so ECharts' own focus blur
+      // isolates a session on dot hover. Legend hover arrives as
+      // hoverSessionId and bakes the same dimming into the styles.
+      const bySession = new Map<string, FanShot[]>()
+      for (const s of plotted) {
+        bySession.set(s.training_session_id, [...(bySession.get(s.training_session_id) ?? []), s])
+      }
+      const groups = [...bySession.entries()]
+        .map(([id, list]) => ({ slot: sessionSlots.get(id), list }))
+        .filter((g): g is { slot: SessionSlot; list: FanShot[] } => g.slot !== undefined)
+        .sort((a, b) => a.slot.index - b.slot.index)
+
+      const dimmed = (id: string) => hoverSessionId !== null && hoverSessionId !== id
+
+      const scatterSeries = groups.map((g) => ({
+        type: 'scatter' as const,
+        symbolSize: 9,
+        cursor: 'pointer',
+        emphasis: { focus: 'series' as const, blurScope: 'coordinateSystem' as const },
+        blur: { itemStyle: { opacity: 0.1 } },
+        data: g.list.map((s) => ({
+          ...toDatum(s, g.slot.color, g.slot.label),
+          symbol: symbolOf(s.club?.id ?? null),
+          itemStyle: dotStyle(s, g.slot.color, dimmed(g.slot.id)),
+        })),
+        tooltip: dotTooltip,
+        z: 2,
+      }))
+
+      // 1-sigma ellipse per session-club group, plus a session-mean
+      // trail per club so drift over time reads as a path.
+      const ellipses: EllipseSpec[] = []
+      const trails = new Map<string, { value: [number, number]; itemStyle: { color: string } }[]>()
+      for (const g of groups) {
+        const byClub = new Map<string, FanShot[]>()
+        for (const s of g.list) {
+          if (!s.club || s.excluded) continue
+          byClub.set(s.club.id, [...(byClub.get(s.club.id) ?? []), s])
+        }
+        for (const [clubId, list] of byClub) {
+          // Impact geometry differs between drills and full swings, so
+          // the ellipse and trail fit full swings only.
+          const kept = fullSwings(list, (s) => s.carry)
+          if (kept.length < GROUP_MIN) continue
+          const e = covEllipse(
+            kept.map((s) => s.club_path!),
+            kept.map((s) => s.face_angle!),
+            2,
+            0.3,
+          )
+          ellipses.push({ ellipse: e, color: g.slot.color, dim: dimmed(g.slot.id) })
+          trails.set(clubId, [
+            ...(trails.get(clubId) ?? []),
+            { value: [e.cx, e.cy], itemStyle: { color: g.slot.color } },
+          ])
+        }
+      }
+
+      const ellipseSeries = {
+        type: 'custom' as const,
+        silent: true,
+        // A rotated data-space ellipse maps through the unequal axis
+        // scales as a polygon of its outline points.
+        renderItem: (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI) => {
+          const e = ellipses[params.dataIndex]
+          const points = ellipsePoints(e.ellipse).map((p) => api.coord(p))
+          return {
+            type: 'polygon' as const,
+            shape: { points },
+            style: {
+              fill: hexToRgba(e.color, e.dim ? 0.02 : 0.07),
+              stroke: hexToRgba(e.color, e.dim ? 0.12 : 0.5),
+              lineWidth: hoverSessionId !== null && !e.dim ? 1.8 : 1,
+              lineDash: [4, 4],
+            },
+          }
+        },
+        blur: { style: { opacity: 0.3 } },
+        data: ellipses.map((e) => [e.ellipse.cx, e.ellipse.cy]),
+        z: 1,
+      }
+
+      const trailSeries = [...trails.values()]
+        .filter((points) => points.length >= 2)
+        .map((points) => ({
+          type: 'line' as const,
+          silent: true,
+          data: points,
+          lineStyle: {
+            color: ink.muted,
+            width: 1,
+            type: 'dashed' as const,
+            opacity: hoverSessionId !== null ? 0.15 : 0.6,
+          },
+          symbol: 'circle',
+          symbolSize: 6,
+          blur: { lineStyle: { opacity: 0.15 } },
+          z: 3,
+        }))
+
+      // markLine rides on the first scatter series; keep it even when a
+      // session filter leaves a single group.
+      if (scatterSeries.length) Object.assign(scatterSeries[0], { markLine })
+      series = [ellipseSeries, ...trailSeries, ...scatterSeries]
+    }
+
     return {
       animation: false,
       grid: { left: 58, right: 20, top: 18, bottom: 46 },
@@ -90,50 +282,9 @@ export function ShotShapeChart({ shots, mode, onToggle }: Props) {
           silent: true,
         },
       ],
-      series: [
-        {
-          type: 'scatter',
-          symbolSize: 9.5,
-          cursor: 'pointer',
-          data: data.map((d) => ({
-            ...d,
-            itemStyle: d.excluded
-              ? { color: ink.surface, borderColor: ink.muted, borderWidth: 1.4, opacity: 0.6 }
-              : { color: hexToRgba(d.color, 0.85), borderColor: ink.surface, borderWidth: 1 },
-          })),
-          tooltip: {
-            formatter: (p: { data: DotDatum }) => {
-              const d = p.data
-              const rows = [
-                `<b style="color:${ink.text}">${d.label}</b>${d.excluded ? ' (excluded)' : ''}`,
-                `face ${d.value[1].toFixed(1)}°, path ${d.value[0].toFixed(1)}°`,
-                d.faceToPath !== null ? `face to path ${d.faceToPath.toFixed(1)}°` : null,
-                d.carry !== null ? `carry ${d.carry.toFixed(0)} m` : null,
-                d.side !== null ? `side ${Math.abs(d.side).toFixed(1)} m ${d.side < 0 ? 'L' : 'R'}` : null,
-                `<i>click to ${d.excluded ? 'restore' : 'exclude'}</i>`,
-              ]
-              return rows.filter(Boolean).join('<br/>')
-            },
-          },
-          markLine: {
-            silent: true,
-            symbol: 'none',
-            animation: false,
-            label: { show: false },
-            data: [
-              { xAxis: 0, lineStyle: { color: ink.axis, type: 'solid', width: 1 } },
-              { yAxis: 0, lineStyle: { color: ink.axis, type: 'solid', width: 1 } },
-              [
-                { coord: [-r, -r], lineStyle: { color: ink.muted, type: 'dashed', width: 1 } },
-                { coord: [r, r] },
-              ],
-            ],
-          },
-          z: 2,
-        },
-      ],
+      series,
     }
-  }, [shots, ink])
+  }, [shots, ink, sessionSlots, hoverSessionId, symbolOf])
 
   const onClick = (params: ChartClick) => {
     const d = params.data as DotDatum | undefined
diff --git a/web/src/components/TrendCard.tsx b/web/src/components/TrendCard.tsx
index b950c62..5434d68 100644
--- a/web/src/components/TrendCard.tsx
+++ b/web/src/components/TrendCard.tsx
@@ -312,8 +312,10 @@ export function TrendCard({ shots, sessions, selectedSessionId, mode, onToggle }
       ]
     })
 
-    // Flat dashed segment per session at that session's mean, so each
-    // session reads as one step against the rolling line.
+    // Flat dashed segment per session at that session's mean, with a
+    // faint mean ± 1σ box behind it, so each session reads as one step
+    // against the rolling line and the spread change is visible at a
+    // glance.
     const sessionAvgSeries = clubs.map((c) => {
       const bySession = new Map<string, SeqShot[]>()
       for (const p of c.points) {
@@ -323,11 +325,18 @@ export function TrendCard({ shots, sessions, selectedSessionId, mode, onToggle }
         bySession.set(p.shot.training_session_id, list)
       }
       const data: (number[] | null)[] = []
+      const sigmaBoxes: [{ xAxis: number; yAxis: number }, { xAxis: number; yAxis: number }][] = []
       for (const points of bySession.values()) {
         if (points.length < MIN_SAMPLES) continue
-        const { mean } = meanSd(points.map((q) => q.v))
+        const { mean, sd } = meanSd(points.map((q) => q.v))
         const xs = points.map((q) => q.x)
-        data.push([Math.min(...xs) - 0.5, mean], [Math.max(...xs) + 0.5, mean], null)
+        const from = Math.min(...xs) - 0.5
+        const to = Math.max(...xs) + 0.5
+        data.push([from, mean], [to, mean], null)
+        sigmaBoxes.push([
+          { xAxis: from, yAxis: mean - sd },
+          { xAxis: to, yAxis: mean + sd },
+        ])
       }
       return {
         type: 'line' as const,
@@ -335,6 +344,11 @@ export function TrendCard({ shots, sessions, selectedSessionId, mode, onToggle }
         lineStyle: { color: c.color, width: 1.5, type: 'dashed' as const, opacity: 0.6 },
         symbol: 'none',
         silent: true,
+        markArea: {
+          silent: true,
+          itemStyle: { color: hexToRgba(c.color, 0.07) },
+          data: sigmaBoxes,
+        },
         z: 2,
       }
     })
@@ -490,7 +504,8 @@ export function TrendCard({ shots, sessions, selectedSessionId, mode, onToggle }
           <h2>Progress</h2>
           <p className="subtitle" data-testid="trend-hint">
             {metric.hint} All sessions, oldest to newest. Lines are rolling {WINDOW}-shot averages
-            per club, dashes are session averages{clubs.length === 1 ? ', the band is ±1σ' : ''}.
+            per club, dashes and faint boxes are session mean ±1σ
+            {clubs.length === 1 ? ', the ribbon is rolling ±1σ' : ''}.
           </p>
         </div>
         <select
diff --git a/web/src/index.css b/web/src/index.css
index 40529e0..4c586ea 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -487,6 +487,30 @@ button {
   border-radius: 50%;
 }
 
+.session-legend .entry {
+  padding: 2px 7px;
+  margin: -2px -3px;
+  border-radius: 8px;
+  cursor: default;
+  transition: opacity 0.12s ease, background 0.12s ease;
+}
+
+.session-legend .entry:not(.glyph-entry):hover {
+  background: var(--chip-bg, rgb(127 127 127 / 0.12));
+}
+
+.session-legend .entry.dim {
+  opacity: 0.35;
+}
+
+.session-legend .glyph-entry {
+  color: var(--muted);
+}
+
+.session-legend .glyph {
+  font-size: 10px;
+}
+
 .viz-tooltip {
   position: absolute;
   pointer-events: none;
diff --git a/web/src/sessionGroups.ts b/web/src/sessionGroups.ts
new file mode 100644
index 0000000..ec6b6df
--- /dev/null
+++ b/web/src/sessionGroups.ts
@@ -0,0 +1,191 @@
+import type { TrainingSession } from './api/types'
+import type { Mode } from './theme'
+
+// Session grouping: colour shots by when they were hit instead of what
+// club hit them. Sessions take a sequential ramp, oldest cold violet to
+// newest warm orange, so progression reads as a colour sweep. Club
+// identity moves to the dot symbol.
+
+export interface SessionSlot {
+  id: string
+  index: number
+  color: string
+  label: string
+  title: string
+}
+
+const RAMP: Record<Mode, [string, string, string]> = {
+  light: ['#6f6bd8', '#0e9888', '#e07800'],
+  dark: ['#8a86e8', '#17a897', '#eda100'],
+}
+
+// Ellipses and mean markers need this many shots in a session-club
+// group; below it the sigma is noise.
+export const GROUP_MIN = 5
+
+function lerpHex(a: string, b: string, t: number): string {
+  const pa = Number.parseInt(a.slice(1), 16)
+  const pb = Number.parseInt(b.slice(1), 16)
+  const ch = (shift: number) => {
+    const va = (pa >> shift) & 0xff
+    const vb = (pb >> shift) & 0xff
+    return Math.round(va + (vb - va) * t)
+  }
+  return `#${((ch(16) << 16) | (ch(8) << 8) | ch(0)).toString(16).padStart(6, '0')}`
+}
+
+export function rampColor(t: number, mode: Mode): string {
+  const [a, b, c] = RAMP[mode]
+  return t < 0.5 ? lerpHex(a, b, t * 2) : lerpHex(b, c, (t - 0.5) * 2)
+}
+
+export function sessionSlots(sessions: TrainingSession[], mode: Mode): Map<string, SessionSlot> {
+  const ordered = [...sessions].sort((a, b) =>
+    (a.played_on ?? a.created_at).localeCompare(b.played_on ?? b.created_at),
+  )
+  const last = Math.max(ordered.length - 1, 1)
+  return new Map(
+    ordered.map((s, index) => {
+      const iso = s.played_on ? `${s.played_on}T00:00:00` : s.created_at
+      const label = new Date(iso).toLocaleDateString(undefined, { day: 'numeric', month: 'short' })
+      return [
+        s.id,
+        {
+          id: s.id,
+          index,
+          color: rampColor(index / last, mode),
+          label,
+          title: [label, s.facility, s.bay].filter(Boolean).join(' · '),
+        },
+      ]
+    }),
+  )
+}
+
+// Club identity inside a session-coloured chart: symbol by palette
+// slot, mirrored as a text glyph in legends.
+const SYMBOLS = ['circle', 'triangle', 'diamond', 'rect']
+const GLYPHS = ['●', '▲', '◆', '■']
+
+export function clubSymbol(slot: number | null): string {
+  return slot === null ? 'circle' : SYMBOLS[slot % SYMBOLS.length]
+}
+
+export function clubGlyph(slot: number | null): string {
+  return slot === null ? GLYPHS[0] : GLYPHS[slot % GLYPHS.length]
+}
+
+// Drop drill and partial shots before fitting an ellipse: split the
+// group's carries at the point that minimises within-cluster variance
+// (1D two-means) and keep the long cluster. The split only sticks when
+// the clusters sit far apart relative to their own spread AND the short
+// cluster is genuinely short-game work, so a session of uniform full
+// swings stays whole.
+export function fullSwings<T>(shots: T[], carryOf: (s: T) => number | null): T[] {
+  const sorted = shots
+    .filter((s) => carryOf(s) !== null)
+    .sort((a, b) => carryOf(a)! - carryOf(b)!)
+  const n = sorted.length
+  if (n < GROUP_MIN * 2) return sorted
+
+  const v = sorted.map((s) => carryOf(s)!)
+  const sum = [0]
+  const sumSq = [0]
+  for (let i = 0; i < n; i++) {
+    sum.push(sum[i] + v[i])
+    sumSq.push(sumSq[i] + v[i] ** 2)
+  }
+  // Sum of squared deviations over v[from..to)
+  const sse = (from: number, to: number) => {
+    const s = sum[to] - sum[from]
+    return sumSq[to] - sumSq[from] - (s * s) / (to - from)
+  }
+
+  let best = -1
+  let bestSse = Infinity
+  for (let k = 2; k <= n - GROUP_MIN; k++) {
+    const s = sse(0, k) + sse(k, n)
+    if (s < bestSse) {
+      bestSse = s
+      best = k
+    }
+  }
+  if (best < 0) return sorted
+
+  const lowerMean = sum[best] / best
+  const upperMean = (sum[n] - sum[best]) / (n - best)
+  const pooledSd = Math.sqrt(bestSse / Math.max(n - 2, 1))
+  if (upperMean - lowerMean > 2 * pooledSd && lowerMean < 0.65 * upperMean) {
+    return sorted.slice(best)
+  }
+  return sorted
+}
+
+export function meanSd(values: number[]): { mean: number; sd: number } {
+  const mean = values.reduce((a, b) => a + b, 0) / values.length
+  const sd =
+    values.length > 1
+      ? Math.sqrt(values.reduce((a, b) => a + (b - mean) ** 2, 0) / (values.length - 1))
+      : 0
+  return { mean, sd }
+}
+
+// TrackMan-style dispersion ellipse: the covariance ellipse of the
+// group, oriented along the shot pattern and scaled to k sigma so it
+// wraps the cloud instead of floating inside it (k = 2 covers about
+// 86% of a normal group).
+export interface CovEllipse {
+  cx: number
+  cy: number
+  /** Semi-axes in data units, r1 along phi */
+  r1: number
+  r2: number
+  /** Major-axis angle in radians, data space, y up */
+  phi: number
+}
+
+export function covEllipse(xs: number[], ys: number[], k = 2, floor = 0): CovEllipse {
+  const n = xs.length
+  const mx = xs.reduce((a, b) => a + b, 0) / n
+  const my = ys.reduce((a, b) => a + b, 0) / n
+  let sxx = 0
+  let syy = 0
+  let sxy = 0
+  for (let i = 0; i < n; i++) {
+    sxx += (xs[i] - mx) ** 2
+    syy += (ys[i] - my) ** 2
+    sxy += (xs[i] - mx) * (ys[i] - my)
+  }
+  const d = Math.max(n - 1, 1)
+  sxx /= d
+  syy /= d
+  sxy /= d
+
+  const half = (sxx + syy) / 2
+  const spread = Math.sqrt(Math.max(half ** 2 - (sxx * syy - sxy ** 2), 0))
+  const l1 = Math.max(half + spread, 0)
+  const l2 = Math.max(half - spread, 0)
+  const phi = Math.abs(sxy) < 1e-9 ? (sxx >= syy ? 0 : Math.PI / 2) : Math.atan2(l1 - sxx, sxy)
+  return {
+    cx: mx,
+    cy: my,
+    r1: Math.max(k * Math.sqrt(l1), floor),
+    r2: Math.max(k * Math.sqrt(l2), floor),
+    phi,
+  }
+}
+
+// Ellipse outline as data-space points, for charts where the two axes
+// scale differently (an affine map keeps it an exact ellipse).
+export function ellipsePoints(e: CovEllipse, steps = 48): [number, number][] {
+  const cos = Math.cos(e.phi)
+  const sin = Math.sin(e.phi)
+  const pts: [number, number][] = []
+  for (let i = 0; i < steps; i++) {
+    const t = (i / steps) * 2 * Math.PI
+    const a = e.r1 * Math.cos(t)
+    const b = e.r2 * Math.sin(t)
+    pts.push([e.cx + a * cos - b * sin, e.cy + a * sin + b * cos])
+  }
+  return pts
+}
diff --git a/web/src/useDashboardData.ts b/web/src/useDashboardData.ts
index 7389976..b94b73e 100644
--- a/web/src/useDashboardData.ts
+++ b/web/src/useDashboardData.ts
@@ -19,7 +19,10 @@ export function useDashboardData() {
   const [state, setState] = useState<DashboardState>({ phase: 'loading' })
   const [calibrated, setCalibrated] = useState(false)
 
-  const load = useCallback(async () => {
+  // A cancelled load must not touch state: StrictMode mounts the
+  // effect twice, and the abandoned first fetch would otherwise land
+  // late and overwrite edits made after the visible load finished.
+  const load = useCallback(async (signal?: { cancelled: boolean }) => {
     setState({ phase: 'loading' })
     try {
       await ensureSession()
@@ -29,15 +32,21 @@ export function useDashboardData() {
         api.clubStats(),
         api.shots(),
       ])
+      if (signal?.cancelled) return
       setState({ phase: 'ready', data: { sessions, clubs, stats, shots } })
     } catch (err) {
+      if (signal?.cancelled) return
       if (err instanceof AuthRequiredError) setState({ phase: 'login', error: null })
       else setState({ phase: 'error', message: err instanceof Error ? err.message : String(err) })
     }
   }, [])
 
   useEffect(() => {
-    void load()
+    const signal = { cancelled: false }
+    void load(signal)
+    return () => {
+      signal.cancelled = true
+    }
   }, [load])
 
   const submitLogin = useCallback(
@@ -73,15 +82,21 @@ export function useDashboardData() {
           : prev,
       )
     patch(excluded)
-    void api
-      .setShotExcluded(id, excluded)
-      .then(() => api.clubStats(calibrated))
-      .then((stats) =>
-        setState((prev) =>
-          prev.phase === 'ready' ? { ...prev, data: { ...prev.data, stats } } : prev,
-        ),
-      )
-      .catch(() => patch(!excluded))
+    void api.setShotExcluded(id, excluded).then(
+      // Stats refresh is best effort: the flag is already persisted, so
+      // a failed refetch must not revert the dot.
+      async () => {
+        try {
+          const stats = await api.clubStats(calibrated)
+          setState((prev) =>
+            prev.phase === 'ready' ? { ...prev, data: { ...prev.data, stats } } : prev,
+          )
+        } catch {
+          /* keep the previous aggregates */
+        }
+      },
+      () => patch(!excluded),
+    )
   }, [calibrated])
 
   const refreshStats = useCallback((useCalibrated: boolean) => {