[auto] move difficulty selector into settings panel

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/DebugApp.tsx

@@ -111,21 +111,6 @@ export function DebugApp() {
         <div className="detected-step">{gesture.replace('step-', '').toUpperCase()}</div>
       )}
 
-      {/* Difficulty selector */}
-      {chart && (
-        <div className="difficulty-selector">
-          {chart.difficulties.map(d => (
-            <button
-              key={d.difficulty}
-              className={`diff-btn${d.difficulty === selectedDifficulty ? ' diff-btn-active' : ''}`}
-              onClick={() => setSelectedDifficulty(d.difficulty)}
-            >
-              {d.difficulty} ({d.meter})
-            </button>
-          ))}
-        </div>
-      )}
-
       {settings.showDebug && (
         <>
           <StepGraphs
@@ -153,6 +138,9 @@ export function DebugApp() {
         open={settingsOpen}
         onToggle={() => setSettingsOpen(!settingsOpen)}
         fps={fps}
+        difficulties={chart?.difficulties.map(d => ({ label: d.difficulty, meter: d.meter }))}
+        selectedDifficulty={selectedDifficulty}
+        onDifficultyChange={setSelectedDifficulty}
       />
     </div>
   )

src/Settings.tsx

@@ -7,15 +7,23 @@ const MODELS = [
   { label: 'Heavy', value: 'pose_landmarker_heavy' },
 ]
 
+interface DifficultyOption {
+  label: string
+  meter: number
+}
+
 interface Props {
   settings: PoseSettings
   onChange: (s: PoseSettings) => void
   open: boolean
   onToggle: () => void
   fps: number
+  difficulties?: DifficultyOption[]
+  selectedDifficulty?: string
+  onDifficultyChange?: (difficulty: string) => void
 }
 
-export function Settings({ settings, onChange, open, onToggle, fps }: Props) {
+export function Settings({ settings, onChange, open, onToggle, fps, difficulties, selectedDifficulty, onDifficultyChange }: Props) {
   const update = (partial: Partial<PoseSettings>) =>
     onChange({ ...settings, ...partial })
 
@@ -50,6 +58,22 @@ export function Settings({ settings, onChange, open, onToggle, fps }: Props) {
             Show Debug
           </label>
 
+          {difficulties && difficulties.length > 0 && (
+            <label>
+              Difficulty
+              <select
+                value={selectedDifficulty}
+                onChange={(e) => onDifficultyChange?.(e.target.value)}
+              >
+                {difficulties.map((d) => (
+                  <option key={d.label} value={d.label}>
+                    {d.label} ({d.meter})
+                  </option>
+                ))}
+              </select>
+            </label>
+          )}
+
           <hr className="settings-divider" />
 
           <label>