CODEX - Added extra columns and settings again

frontend/src/melodies/MelodyDetail.jsx

@@ -31,6 +31,22 @@ import {
   formatDuration,
 } from "./melodyUtils";
 
+function formatBpm(ms) {
+  const value = Number(ms);
+  if (!value || value <= 0) return null;
+  return Math.round(60000 / value);
+}
+
+function mapPercentageToStepDelay(percent, minSpeed, maxSpeed) {
+  if (minSpeed == null || maxSpeed == null) return null;
+  const p = Math.max(0, Math.min(100, Number(percent || 0)));
+  const t = p / 100;
+  const a = Number(minSpeed);
+  const b = Number(maxSpeed);
+  if (a <= 0 || b <= 0) return Math.round(a + (b - a) * t);
+  return Math.round(a * Math.pow(b / a, t));
+}
+
 function Field({ label, children }) {
   return (
     <div>
@@ -193,6 +209,10 @@ export default function MelodyDetail() {
 
   const info = melody.information || {};
   const settings = melody.default_settings || {};
+  const speedMs = mapPercentageToStepDelay(settings.speed, info.minSpeed, info.maxSpeed);
+  const speedBpm = formatBpm(speedMs);
+  const minBpm = formatBpm(info.minSpeed);
+  const maxBpm = formatBpm(info.maxSpeed);
   const languages = melodySettings?.available_languages || ["en"];
   const displayName = getLocalizedValue(info.name, displayLang, "Untitled Melody");
 
@@ -313,8 +333,22 @@ export default function MelodyDetail() {
               <Field label="Steps">{info.steps}</Field>
               <Field label="Total Archetype Notes">{info.totalNotes}</Field>
               <Field label="Total Active Bells">{info.totalActiveBells ?? "-"}</Field>
-              <Field label="Min Speed">{info.minSpeed}</Field>
-              <Field label="Max Speed">{info.maxSpeed}</Field>
+              <Field label="Min Speed">
+                {info.minSpeed ? (
+                  <div>
+                    <div>{minBpm} BPM</div>
+                    <div className="text-xs" style={{ color: "var(--text-muted)" }}>{info.minSpeed} ms</div>
+                  </div>
+                ) : "-"}
+              </Field>
+              <Field label="Max Speed">
+                {info.maxSpeed ? (
+                  <div>
+                    <div>{maxBpm} BPM</div>
+                    <div className="text-xs" style={{ color: "var(--text-muted)" }}>{info.maxSpeed} ms</div>
+                  </div>
+                ) : "-"}
+              </Field>
               <Field label="Color">
                 {info.color ? (
                   <span className="inline-flex items-center gap-2">
@@ -391,7 +425,13 @@ export default function MelodyDetail() {
               Default Settings
             </h2>
             <dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
-              <Field label="Speed">{settings.speed}%</Field>
+              <Field label="Speed">
+                {settings.speed != null ? (
+                  <span>
+                    {settings.speed}%{speedBpm ? ` · ${speedBpm} BPM` : ""}{speedMs ? ` · ${speedMs} ms` : ""}
+                  </span>
+                ) : "-"}
+              </Field>
               <Field label="Duration">{formatDuration(settings.duration)}</Field>
               <Field label="Total Run Duration">{settings.totalRunDuration}</Field>
               <Field label="Pause Duration">{settings.pauseDuration}</Field>