From c45f6450bfa8f610c1d0e2ca401006e750d6e5f6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 25 Jun 2026 03:09:17 +0000
Subject: [PATCH] UI overhaul Phase 7a: extract InputSettingsForm from App.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Begin the App.tsx cleanup (the third "all three" target) with the safe,
self-contained piece: extract the analysis-settings controls — the ANALYSIS
MODE selector plus the pitch/note, MT3, and AI-interpretation toggles — into
a stateless InputSettingsForm component.

- New components/InputSettingsForm.tsx renders the four sibling controls
  verbatim. It's fully controlled: every value and change handler is owned by
  App and passed in (isAnalyzing, analysisMode, the three requested flags +
  their setters, the config-enabled flags, phase2StatusBadge,
  phase2HelperCopy). The native <input>/<select> controls keep their exact
  aria-labels (ANALYSIS MODE / PITCH/NOTE TRANSLATION / MT3 POLYPHONIC
  TRANSCRIPTION / AI INTERPRETATION) so the Playwright smoke suite's
  getByLabel + check/uncheck locators keep working.
- App.tsx mounts it in place inside the input-panel; all state stays in App.

Pure move — no behavior change; the input-panel testid, the
phase2-status-inline testid, and the locked input-panel background are
untouched. App.tsx: 1515 -> 1406. tsc, lint:style, build, and all 830 unit
tests green with zero test changes. (App.tsx hooks — useEstimatePolling /
useAnalysisProjection — are separate, riskier refactors left for follow-ups.)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016to3B8Hf9eAGxAbzpQNvku
---
 apps/ui/src/App.tsx                          | 141 ++--------------
 apps/ui/src/components/InputSettingsForm.tsx | 167 +++++++++++++++++++
 2 files changed, 183 insertions(+), 125 deletions(-)
 create mode 100644 apps/ui/src/components/InputSettingsForm.tsx

diff --git a/apps/ui/src/App.tsx b/apps/ui/src/App.tsx
index 39218530..b07a3e31 100644
--- a/apps/ui/src/App.tsx
+++ b/apps/ui/src/App.tsx
@@ -5,6 +5,7 @@ import { AudioWaveform, Play, X } from 'lucide-react';
 import { AnalysisStatusPanel } from './components/AnalysisStatusPanel';
 import { DiagnosticLog } from './components/DiagnosticLog';
 import { FileUpload } from './components/FileUpload';
+import { InputSettingsForm } from './components/InputSettingsForm';
 import { WaveformPlayer } from './components/WaveformPlayer';
 import { Button, DeviceRack } from './components/ui';
 // Audit Finding #5: IdleValuePropPanel now occupies the Signal Monitor area
@@ -1164,131 +1165,21 @@ export default function App() {
                       isDemoLoading={isDemoLoading}
                       selectedFile={audioFile}
                     />
-                    <div className="mt-4 rounded-sm border border-border bg-bg-panel px-3 py-3">
-                      <div className="flex items-center justify-between gap-3">
-                        <div className="space-y-1">
-                          <p className="text-meta font-mono uppercase tracking-wider text-text-secondary">ANALYSIS MODE</p>
-                          {/* Audit revised #4: helper paragraphs in the
-                              Input Source panel were all-caps mono walls.
-                              Switched to sans-serif sentence case (eyebrow
-                              above stays mono-uppercase for label scan). */}
-                          <p className="text-xs leading-snug text-text-secondary/80">
-                            Full keeps every measurement. Standard is faster and skips advanced detail.
-                          </p>
-                        </div>
-                        <select
-                          aria-label="ANALYSIS MODE"
-                          value={analysisMode}
-                          onChange={(e) => setAnalysisMode(e.target.value as 'full' | 'standard')}
-                          disabled={isAnalyzing}
-                          className="appearance-none bg-bg-card border border-border text-text-primary text-meta font-mono py-1.5 pl-2 pr-6 rounded-sm focus:outline-none focus:border-accent cursor-pointer disabled:opacity-50"
-                        >
-                          <option value="full">Full</option>
-                          <option value="standard">Standard</option>
-                        </select>
-                      </div>
-                    </div>
-                    <label
-                      className={`mt-4 rounded-sm border px-3 py-3 transition-colors cursor-pointer ${
-                        pitchNoteTranslationRequested
-                          ? 'border-accent bg-accent/10 text-accent'
-                          : 'border-border bg-bg-panel text-text-secondary'
-                      } ${isAnalyzing ? 'opacity-50 cursor-not-allowed' : ''}`}
-                    >
-                      <div className="flex items-start gap-3">
-                        {/* Native input kept here rather than the Radix
-                            Checkbox primitive because Playwright smoke tests
-                            depend on getByLabel + .toBeChecked() + .uncheck()
-                            against this control (tests/smoke/upload-estimate-
-                            phase1.spec.ts:242). Those locators work reliably
-                            for native form controls; the Radix
-                            <button role="checkbox"> equivalent is less
-                            consistently supported. The Checkbox primitive
-                            still exists in components/ui/ for surfaces that
-                            aren't load-bearing for smoke selectors. */}
-                        <input
-                          type="checkbox"
-                          checked={pitchNoteTranslationRequested}
-                          onChange={(e) => setPitchNoteTranslationRequested(e.target.checked)}
-                          disabled={isAnalyzing}
-                          aria-label="PITCH/NOTE TRANSLATION"
-                          className="mt-0.5 h-4 w-4 accent-accent"
-                        />
-                        <div className="space-y-1">
-                          <p className="text-meta font-mono uppercase tracking-wider">STEM PITCH/NOTE TRANSLATION</p>
-                          {/* Audit revised #4: see ANALYSIS MODE helper above. */}
-                          <p className="text-xs leading-snug opacity-80">
-                            Optional. Slower and heavier. Turns on the stem-aware note draft (Demucs + torchcrepe on bass and lead). When off, the measurement-layer melody contour and Gemini stem listening notes can still appear when those stages run.
-                          </p>
-                        </div>
-                      </div>
-                    </label>
-                    {mt3ConfigEnabled && (
-                      <label
-                        className={`mt-3 rounded-sm border px-3 py-3 transition-colors cursor-pointer ${
-                          mt3Requested
-                            ? 'border-accent bg-accent/10 text-accent'
-                            : 'border-border bg-bg-panel text-text-secondary'
-                        } ${isAnalyzing ? 'opacity-50 cursor-not-allowed' : ''}`}
-                      >
-                        <div className="flex items-start gap-3">
-                          {/* Native input (not the Radix Checkbox) so the
-                              Playwright smoke test drives it via
-                              getByLabel().check() — same rationale as the
-                              PITCH/NOTE toggle above. */}
-                          <input
-                            type="checkbox"
-                            checked={mt3Requested}
-                            onChange={(e) => setMt3Requested(e.target.checked)}
-                            disabled={isAnalyzing}
-                            aria-label="MT3 POLYPHONIC TRANSCRIPTION"
-                            className="mt-0.5 h-4 w-4 accent-accent"
-                          />
-                          <div className="space-y-1">
-                            <p className="text-meta font-mono uppercase tracking-wider">MT3 POLYPHONIC TRANSCRIPTION</p>
-                            <p className="text-xs leading-snug opacity-80">
-                              Experimental and heavy (separate model + weights). Extracts per-instrument MIDI via MT3 — additive only, never overrides Phase 1 measurements. Best with PITCH/NOTE TRANSLATION on; without Demucs stems it falls back to a lower-quality full-mix pass.
-                            </p>
-                          </div>
-                        </div>
-                      </label>
-                    )}
-                    <label
-                      className={`mt-3 rounded-sm border px-3 py-3 transition-colors cursor-pointer ${
-                        interpretationRequested && phase2ConfigEnabled
-                          ? 'border-accent bg-accent/10 text-accent'
-                          : 'border-border bg-bg-panel text-text-secondary'
-                      } ${isAnalyzing || !phase2ConfigEnabled ? 'opacity-50 cursor-not-allowed' : ''}`}
-                    >
-                      <div className="flex items-start gap-3">
-                        {/* See PITCH/NOTE toggle above for the rationale. */}
-                        <input
-                          type="checkbox"
-                          checked={interpretationRequested}
-                          onChange={(e) => handleInterpretationRequestedChange(e.target.checked)}
-                          disabled={isAnalyzing || !phase2ConfigEnabled}
-                          aria-label="AI INTERPRETATION"
-                          className="mt-0.5 h-4 w-4 accent-accent"
-                        />
-                        <div className="space-y-1">
-                          <div className="flex flex-wrap items-center gap-2">
-                            <p className="text-meta font-mono uppercase tracking-wider">AI INTERPRETATION</p>
-                            {phase2StatusBadge && (
-                              <span
-                                data-testid="phase2-status-inline"
-                                className="text-meta font-mono uppercase tracking-wider opacity-80"
-                              >
-                                {phase2StatusBadge}
-                              </span>
-                            )}
-                          </div>
-                          {/* Audit revised #4: see ANALYSIS MODE helper above. */}
-                          <p className="text-xs leading-snug opacity-80">
-                            {phase2HelperCopy}
-                          </p>
-                        </div>
-                      </div>
-                    </label>
+                    <InputSettingsForm
+                      isAnalyzing={isAnalyzing}
+                      analysisMode={analysisMode}
+                      onAnalysisModeChange={setAnalysisMode}
+                      pitchNoteTranslationRequested={pitchNoteTranslationRequested}
+                      onPitchNoteTranslationRequestedChange={setPitchNoteTranslationRequested}
+                      mt3ConfigEnabled={mt3ConfigEnabled}
+                      mt3Requested={mt3Requested}
+                      onMt3RequestedChange={setMt3Requested}
+                      interpretationRequested={interpretationRequested}
+                      phase2ConfigEnabled={phase2ConfigEnabled}
+                      onInterpretationRequestedChange={handleInterpretationRequestedChange}
+                      phase2StatusBadge={phase2StatusBadge}
+                      phase2HelperCopy={phase2HelperCopy}
+                    />
                     <div className="mt-3 rounded-sm border border-border bg-bg-panel p-3 sm:hidden">
                       <div className="flex items-center justify-between gap-3">
                         <label
diff --git a/apps/ui/src/components/InputSettingsForm.tsx b/apps/ui/src/components/InputSettingsForm.tsx
new file mode 100644
index 00000000..4190c0cc
--- /dev/null
+++ b/apps/ui/src/components/InputSettingsForm.tsx
@@ -0,0 +1,167 @@
+// Analysis settings controls (ANALYSIS MODE + the pitch/note, MT3, and AI
+// interpretation toggles), extracted verbatim from App.tsx (App.tsx cleanup).
+// Stateless: every value + change handler is owned by App and passed in, so the
+// native form controls the Playwright smoke suite drives (getByLabel + check/
+// uncheck) keep their exact aria-labels and behavior.
+
+interface InputSettingsFormProps {
+  isAnalyzing: boolean;
+  analysisMode: 'full' | 'standard';
+  onAnalysisModeChange: (mode: 'full' | 'standard') => void;
+  pitchNoteTranslationRequested: boolean;
+  onPitchNoteTranslationRequestedChange: (checked: boolean) => void;
+  mt3ConfigEnabled: boolean;
+  mt3Requested: boolean;
+  onMt3RequestedChange: (checked: boolean) => void;
+  interpretationRequested: boolean;
+  phase2ConfigEnabled: boolean;
+  onInterpretationRequestedChange: (checked: boolean) => void;
+  phase2StatusBadge: string | null;
+  phase2HelperCopy: string;
+}
+
+export function InputSettingsForm({
+  isAnalyzing,
+  analysisMode,
+  onAnalysisModeChange,
+  pitchNoteTranslationRequested,
+  onPitchNoteTranslationRequestedChange,
+  mt3ConfigEnabled,
+  mt3Requested,
+  onMt3RequestedChange,
+  interpretationRequested,
+  phase2ConfigEnabled,
+  onInterpretationRequestedChange,
+  phase2StatusBadge,
+  phase2HelperCopy,
+}: InputSettingsFormProps) {
+  return (
+    <>
+      <div className="mt-4 rounded-sm border border-border bg-bg-panel px-3 py-3">
+        <div className="flex items-center justify-between gap-3">
+          <div className="space-y-1">
+            <p className="text-meta font-mono uppercase tracking-wider text-text-secondary">ANALYSIS MODE</p>
+            {/* Audit revised #4: helper paragraphs in the
+                Input Source panel were all-caps mono walls.
+                Switched to sans-serif sentence case (eyebrow
+                above stays mono-uppercase for label scan). */}
+            <p className="text-xs leading-snug text-text-secondary/80">
+              Full keeps every measurement. Standard is faster and skips advanced detail.
+            </p>
+          </div>
+          <select
+            aria-label="ANALYSIS MODE"
+            value={analysisMode}
+            onChange={(e) => onAnalysisModeChange(e.target.value as 'full' | 'standard')}
+            disabled={isAnalyzing}
+            className="appearance-none bg-bg-card border border-border text-text-primary text-meta font-mono py-1.5 pl-2 pr-6 rounded-sm focus:outline-none focus:border-accent cursor-pointer disabled:opacity-50"
+          >
+            <option value="full">Full</option>
+            <option value="standard">Standard</option>
+          </select>
+        </div>
+      </div>
+      <label
+        className={`mt-4 rounded-sm border px-3 py-3 transition-colors cursor-pointer ${
+          pitchNoteTranslationRequested
+            ? 'border-accent bg-accent/10 text-accent'
+            : 'border-border bg-bg-panel text-text-secondary'
+        } ${isAnalyzing ? 'opacity-50 cursor-not-allowed' : ''}`}
+      >
+        <div className="flex items-start gap-3">
+          {/* Native input kept here rather than the Radix
+              Checkbox primitive because Playwright smoke tests
+              depend on getByLabel + .toBeChecked() + .uncheck()
+              against this control (tests/smoke/upload-estimate-
+              phase1.spec.ts:242). Those locators work reliably
+              for native form controls; the Radix
+              <button role="checkbox"> equivalent is less
+              consistently supported. The Checkbox primitive
+              still exists in components/ui/ for surfaces that
+              aren't load-bearing for smoke selectors. */}
+          <input
+            type="checkbox"
+            checked={pitchNoteTranslationRequested}
+            onChange={(e) => onPitchNoteTranslationRequestedChange(e.target.checked)}
+            disabled={isAnalyzing}
+            aria-label="PITCH/NOTE TRANSLATION"
+            className="mt-0.5 h-4 w-4 accent-accent"
+          />
+          <div className="space-y-1">
+            <p className="text-meta font-mono uppercase tracking-wider">STEM PITCH/NOTE TRANSLATION</p>
+            {/* Audit revised #4: see ANALYSIS MODE helper above. */}
+            <p className="text-xs leading-snug opacity-80">
+              Optional. Slower and heavier. Turns on the stem-aware note draft (Demucs + torchcrepe on bass and lead). When off, the measurement-layer melody contour and Gemini stem listening notes can still appear when those stages run.
+            </p>
+          </div>
+        </div>
+      </label>
+      {mt3ConfigEnabled && (
+        <label
+          className={`mt-3 rounded-sm border px-3 py-3 transition-colors cursor-pointer ${
+            mt3Requested
+              ? 'border-accent bg-accent/10 text-accent'
+              : 'border-border bg-bg-panel text-text-secondary'
+          } ${isAnalyzing ? 'opacity-50 cursor-not-allowed' : ''}`}
+        >
+          <div className="flex items-start gap-3">
+            {/* Native input (not the Radix Checkbox) so the
+                Playwright smoke test drives it via
+                getByLabel().check() — same rationale as the
+                PITCH/NOTE toggle above. */}
+            <input
+              type="checkbox"
+              checked={mt3Requested}
+              onChange={(e) => onMt3RequestedChange(e.target.checked)}
+              disabled={isAnalyzing}
+              aria-label="MT3 POLYPHONIC TRANSCRIPTION"
+              className="mt-0.5 h-4 w-4 accent-accent"
+            />
+            <div className="space-y-1">
+              <p className="text-meta font-mono uppercase tracking-wider">MT3 POLYPHONIC TRANSCRIPTION</p>
+              <p className="text-xs leading-snug opacity-80">
+                Experimental and heavy (separate model + weights). Extracts per-instrument MIDI via MT3 — additive only, never overrides Phase 1 measurements. Best with PITCH/NOTE TRANSLATION on; without Demucs stems it falls back to a lower-quality full-mix pass.
+              </p>
+            </div>
+          </div>
+        </label>
+      )}
+      <label
+        className={`mt-3 rounded-sm border px-3 py-3 transition-colors cursor-pointer ${
+          interpretationRequested && phase2ConfigEnabled
+            ? 'border-accent bg-accent/10 text-accent'
+            : 'border-border bg-bg-panel text-text-secondary'
+        } ${isAnalyzing || !phase2ConfigEnabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+      >
+        <div className="flex items-start gap-3">
+          {/* See PITCH/NOTE toggle above for the rationale. */}
+          <input
+            type="checkbox"
+            checked={interpretationRequested}
+            onChange={(e) => onInterpretationRequestedChange(e.target.checked)}
+            disabled={isAnalyzing || !phase2ConfigEnabled}
+            aria-label="AI INTERPRETATION"
+            className="mt-0.5 h-4 w-4 accent-accent"
+          />
+          <div className="space-y-1">
+            <div className="flex flex-wrap items-center gap-2">
+              <p className="text-meta font-mono uppercase tracking-wider">AI INTERPRETATION</p>
+              {phase2StatusBadge && (
+                <span
+                  data-testid="phase2-status-inline"
+                  className="text-meta font-mono uppercase tracking-wider opacity-80"
+                >
+                  {phase2StatusBadge}
+                </span>
+              )}
+            </div>
+            {/* Audit revised #4: see ANALYSIS MODE helper above. */}
+            <p className="text-xs leading-snug opacity-80">
+              {phase2HelperCopy}
+            </p>
+          </div>
+        </div>
+      </label>
+    </>
+  );
+}