Various more changes to the Archetype Builder

frontend/src/melodies/MelodyDetail.jsx

@@ -4,6 +4,7 @@ import api from "../api/client";
 import { useAuth } from "../auth/AuthContext";
 import ConfirmDialog from "../components/ConfirmDialog";
 import SpeedCalculatorModal from "./SpeedCalculatorModal";
+import PlaybackModal from "./PlaybackModal";
 import {
   getLocalizedValue,
   getLanguageName,
@@ -40,6 +41,7 @@ export default function MelodyDetail() {
   const [builtMelody, setBuiltMelody] = useState(null);
   const [codeCopied, setCodeCopied] = useState(false);
   const [showSpeedCalc, setShowSpeedCalc] = useState(false);
+  const [showPlayback, setShowPlayback] = useState(false);
 
   useEffect(() => {
     api.get("/settings/melody").then((ms) => {
@@ -200,6 +202,13 @@ export default function MelodyDetail() {
                 Unpublish
               </button>
             )}
+            <button
+              onClick={() => setShowPlayback(true)}
+              className="px-4 py-2 text-sm rounded-md transition-colors"
+              style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)", border: "1px solid var(--border-primary)" }}
+            >
+              Playback
+            </button>
             <button
               onClick={() => setShowSpeedCalc(true)}
               className="px-4 py-2 text-sm rounded-md transition-colors"
@@ -303,7 +312,6 @@ export default function MelodyDetail() {
             <dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
               <Field label="Document ID">{melody.id}</Field>
               <Field label="PID (Playback ID)">{melody.pid}</Field>
-              <Field label="UID">{melody.uid}</Field>
               <div className="col-span-2 md:col-span-3">
                 <Field label="URL">{melody.url}</Field>
               </div>
@@ -440,6 +448,14 @@ export default function MelodyDetail() {
         </section>
       )}
 
+      <PlaybackModal
+        open={showPlayback}
+        melody={melody}
+        builtMelody={builtMelody}
+        files={files}
+        onClose={() => setShowPlayback(false)}
+      />
+
       <SpeedCalculatorModal
         open={showSpeedCalc}
         melody={melody}