feat: Add centralized feature flags with Loop Ruler disabled by default

Introduces a centralized feature flags configuration system at
src/config/features.ts for managing feature toggles across the app.

Feature flags can be overridden via VITE_FEATURE_* environment variables.

Current flags:
- loopRuler: false (disabled while assessing UX impact)
- mixerPanel: true
- pitchOverview: true
- effectsPanel: true
- velocityLane: true
- multiplayer: true

Audit findings for Loop Ruler disable:
- UI: LoopRuler component hidden, no way to set loops via UI
- State: loopRegion still exists but resets to null on session load
- Audio: Scheduler/timing still respects loopRegion if set via multiplayer
- Visual: Steps outside loop still dimmed if loopRegion set via sync
- Tests: All 3188 unit tests pass, no E2E tests for LoopRuler

To re-enable: set VITE_FEATURE_LOOP_RULER=true in .env

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: adewale

app/src/components/StepSequencer.tsx

@@ -14,6 +14,7 @@ import { CursorOverlay } from './CursorOverlay';
 import { MixerPanel } from './MixerPanel';
 import { LoopRuler } from './LoopRuler';
 import { PitchOverview } from './PitchOverview';
+import { features } from '../config/features';
 import type { LoopRegion } from '../types';
 import { DEFAULT_STEP_COUNT } from '../types';
 import { detectMirrorDirection } from '../utils/patternOps';
@@ -551,13 +552,15 @@ export function StepSequencer() {
       </div>
 
       {/* Phase 31G: Loop ruler above grid - set loop regions by dragging */}
-      <LoopRuler
-        totalSteps={longestTrackStepCount}
-        loopRegion={state.loopRegion ?? null}
-        onSetLoopRegion={isPublished ? () => {} : handleSetLoopRegion}
-        currentStep={state.currentStep}
-        isPlaying={state.isPlaying}
-      />
+      {features.loopRuler && (
+        <LoopRuler
+          totalSteps={longestTrackStepCount}
+          loopRegion={state.loopRegion ?? null}
+          onSetLoopRegion={isPublished ? () => {} : handleSetLoopRegion}
+          currentStep={state.currentStep}
+          isPlaying={state.isPlaying}
+        />
+      )}
 
       {/* Phase 31A: Progress bar above grid - shows playback position */}
       <div

app/src/config/features.ts

@@ -0,0 +1,88 @@
+/**
+ * Centralized Feature Flags Configuration
+ *
+ * Controls which features are enabled/disabled across the application.
+ * Flags can be overridden via environment variables (VITE_FEATURE_*).
+ *
+ * Usage:
+ *   import { features } from '../config/features';
+ *   if (features.loopRuler) { ... }
+ *
+ * Environment variable override:
+ *   VITE_FEATURE_LOOP_RULER=true  // Enable loop ruler
+ *   VITE_FEATURE_LOOP_RULER=false // Disable loop ruler
+ *
+ * @see specs/FEATURES.md for feature documentation
+ */
+
+/**
+ * Parse a boolean environment variable
+ * Returns defaultValue if not set, true if 'true'/'1', false otherwise
+ */
+function parseEnvBool(envVar: string | undefined, defaultValue: boolean): boolean {
+  if (envVar === undefined || envVar === '') {
+    return defaultValue;
+  }
+  return envVar === 'true' || envVar === '1';
+}
+
+/**
+ * Feature flags object - import this to check feature states
+ */
+export const features = {
+  /**
+   * Loop Ruler - UI for setting loop regions by dragging
+   * Default: false (disabled while we assess UX impact)
+   * The underlying loop region functionality remains in state/audio systems
+   */
+  loopRuler: parseEnvBool(import.meta.env.VITE_FEATURE_LOOP_RULER, false),
+
+  /**
+   * Mixer Panel - Volume/pan controls for tracks
+   * Default: true (stable feature)
+   */
+  mixerPanel: parseEnvBool(import.meta.env.VITE_FEATURE_MIXER_PANEL, true),
+
+  /**
+   * Pitch Overview - Visual display of track pitches
+   * Default: true (stable feature)
+   */
+  pitchOverview: parseEnvBool(import.meta.env.VITE_FEATURE_PITCH_OVERVIEW, true),
+
+  /**
+   * Effects Panel - Reverb, delay, etc.
+   * Default: true (stable feature)
+   */
+  effectsPanel: parseEnvBool(import.meta.env.VITE_FEATURE_EFFECTS_PANEL, true),
+
+  /**
+   * Velocity Lane - Per-step velocity editing
+   * Default: true (stable feature)
+   */
+  velocityLane: parseEnvBool(import.meta.env.VITE_FEATURE_VELOCITY_LANE, true),
+
+  /**
+   * Multiplayer - Real-time collaboration via WebSocket
+   * Default: true (stable feature)
+   */
+  multiplayer: parseEnvBool(import.meta.env.VITE_FEATURE_MULTIPLAYER, true),
+} as const;
+
+/**
+ * Type for feature flag keys
+ */
+export type FeatureFlag = keyof typeof features;
+
+/**
+ * Check if a feature is enabled
+ */
+export function isFeatureEnabled(flag: FeatureFlag): boolean {
+  return features[flag];
+}
+
+/**
+ * Get all feature flags as an object (useful for debugging)
+ */
+export function getAllFeatureFlags(): Record<FeatureFlag, boolean> {
+  return { ...features };
+}