fix: larger black key dots, active note names list on piano

app/app/components/chord-diagram/piano-keys.tsx

@@ -110,11 +110,12 @@ export function PianoKeys({ notes }: Props) {
                 <div
                   className="absolute rounded-full bg-white"
                   style={{
-                    width: 6,
+                    width: 10,
-                    height: 6,
+                    height: 10,
-                    bottom: 5,
+                    bottom: 4,
                     left: '50%',
                     transform: 'translateX(-50%)',
+                    border: '2px solid hsl(var(--primary))',
                   }}
                 />
               )}
@@ -138,6 +139,19 @@ export function PianoKeys({ notes }: Props) {
           );
         })}
       </div>
+
+      {/* Active note names — unambiguous list including black keys */}
+      <div className="flex flex-wrap justify-center gap-1 mt-1">
+        {notes.map((note) => (
+          <span
+            key={note}
+            className="font-mono font-semibold text-primary"
+            style={{ fontSize: 9 }}
+          >
+            {note}
+          </span>
+        ))}
+      </div>
     </div>
   );
 }