feat(explore): circle of fifths — live key wedge, safe-neighbour tiers, modal parent-major hub (task D-61)

SVG circle in the Knowledge Center Explore section: 12 majors outer
ring with key-signature glyphs, relative minors inner, live/locked key
solid accent with subdominant/dominant/relative soft-tiered; diatonic
chord chips inline (tap -> ChordDetailModal); wedge tap = local
preview only, app key state never touched; modal keys light the
correct ring and the hub teaches the parent-major relationship
("1# - G major's notes" for A dorian; 72/72 mode x root uniqueness
proven). Critic returned once (hub showed the wedge signature, not
the mode's), fixed, PASS on scoped re-gate.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/components/ExplorePanel.jsx

@@ -16,6 +16,7 @@
 
 import { useEffect, useMemo, useState } from 'react'
 import ChordBox from './ChordBox'
+import CircleOfFifths from './CircleOfFifths'
 import MiniPiano from './MiniPiano'
 import VoicingBrowser from './VoicingBrowser'
 import kb from '../data/kb/index.js'
@@ -346,6 +347,11 @@ export function ExploreSection({ keyInfo, levels, onToggleLevel, onChordClick })
         <LevelChips levels={levels} onToggle={onToggleLevel} />
       </div>
 
+      {/* Circle of fifths — live key map with inline diatonics (task D-61).
+          keyInfo here IS App's effectiveKey (App → KnowledgeDock → this section);
+          the circle is read-only — tapping wedges never touches key state. */}
+      <CircleOfFifths keyInfo={keyInfo} onChordClick={onChordClick} />
+
       <p className="text-[11px] text-gray-500">
         Chords shown in {NOTES[keyRootPc]} {keyMode}{keyInfo?.root ? '' : ' (no key detected yet)'} · tap any chord for voicings
       </p>