Update project dependencies and configurations; remove deprecated package settings and enhance legacy build support

- Upgrade package manager to pnpm@11.5.2 and remove patched dependencies from package.json.
- Update pnpm-lock.yaml to reflect new dependency versions and remove obsolete entries.
- Refactor Vite configuration to improve legacy build handling, including new plugins for legacy CSS management.
- Remove unused client/index.html file and adjust paths in Vite config for better project structure.
- Enhance DesktopAIShell and EQPage components to support legacy build conditions and improve loading states for raw curves.

client/src/pages/eq/components/FreqChart.tsx

@@ -5,9 +5,29 @@ import { buildPeqSvgCurveData, sampleCombinedPeqMagnitudeDb } from "@/lib/peqAud
 import { eqInterp } from "../eqFormatters";
 import type { EqBand, PeqEqUi } from "../types";
 
+function LegendCurveIndicator({
+  loading,
+  color,
+}: {
+  loading: boolean;
+  color: string;
+}) {
+  if (loading) {
+    return (
+      <span
+        className="inline-block w-3 h-3 rounded-full border-2 animate-spin flex-shrink-0"
+        style={{ borderColor: `${color}40`, borderTopColor: color }}
+        aria-hidden="true"
+      />
+    );
+  }
+  return <div className="w-3 h-[2px] rounded flex-shrink-0" style={{ background: color }} />;
+}
+
 export type FreqChartProps = {
   bands: EqBand[];
   rawCurve: number[] | null;
+  rawCurveLoading?: boolean;
   selectedBand: number;
   abMode: "A" | "B";
   onAbToggle: (m: "A" | "B") => void;
@@ -22,6 +42,7 @@ export type FreqChartProps = {
 export function FreqChart({
   bands,
   rawCurve,
+  rawCurveLoading = false,
   selectedBand,
   abMode,
   onAbToggle,
@@ -212,10 +233,13 @@ export function FreqChart({
           type="button"
           className="flex items-center gap-1.5 active:opacity-80 transition-opacity disabled:opacity-40 disabled:cursor-not-allowed"
           onClick={() => toggleCurveVisibility("raw")}
-          disabled={!hasRawCurve}
+          disabled={rawCurveLoading || !hasRawCurve}
         >
-          <div className="w-3 h-[2px] rounded" style={{ background: "#ffffff" }} />
-          <span className="text-[10px]" style={{ color: "#ffffff", opacity: showRaw ? 1 : 0.35 }}>
+          <LegendCurveIndicator loading={rawCurveLoading} color="#ffffff" />
+          <span
+            className="text-[10px]"
+            style={{ color: "#ffffff", opacity: rawCurveLoading || showRaw ? 1 : 0.35 }}
+          >
             Raw
           </span>
         </button>
@@ -223,10 +247,13 @@ export function FreqChart({
           type="button"
           className="flex items-center gap-1.5 active:opacity-80 transition-opacity disabled:opacity-40 disabled:cursor-not-allowed"
           onClick={() => toggleCurveVisibility("equalized")}
-          disabled={!hasEqualizedCurve}
+          disabled={rawCurveLoading || !hasEqualizedCurve}
         >
-          <div className="w-3 h-[2px] rounded" style={{ background: "#23d2fe" }} />
-          <span className="text-[10px]" style={{ color: "#23d2fe", opacity: showEqualized ? 1 : 0.35 }}>
+          <LegendCurveIndicator loading={rawCurveLoading} color="#23d2fe" />
+          <span
+            className="text-[10px]"
+            style={{ color: "#23d2fe", opacity: rawCurveLoading || showEqualized ? 1 : 0.35 }}
+          >
             Equalized
           </span>
         </button>