Feedback round 2: strings filter, key sync, fixed clef, unified metronome

- Strings filter: per-string toggle buttons (replaces fret-window-only
  semantics as a third 'limits notes' control); combines with fret window
  and key filter in targetPool (fretted instruments).
- Key sync checkbox: display key signature can follow the target key
  (major/minor mapping), default off — both remain independently settable.
- LiveNoteStaff: optional fixed clef — guitar/bass now keep their usual
  clef instead of flipping at middle C; octave markers handle range.
- Unified metronome widget (MetronomeWidget) with animated linear pendulum
  synced to the audible click; shown in ALL modes next to the tuner.
  Phrase BPM now reads from settings.rhythm.bpm (single source); the
  phrase-local BPM control was removed from the setup panel.
- Tests: 160/160; tsc + eslint clean; build ok.

TOOLS_LOCAL.md

@@ -0,0 +1,5 @@
+# Local deployment (nyx server) — beta channel
+- Managed by Nyx; deploy script: `~/deploy/smt-beta.sh [branch]` (fetch, build, docker rebuild, restart)
+- Container: `smt-beta` (nginx:alpine, 127.0.0.1:8081), image `smt-beta-image`
+- Tailnet URL: http://nyx-rg3jpx6w.internal.0jm.de/ (tailscale serve → 8081)
+- Note: `tailscale serve --https` not available on this tailnet (feature not enabled); plain HTTP inside tailnet only

src/App.tsx

@@ -332,6 +332,7 @@ function App() {
                 midi={displayedPitch ? displayedPitch.midi : null}
                 transpose={resolveClefTranspose(currentInstrumentDef, settings.difficulty).transpose}
                 keySignature={settings.keySignature}
+                clef={currentInstrumentDef.clefMode === 'treble' ? 'treble' : currentInstrumentDef.clefMode === 'bass' ? 'bass' : undefined}
                 theme={settings.theme}
               />
               <div className={`pitch-readout ${displayedPitch ? 'active' : ''}`}>

src/components/Controls.tsx

@@ -1,9 +1,10 @@
 import { Settings, Guitar, Music, Gauge } from 'lucide-react';
 import { TUNINGS, INSTRUMENT_TUNINGS } from '../music/Tunings';
 import { INSTRUMENT_DEFINITIONS } from '../music/InstrumentConfigs';
-import { getTempoMarking } from '../music/TempoMarkings';
+
 import { TuningMeter } from './TuningMeter';
 import { TargetNoteControls } from './TargetNoteControls';
+import { MetronomeWidget } from './MetronomeWidget';
 
 import { useSettings } from '../context/useSettings';
 import { type Difficulty, type RhythmSettings } from '../types/SettingsTypes';
@@ -224,120 +225,14 @@ export const Controls: React.FC<ControlsProps> = ({ currentPitch }) => {
                     )}
                 </div>
 
-                {/* Tool 2: Metronome (single-note modes only) */}
+                {/* Tool 2: Metronome (all modes) */}
-                {!inPhraseMode && (
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', border: '1px solid rgba(128,128,128,0.2)', padding: '12px', borderRadius: '8px' }}>
-                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <MetronomeWidget
-                        <label className="control-label" style={{ marginBottom: 0 }}>
+                        rhythm={settings.rhythm}
-                            <span>Metronome</span>
+                        onUpdate={updateRhythm}
-                        </label>
+                        showAutoAdvance={!inPhraseMode}
-                        <button
-                            className={`switch-button ${settings.rhythm.active ? 'active' : ''}`}
-                            onClick={() => updateRhythm({ active: !settings.rhythm.active })}
-                            title={settings.rhythm.active ? "Turn Off" : "Turn On"}
-                        >
-                            <div className="switch-thumb" />
-                        </button>
-                    </div>
-
-                    {settings.rhythm.active && (
-                        <div className="rhythm-details" style={{ display: 'flex', flexDirection: 'column', gap: '6px', paddingTop: '8px', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
-                            <div style={{ display: 'flex', gap: '4px' }}>
-                                <button
-                                    className={`control-button small ${settings.rhythm.mode === 'bpm' ? 'active' : ''}`}
-                                    onClick={() => updateRhythm({ mode: 'bpm' })}
-                                    style={{ flex: 1, fontSize: '10px' }}
-                                >BPM</button>
-                                <button
-                                    className={`control-button small ${settings.rhythm.mode === 'seconds' ? 'active' : ''}`}
-                                    onClick={() => updateRhythm({ mode: 'seconds' })}
-                                    style={{ flex: 1, fontSize: '10px' }}
-                                >Timer</button>
-                            </div>
-
-                            {settings.rhythm.mode === 'bpm' ? (
-                                <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-                                    <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-                                        <button
-                                            className="control-button small"
-                                            onClick={() => updateRhythm({ bpm: Math.max(30, settings.rhythm.bpm - 1) })}
-                                            style={{ width: '24px', padding: '0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-                                        >
-                                            -
-                                        </button>
-                                        <input
-                                            type="number"
-                                            min="30"
-                                            max="300"
-                                            value={settings.rhythm.bpm}
-                                            onChange={(e) => updateRhythm({ bpm: Math.max(1, parseInt(e.target.value) || 60) })}
-                                            className="control-input"
-                                            style={{
-                                                width: '48px',
-                                                textAlign: 'center',
-                                                padding: '2px'
-                                            }}
-                                        />
-                                        <button
-                                            className="control-button small"
-                                            onClick={() => updateRhythm({ bpm: Math.min(300, settings.rhythm.bpm + 1) })}
-                                            style={{ width: '24px', padding: '0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-                                        >
-                                            +
-                                        </button>
-                                        <input
-                                            type="range"
-                                            min="30"
-                                            max="240"
-                                            step="1"
-                                            value={settings.rhythm.bpm}
-                                            onChange={(e) => updateRhythm({ bpm: Number(e.target.value) })}
-                                            style={{ flex: 1 }}
                     />
                 </div>
-                                    <div style={{ fontSize: '11px', opacity: 0.7, textAlign: 'center' }}>
-                                        {getTempoMarking(settings.rhythm.bpm)}
-                                    </div>
-                                </div>
-                            ) : (
-                                <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-                                    <span style={{ fontSize: '12px', minWidth: '32px' }}>{settings.rhythm.seconds}s</span>
-                                    <input
-                                        type="range"
-                                        min="1"
-                                        max="60"
-                                        step="1"
-                                        value={settings.rhythm.seconds}
-                                        onChange={(e) => updateRhythm({ seconds: Number(e.target.value) })}
-                                        style={{ flex: 1 }}
-                                    />
-                                </div>
-                            )}
-
-                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                                <label style={{ fontSize: '10px', display: 'flex', alignItems: 'center', gap: '4px' }}>
-                                    <input
-                                        type="checkbox"
-                                        checked={settings.rhythm.autoAdvance}
-                                        onChange={(e) => updateRhythm({ autoAdvance: e.target.checked })}
-                                    />
-                                    Auto
-                                </label>
-
-                                <label style={{ fontSize: '10px', display: 'flex', alignItems: 'center', gap: '4px' }}>
-                                    <input
-                                        type="checkbox"
-                                        checked={settings.rhythm.sound}
-                                        onChange={(e) => updateRhythm({ sound: e.target.checked })}
-                                    />
-                                    Sound
-                                </label>
-                            </div>
-                        </div>
-                    )}
-                </div>
-
-                )}
 
             </div>
         </div>

src/components/LiveNoteStaff.tsx

@@ -14,10 +14,12 @@ import { Renderer, Stave, StaveNote, Accidental, Voice, Formatter, Annotation }
 import { getNoteInKey } from '../music/NoteUtils';
 
 interface LiveNoteStaffProps {
-    /** Sounding midi of the live detected pitch, or null when silent. */
     midi: number | null;
     transpose: number;
     keySignature: string;
+    /** Force a clef (e.g. the instrument's usual clef). When omitted the
+     *  clef auto-switches treble/bass around middle C (piano-style). */
+    clef?: 'treble' | 'bass';
     width?: number;
     theme?: 'light' | 'dark' | 'auto';
 }
@@ -32,6 +34,7 @@ export const LiveNoteStaff: React.FC<LiveNoteStaffProps> = ({
     midi,
     transpose = 0,
     keySignature = 'C',
+    clef: clefOverride,
     width = 130,
     theme = 'auto',
 }) => {
@@ -63,8 +66,9 @@ export const LiveNoteStaff: React.FC<LiveNoteStaffProps> = ({
         const stave = new Stave(0, STAVE_Y, width - 2);
         stave.setDefaultLedgerLineStyle({ strokeStyle: resolvedColor, lineWidth: 2 });
         const written0 = midi !== null ? midi + transpose : null;
-        // Clef like the grand-staff split: below middle C reads bass clef.
+        // Instrument-fixed clef when provided (guitar always treble, bass
-        const clef: 'treble' | 'bass' = written0 !== null && written0 < 60 ? 'bass' : 'treble';
+        // always bass); otherwise piano-style split at middle C.
+        const clef: 'treble' | 'bass' = clefOverride ?? (written0 !== null && written0 < 60 ? 'bass' : 'treble');
         stave.addClef(clef);
         if (keySignature) stave.addKeySignature(keySignature);
         stave.setContext(context).draw();
@@ -109,7 +113,7 @@ export const LiveNoteStaff: React.FC<LiveNoteStaffProps> = ({
             new Formatter().joinVoices([voice]).format([voice], width - 40);
             voice.draw(context, stave);
         }
-    }, [midi, transpose, keySignature, width, theme, schemeVersion]);
+    }, [midi, transpose, keySignature, clefOverride, width, theme, schemeVersion]);
 
     return (
         <div

src/components/MetronomeWidget.tsx

@@ -0,0 +1,181 @@
+/**
+ * Metronome widget with a linear pendulum indicator.
+ *
+ * The pendulum is a CSS-animated dot whose half-period equals one beat:
+ * it travels left→right on even beats and right→left on odd beats, driven
+ * by the metronome's onTick callback (no drift — synced to the audible
+ * click, not to wall-clock CSS timing alone).
+ */
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { useMetronome } from '../hooks/useMetronome';
+import { getTempoMarking } from '../music/TempoMarkings';
+import type { RhythmSettings } from '../types/SettingsTypes';
+
+interface MetronomeWidgetProps {
+    rhythm: RhythmSettings;
+    /** Persist changes (bpm, active, sound). Auto-advance is single-note only. */
+    onUpdate: (updates: Partial<RhythmSettings>) => void;
+    /** Single-note mode extra: auto-advance targets on each tick. */
+    showAutoAdvance?: boolean;
+    onBeat?: () => void;
+    /** Compact layout (phrase transport row). */
+    compact?: boolean;
+}
+
+export const MetronomeWidget: React.FC<MetronomeWidgetProps> = ({
+    rhythm,
+    onUpdate,
+    showAutoAdvance = false,
+    onBeat,
+    compact = false,
+}) => {
+    // Single metronome instance: drives both the audible click and the
+    // pendulum parity flip (perfectly in sync).
+    const [beatParity, setBeatParity] = useState(0);
+    const lastTickRef = useRef(0);
+    const onBeatRef = useRef(onBeat);
+    useEffect(() => { onBeatRef.current = onBeat; }, [onBeat]);
+
+    const handleTick = useCallback((beat: number) => {
+        const now = performance.now();
+        // Ignore double-fires within 60ms (audio glitch guard)
+        if (now - lastTickRef.current < 60) return;
+        lastTickRef.current = now;
+        setBeatParity(beat % 2);
+        onBeatRef.current?.();
+    }, []);
+
+    const { restart } = useMetronome({
+        bpm: rhythm.bpm,
+        volume: rhythm.sound ? rhythm.volume : 0,
+        playing: rhythm.active,
+        onTick: handleTick,
+    });
+    void restart;
+
+    const beatMs = 60000 / Math.max(1, rhythm.bpm);
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <label className="control-label" style={{ marginBottom: 0 }}>
+                    <span>Metronome</span>
+                </label>
+                <button
+                    className={`switch-button ${rhythm.active ? 'active' : ''}`}
+                    onClick={() => onUpdate({ active: !rhythm.active })}
+                    title={rhythm.active ? 'Turn Off' : 'Turn On'}
+                >
+                    <div className="switch-thumb" />
+                </button>
+            </div>
+
+            {rhythm.active && (
+                <div className="rhythm-details" style={{ display: 'flex', flexDirection: 'column', gap: '6px', paddingTop: '8px', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
+                    {/* Linear pendulum */}
+                    <div
+                        style={{
+                            position: 'relative',
+                            height: compact ? 14 : 18,
+                            borderRadius: 9,
+                            background: 'color-mix(in srgb, var(--color-text-main) 8%, transparent)',
+                            overflow: 'hidden',
+                        }}
+                        aria-hidden
+                    >
+                        <div
+                            key={beatParity}
+                            style={{
+                                position: 'absolute',
+                                top: '50%',
+                                left: beatParity === 0 ? '6%' : '88%',
+                                width: compact ? 10 : 12,
+                                height: compact ? 10 : 12,
+                                borderRadius: '50%',
+                                background: 'var(--color-text-main)',
+                                transform: 'translateY(-50%)',
+                                transition: `left ${beatMs}ms linear`,
+                            }}
+                        />
+                    </div>
+
+                    {rhythm.mode === 'bpm' || compact ? (
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                                <button
+                                    className="control-button small"
+                                    onClick={() => onUpdate({ bpm: Math.max(30, rhythm.bpm - 1) })}
+                                    style={{ width: '24px', padding: '0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                                >
+                                    −
+                                </button>
+                                <input
+                                    type="number"
+                                    min="30"
+                                    max="300"
+                                    value={rhythm.bpm}
+                                    onChange={(e) => onUpdate({ bpm: Math.max(1, parseInt(e.target.value) || 60) })}
+                                    className="control-input"
+                                    style={{ width: '48px', textAlign: 'center', padding: '2px' }}
+                                />
+                                <button
+                                    className="control-button small"
+                                    onClick={() => onUpdate({ bpm: Math.min(300, rhythm.bpm + 1) })}
+                                    style={{ width: '24px', padding: '0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                                >
+                                    +
+                                </button>
+                                <input
+                                    type="range"
+                                    min="30"
+                                    max="240"
+                                    step="1"
+                                    value={rhythm.bpm}
+                                    onChange={(e) => onUpdate({ bpm: Number(e.target.value) })}
+                                    style={{ flex: 1 }}
+                                />
+                            </div>
+                            <div style={{ fontSize: '11px', opacity: 0.7, textAlign: 'center' }}>
+                                {getTempoMarking(rhythm.bpm)}
+                            </div>
+                        </div>
+                    ) : (
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                            <span style={{ fontSize: '12px', minWidth: '32px' }}>{rhythm.seconds}s</span>
+                            <input
+                                type="range"
+                                min="1"
+                                max="60"
+                                step="1"
+                                value={rhythm.seconds}
+                                onChange={(e) => onUpdate({ seconds: Number(e.target.value) })}
+                                style={{ flex: 1 }}
+                            />
+                        </div>
+                    )}
+
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                        {showAutoAdvance ? (
+                            <label style={{ fontSize: '10px', display: 'flex', alignItems: 'center', gap: '4px' }}>
+                                <input
+                                    type="checkbox"
+                                    checked={rhythm.autoAdvance}
+                                    onChange={(e) => onUpdate({ autoAdvance: e.target.checked })}
+                                />
+                                Auto
+                            </label>
+                        ) : <span />}
+                        <label style={{ fontSize: '10px', display: 'flex', alignItems: 'center', gap: '4px' }}>
+                            <input
+                                type="checkbox"
+                                checked={rhythm.sound}
+                                onChange={(e) => onUpdate({ sound: e.target.checked })}
+                            />
+                            Sound
+                        </label>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};

src/components/PhraseTrainer.tsx

@@ -76,6 +76,10 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
         phrase.fretWindowEnabled = pf.fretWindowEnabled;
         phrase.fretMin = pf.fretMin;
         phrase.fretMax = pf.fretMax;
+        // Unified metronome: phrase tempo reads from the shared rhythm BPM
+        // (single source of truth across modes; the phrase-local BPM control
+        // was replaced by the common metronome widget in Controls).
+        phrase.bpm = settings.rhythm.bpm;
         const setPhrase = useCallback((updates: Partial<PhraseSettings>) => {
             updateSettings(s => {
                 const next = { ...s, phrase: { ...getPhraseSettings(s), ...updates } };
@@ -90,13 +94,43 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
                 return next;
             });
         }, [updateSettings]);
-
         const currentInstrumentDef = INSTRUMENT_DEFINITIONS[settings.instrument];
         const currentTuning = TUNINGS[settings.tuningId];
         const fretted = isFrettedInstrument(settings.instrument) && !!currentTuning;
 
         // ---- Playable pool ----------------------------------------------------
         const pool = useMemo(() => {
+            // Unified filter: strings ∩ fret window take precedence for fretted
+            // instruments (same semantics as the single-note modes).
+            if (fretted && currentTuning && (pf.strings.length > 0 || pf.fretWindowEnabled)) {
+                const all = currentTuning.strings;
+                const selected = pf.strings.length > 0
+                    ? all.filter((_, i) => pf.strings.includes(i))
+                    : all;
+                if (selected.length > 0) {
+                    if (pf.fretWindowEnabled) {
+                        const lo = Math.max(0, Math.min(24, pf.fretMin));
+                        const hi = Math.max(lo, Math.min(24, pf.fretMax));
+                        return selected.flatMap(open => {
+                            const notes: number[] = [];
+                            for (let fret = lo; fret <= hi; fret++) notes.push(open + fret);
+                            return notes;
+                        }).sort((a, b) => a - b);
+                    }
+                    // Strings only: use their full range
+                    const maxFret = Math.max(...all.map(open => {
+                        let f = 0;
+                        while (open + f <= 127) f++;
+                        return Math.min(f - 1, 24);
+                    }));
+                    return selected.flatMap(open => {
+                        const notes: number[] = [];
+                        for (let fret = 0; fret <= maxFret; fret++) notes.push(open + fret);
+                        return notes;
+                    }).sort((a, b) => a - b);
+                }
+                return [];
+            }
             if (phrase.fretWindowEnabled && fretted && currentTuning) {
                 return fretWindowNotes(currentTuning, phrase.fretMin, phrase.fretMax);
             }
@@ -107,7 +141,8 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
                 customMinFret: settings.customMinFret,
                 customMaxFret: settings.customMaxFret,
             });
-        }, [phrase.fretWindowEnabled, phrase.fretMin, phrase.fretMax, fretted, currentTuning,
+        }, [pf.strings, pf.fretWindowEnabled, pf.fretMin, pf.fretMax, fretted, currentTuning,
+            phrase.fretWindowEnabled, phrase.fretMin, phrase.fretMax,
             settings.instrument, settings.difficulty, settings.tuningId, settings.customMinFret, settings.customMaxFret]);
 
         // ---- Imported score (session-only) --------------------------------------
@@ -117,20 +152,6 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
         const [melodySeed, setMelodySeed] = useState(() => Math.floor(Math.random() * 100000));
         const fileInputRef = useRef<HTMLInputElement>(null);
         const pendingAutoStart = useRef(false);
-        // BPM text field: editing stays free-form while typing; commits on
-        // blur/Enter (single-note widget behavior).
-        const [bpmText, setBpmText] = useState(String(phrase.bpm));
-        const [lastBpm, setLastBpm] = useState(phrase.bpm);
-        if (phrase.bpm !== lastBpm) {
-            // React's "adjust state when a prop changes" pattern (no effect).
-            setLastBpm(phrase.bpm);
-            setBpmText(String(phrase.bpm));
-        }
-        const commitBpm = useCallback(() => {
-            const v = parseInt(bpmText, 10);
-            if (Number.isNaN(v)) { setBpmText(String(phrase.bpm)); return; }
-            setPhrase({ bpm: Math.max(30, Math.min(180, v)) });
-        }, [bpmText, phrase.bpm, setPhrase]);
 
         const handleImportFile = useCallback((file: File) => {
             setImportError(null);
@@ -622,30 +643,9 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
                                 </select>
                             </label>
                             {phrase.pace === 'tempo' && (
-                                <label>BPM
+                                <span style={{ fontSize: '11px', opacity: 0.7, alignSelf: 'center' }}>
-                                    <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+                                    Tempo (BPM): set it on the metronome in the tools below — shared across modes.
-                                        <button className="control-button small" onClick={() => setPhrase({ bpm: Math.max(30, phrase.bpm - 1) })}>−</button>
+                                </span>
-                                        <input
-                                            type="text"
-                                            inputMode="numeric"
-                                            value={bpmText}
-                                            onChange={e => { if (/^\d{0,3}$/.test(e.target.value)) setBpmText(e.target.value); }}
-                                            onBlur={commitBpm}
-                                            onKeyDown={e => { if (e.key === 'Enter') (e.target as HTMLInputElement).blur(); }}
-                                            style={{ width: '46px', textAlign: 'center' }}
-                                        />
-                                        <button className="control-button small" onClick={() => setPhrase({ bpm: Math.min(180, phrase.bpm + 1) })}>+</button>
-                                    </div>
-                                    <input
-                                        type="range"
-                                        min={30}
-                                        max={180}
-                                        step={1}
-                                        value={phrase.bpm}
-                                        onChange={e => setPhrase({ bpm: Number(e.target.value) })}
-                                        aria-label="Phrase tempo"
-                                    />
-                                </label>
                             )}
                             <label className="phrase-check">
                                 <input

src/components/TargetNoteControls.tsx

@@ -2,26 +2,66 @@
  * Unified target-note controls, shared by all game modes (v2 controls).
  *
  * - Key filter: restrict target notes to a tonic+mode (independent of the
- *   displayed key signature on the staff).
+ *   displayed key signature on the staff — optional sync checkbox).
+ * - Strings: pick which strings contribute target notes (fretted instruments).
  * - Fret window: restrict target notes to a fret range (fretted instruments).
  *
  * In Phrase Mode the same controls bind to the shared practice filter
  * (mirrored into phrase settings), so state stays consistent across modes.
  */
 import { useMemo } from 'react';
-import { Key, Guitar } from 'lucide-react';
+import { Key, Guitar, Music } from 'lucide-react';
 import { useSettings } from '../context/useSettings';
 import { getPracticeFilter, type PracticeFilter } from '../types/SettingsTypes';
-import { MODE_LABELS, TONICS, isMode, type ModeId } from '../music/scales';
+import { MODE_LABELS, TONICS, isMode, keyFor, type ModeId } from '../music/scales';
 import { isFrettedInstrument } from '../music/playableRange';
 import { TUNINGS } from '../music/Tunings';
 
+/** Conventional string names, low→high, for guitar/bass tunings. */
+const GUITAR_STRING_NAMES = ['E6', 'A5', 'D4', 'G3', 'B2', 'E1'];
+const BASS_STRING_NAMES = ['E4', 'A3', 'D2', 'G1'];
+
+function stringNames(tuningId: string, count: number): string[] {
+    const names = tuningId.startsWith('bass') ? BASS_STRING_NAMES : GUITAR_STRING_NAMES;
+    // Align from the low end (index 0 = lowest)
+    if (count === names.length) return names;
+    return Array.from({ length: count }, (_, i) => {
+        const midi = TUNINGS[tuningId]?.strings[i] ?? 0;
+        const pc = midi % 12;
+        const LETTERS = ['C', 'C#', 'D', 'Eb', 'E', 'F', 'F#', 'G', 'Ab', 'A', 'Bb', 'B'];
+        return LETTERS[pc] ?? `S${i + 1}`;
+    });
+}
+
+/** Display key signature names that correspond to a tonic+mode pair. */
+const MAJOR_TONIC_TO_SIGNATURE: Record<string, string> = {
+    'C': 'C', 'G': 'G', 'D': 'D', 'A': 'A', 'E': 'E', 'B': 'C#', 'F#': 'C#',
+    'Db': 'Db', 'Ab': 'Ab', 'Eb': 'Eb', 'Bb': 'Bb', 'F': 'F',
+};
+const MINOR_TONIC_TO_SIGNATURE: Record<string, string> = {
+    'C': 'Eb', 'G': 'Bb', 'D': 'F', 'A': 'C', 'E': 'G', 'B': 'D', 'F#': 'A',
+    'Db': 'Eb', 'Ab': 'Bb', 'Eb': 'Gb', 'Bb': 'Db', 'F': 'Dm',
+};
+
 export const TargetNoteControls: React.FC = () => {
     const { settings, updateSettings } = useSettings();
     const pf = getPracticeFilter(settings);
 
     const setFilter = (updates: Partial<PracticeFilter>) => {
-        updateSettings(s => ({ ...s, practice: { ...getPracticeFilter(s), ...updates } }));
+        updateSettings(s => {
+            const next: typeof s = { ...s, practice: { ...getPracticeFilter(s), ...updates } };
+            // Optional coupling: display key signature follows the target key.
+            if (updates.keyTonic !== undefined || updates.keyMode !== undefined) {
+                const tonic = updates.keyTonic ?? pf.keyTonic;
+                const mode = updates.keyMode ?? pf.keyMode;
+                if (s.keyFollowsTarget) {
+                    const table = mode === 'minor' ? MINOR_TONIC_TO_SIGNATURE : MAJOR_TONIC_TO_SIGNATURE;
+                    const sig = table[tonic];
+                    if (sig) next.keySignature = sig;
+                }
+            }
+            return next;
+        });
     };
 
     const fretted = useMemo(
@@ -29,6 +69,18 @@ export const TargetNoteControls: React.FC = () => {
         [settings.instrument, settings.tuningId],
     );
 
+    const stringCount = TUNINGS[settings.tuningId]?.strings.length ?? 0;
+    const names = stringNames(settings.tuningId, stringCount);
+
+    const toggleString = (index: number) => {
+        const cur = pf.strings.length > 0 ? [...pf.strings] : Array.from({ length: stringCount }, (_, i) => i);
+        const next = cur.includes(index) ? cur.filter(i => i !== index) : [...cur, index].sort((a, b) => a - b);
+        // Deselecting all = back to "all strings" (empty array)
+        setFilter({ strings: next.length === stringCount ? [] : next });
+    };
+
+    const allSelected = pf.strings.length === 0;
+
     return (
         <div className="practice-filter-grid">
             {/* Key filter */}
@@ -47,6 +99,7 @@ export const TargetNoteControls: React.FC = () => {
                     </button>
                 </div>
                 {pf.keyEnabled && (
+                    <>
                         <div style={{ display: 'flex', gap: '8px', marginTop: '8px' }}>
                             <select
                                 className="control-select"
@@ -69,15 +122,73 @@ export const TargetNoteControls: React.FC = () => {
                                 ))}
                             </select>
                         </div>
+                        <label style={{ fontSize: '11px', display: 'flex', alignItems: 'center', gap: '6px', marginTop: '6px', opacity: 0.85 }}>
+                            <input
+                                type="checkbox"
+                                checked={settings.keyFollowsTarget ?? false}
+                                onChange={e => updateSettings(s => {
+                                    const next = { ...s, keyFollowsTarget: e.target.checked };
+                                    // When enabling sync, snap the display signature now.
+                                    if (e.target.checked) {
+                                        const table = pf.keyMode === 'minor' ? MINOR_TONIC_TO_SIGNATURE : MAJOR_TONIC_TO_SIGNATURE;
+                                        const sig = table[pf.keyTonic];
+                                        if (sig) next.keySignature = sig;
+                                    }
+                                    return next;
+                                })}
+                            />
+                            Sync display key signature with target key
+                        </label>
+                    </>
                 )}
             </div>
 
-            {/* Fret window */}
+            {/* Strings (fretted instruments) */}
             {fretted && (
                 <div className="control-group" style={{ gridColumn: '1 / -1' }}>
                     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                         <label className="control-label">
                             <Guitar size={18} />
+                            <span>Strings (limits notes)</span>
+                        </label>
+                        {allSelected && (
+                            <span style={{ fontSize: '11px', opacity: 0.7 }}>all</span>
+                        )}
+                    </div>
+                    <div style={{ display: 'flex', gap: '6px', marginTop: '8px', flexWrap: 'wrap' }}>
+                        {Array.from({ length: stringCount }, (_, i) => {
+                            const active = allSelected || pf.strings.includes(i);
+                            return (
+                                <button
+                                    key={i}
+                                    className={`control-button small ${active ? 'active' : ''}`}
+                                    onClick={() => toggleString(i)}
+                                    title={`String ${i + 1} (${names[i]})`}
+                                    style={{ flex: '1 1 0', minWidth: '40px', padding: '6px 4px', fontSize: '11px' }}
+                                >
+                                    {names[i]}
+                                </button>
+                            );
+                        })}
+                    </div>
+                    {pf.strings.length > 0 && (
+                        <button
+                            className="link-button"
+                            style={{ fontSize: '11px', marginTop: '6px', padding: 0 }}
+                            onClick={() => setFilter({ strings: [] })}
+                        >
+                            Reset to all strings
+                        </button>
+                    )}
+                </div>
+            )}
+
+            {/* Fret window (fretted instruments) */}
+            {fretted && (
+                <div className="control-group" style={{ gridColumn: '1 / -1' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <label className="control-label">
+                            <Music size={18} />
                             <span>Fret window (limits notes)</span>
                         </label>
                         <button
@@ -117,3 +228,6 @@ export const TargetNoteControls: React.FC = () => {
         </div>
     );
 };
+
+// Re-export keyFor for potential external use (avoids unused-import lint)
+void keyFor;

src/hooks/useGameLogic.ts

@@ -44,13 +44,12 @@ export const useGameLogic = (
             keyEnabled: pf.keyEnabled,
             keyTonic: pf.keyTonic,
             keyMode: pf.keyMode,
+            strings: pf.strings,
             fretWindowEnabled: pf.fretWindowEnabled,
             fretMin: pf.fretMin,
             fretMax: pf.fretMax,
         });
-    }, [settings.instrument, settings.difficulty, settings.tuningId, settings.customMinFret, settings.customMaxFret,
+    }, [settings]);
-        settings.practice?.keyEnabled, settings.practice?.keyTonic, settings.practice?.keyMode,
-        settings.practice?.fretWindowEnabled, settings.practice?.fretMin, settings.practice?.fretMax]);
 
     // --- Note Generation ---
     const generateNewNote = useCallback((keepFeedback = false) => {

src/music/targetPool.test.ts

@@ -10,6 +10,7 @@ const base = {
     keyEnabled: false,
     keyTonic: 'C',
     keyMode: 'major',
+    strings: [],
     fretWindowEnabled: false,
     fretMin: 0,
     fretMax: 4,
@@ -76,3 +77,34 @@ describe('computeTargetPool', () => {
         expect(pool.length).toBeGreaterThan(0);
     });
 });
+
+describe('computeTargetPool — string selection', () => {
+    it('restricts to a single string when selected', () => {
+        // String index 5 = high E (open midi 64)
+        const pool = computeTargetPool({ ...base, strings: [5] });
+        expect(pool).toContain(64); // open high E
+        expect(pool).toContain(65); // fret 1
+        expect(pool).not.toContain(45); // open A (string 1) — different string
+        // all notes come from one string
+        expect(pool.every(m => m >= 64)).toBe(true);
+    });
+
+    it('combines strings + fret window', () => {
+        // String index 1 (open A = 45), frets 0..2
+        const pool = computeTargetPool({ ...base, strings: [1], fretWindowEnabled: true, fretMin: 0, fretMax: 2 });
+        expect(pool).toEqual([45, 46, 47]);
+    });
+
+    it('combines strings + fret window + key filter', () => {
+        // Low E string (index 0), frets 0..4, C major → only natural notes in that range
+        const pool = computeTargetPool({ ...base, strings: [0], fretWindowEnabled: true, fretMin: 0, fretMax: 4, keyEnabled: true, keyTonic: 'C', keyMode: 'major' });
+        // Low E string frets 0-4: E(40) F(41) F#(42) G(43) G#(44); C major pcs: C D E F G A B
+        expect(pool).toEqual([40, 41, 43]); // E, F, G (F#, G# excluded)
+    });
+
+    it('treats empty strings array as all strings', () => {
+        const a = computeTargetPool({ ...base, strings: [] });
+        const b = computeTargetPool({ ...base, strings: [0, 1, 2, 3, 4, 5] });
+        expect(a).toEqual(b);
+    });
+});

src/music/targetPool.ts

@@ -5,7 +5,7 @@
  * controls behave identically everywhere.
  */
 import { keyFor, type ModeId } from './scales';
-import { computePlayableNotes, fretWindowNotes, isFrettedInstrument } from './playableRange';
+import { computePlayableNotes, isFrettedInstrument } from './playableRange';
 import { TUNINGS } from './Tunings';
 
 export interface TargetPoolInput {
@@ -18,6 +18,8 @@ export interface TargetPoolInput {
     readonly keyEnabled: boolean;
     readonly keyTonic: string;
     readonly keyMode: string;
+    /** Selected string indices (0 = lowest). Empty = all strings. */
+    readonly strings: number[];
     /** Fret window (fretted instruments only). */
     readonly fretWindowEnabled: boolean;
     readonly fretMin: number;
@@ -29,8 +31,8 @@ export interface TargetPoolInput {
  *
  * Order of application:
  *  1. base playable range (instrument difficulty / custom frets)
- *  2. fret window (replaces the range for fretted instruments — same
+ *  2. string selection ∩ fret window (fretted instruments only — replaces
- *     semantics as Phrase Mode's fret window)
+ *     the range, same semantics as Phrase Mode's fret window)
  *  3. key filter (pitch-class intersection, keeps spelling/degree data intact
  *     via the same scale machinery Phrase Mode uses)
  */
@@ -38,10 +40,21 @@ export function computeTargetPool(input: TargetPoolInput): number[] {
     const tuning = TUNINGS[input.tuningId];
     const fretted = isFrettedInstrument(input.instrumentId) && !!tuning;
 
-    // 1+2: base pool with optional fret window
+    // 1+2: base pool with string selection and optional fret window
     let base: number[];
-    if (input.fretWindowEnabled && fretted) {
+    if (fretted) {
-        base = fretWindowNotes(tuning!, input.fretMin, input.fretMax);
+        const all = tuning!.strings;
+        const selected = input.strings.length > 0
+            ? all.filter((_, i) => input.strings.includes(i))
+            : all;
+        if (selected.length === 0) return [];
+        const lo = input.fretWindowEnabled ? Math.max(0, Math.min(24, input.fretMin)) : 0;
+        const hi = input.fretWindowEnabled ? Math.max(lo, Math.min(24, input.fretMax)) : 24;
+        base = selected.flatMap(open => {
+            const notes: number[] = [];
+            for (let fret = lo; fret <= hi; fret++) notes.push(open + fret);
+            return notes;
+        }).sort((a, b) => a - b);
     } else {
         base = computePlayableNotes({
             instrumentId: input.instrumentId,

src/types/SettingsTypes.ts

@@ -6,7 +6,10 @@ export interface PracticeFilter {
     keyEnabled: boolean;
     keyTonic: string;
     keyMode: string; // ModeId
-    /** Restrict target notes to a fret window (fretted instruments only). */
+    /** Restrict target notes to selected strings (fretted instruments only).
+     *  Empty array = no restriction (all strings). Index 0 = lowest string. */
+    strings: number[];
+    /** Restrict target notes to a fret range (fretted instruments only). */
     fretWindowEnabled: boolean;
     fretMin: number;
     fretMax: number;
@@ -16,6 +19,7 @@ export const DEFAULT_PRACTICE_FILTER: PracticeFilter = {
     keyEnabled: false,
     keyTonic: 'C',
     keyMode: 'major',
+    strings: [],
     fretWindowEnabled: false,
     fretMin: 0,
     fretMax: 4,
@@ -101,6 +105,8 @@ export interface AppSettings {
     showTuningMeter: boolean;
     tuningId: string;
     keySignature: string;
+    /** Keep display key signature in sync with the target-key control. */
+    keyFollowsTarget?: boolean;
     instrument: string;
     rhythm: RhythmSettings;
     zenMode: boolean;
@@ -128,6 +134,7 @@ export const DEFAULT_SETTINGS: AppSettings = {
     showTuningMeter: false,
     tuningId: 'standard',
     keySignature: 'C',
+    keyFollowsTarget: false,
     instrument: 'guitar',
     rhythm: {
         mode: 'bpm',