Add audiowidget endpoint: Blueprint renders audiowidget.tmpl, PaneCP fetches it on synthesis completion

static/components/PaneCP.js

@@ -1,5 +1,5 @@
-import { h, ref } from 'vue';
-import { fetchScoreText, putScoreText, URLS } from '../api.js';
+import { h, ref, watch } from 'vue';
+import { fetchScoreText, putScoreText, fetchAudioWidget, URLS } from '../api.js';
 import { patchScore } from '../exporter.js';
 import { StatusPoller } from './StatusPoller.js';
 
@@ -40,6 +40,18 @@ export const PaneCP = {
     setup(props) {
         const exporting = ref(false);
         const exportError = ref('');
+        const audioWidgetHtml = ref('');
+
+        watch(
+            () => props.store.synthesisStatus,
+            async (s) => {
+                if (!s?.frozen) { audioWidgetHtml.value = ''; return; }
+                audioWidgetHtml.value = await fetchAudioWidget(
+                    s.file_accomplished ? URLS.result : null,
+                    s.errors ?? null,
+                );
+            },
+        );
 
         async function doExport() {
             exportError.value = '';
@@ -118,18 +130,10 @@ export const PaneCP = {
                 store.synthesisStatus && !store.synthesisStatus.frozen
                     ? h(StatusPoller, { store }) : null,
 
-                // Synthesis error
-                store.synthesisStatus?.frozen && store.synthesisStatus?.errors
-                    ? h('div', { class: 'se-error', style: 'margin-top:0.5rem' },
-                        store.synthesisStatus.errors) : null,
-
-                // Audio result
-                store.synthesisStatus?.file_accomplished
-                    ? h('audio', {
-                        controls: true,
-                        src: URLS.result,
-                        style: 'display:block;width:100%;margin-top:0.5rem',
-                      }) : null,
+                // Audio widget (rendered server-side from audiowidget.tmpl)
+                audioWidgetHtml.value
+                    ? h('div', { innerHTML: audioWidgetHtml.value, style: 'margin-top:0.5rem' })
+                    : null,
             ]);
         };
     },