Refocus main page around search → select → generate.

Cleans result titles, adds a 'Use this' action, promotes a selected source card with Preview/Generate, collapses results after selection, and hides debug-ish metadata behind Details.

index.html

@@ -64,28 +64,24 @@
             margin: 0 auto;
         }
 
-        h1 {
-            color: var(--color-accent-primary);
+        .hero {
             text-align: center;
             margin: 0 0 calc(var(--spacing-unit) * 4) 0;
+        }
+        .hero h1 {
+            color: var(--color-accent-primary);
+            margin: 0;
             font-size: 2em;
-            font-weight: 700;
-            letter-spacing: 0.05em;
+            font-weight: 800;
+            letter-spacing: 0.08em;
             text-shadow: var(--glow-primary);
         }
-
-        .topbar {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: calc(var(--spacing-unit) * 2);
-            margin-bottom: calc(var(--spacing-unit) * 2);
-        }
-        .topbar h1 {
-            margin: 0;
+        .hero .tagline {
+            margin: calc(var(--spacing-unit) * 1.5) 0 0 0;
+            color: rgba(255,255,255,0.72);
+            font-size: 14px;
         }
         .faq-link {
-            margin-left: auto;
             background: transparent;
             border: 1px solid rgba(255,255,255,0.14);
             color: rgba(255,255,255,0.85);
@@ -230,8 +226,12 @@
             color: rgba(255,255,255,0.85);
         }
         .controls {
-            margin: calc(var(--spacing-unit) * 3) 0;
-            text-align: center;
+            margin: calc(var(--spacing-unit) * 3) auto calc(var(--spacing-unit) * 2) auto;
+            display: flex;
+            gap: calc(var(--spacing-unit) * 1.5);
+            align-items: stretch;
+            justify-content: center;
+            max-width: 720px;
         }
 
         button {
@@ -268,8 +268,8 @@
         button.primary {
             background: var(--color-accent-primary);
             color: #000;
-            border-color: var(--color-accent-primary);
-            font-weight: 600;
+            border-color: rgba(0,255,136,0.4);
+            font-weight: 800;
         }
 
         button.primary:hover:not(:disabled) {
@@ -277,6 +277,12 @@
             box-shadow: var(--glow-primary), var(--shadow-md);
         }
 
+        /* Make Search the primary CTA */
+        #searchBtn {
+            padding: 14px 18px;
+            border-radius: 12px;
+        }
+
         #status {
             margin: calc(var(--spacing-unit) * 3) 0;
             padding: calc(var(--spacing-unit) * 2);
@@ -289,11 +295,12 @@
         }
 
         input[type="text"] {
-            background: var(--color-surface);
+            flex: 1;
+            background: rgba(0,0,0,0.25);
             color: var(--color-text);
-            border: 1px solid var(--color-border);
-            padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
-            border-radius: var(--radius);
+            border: 1px solid rgba(255,255,255,0.14);
+            padding: 14px 14px;
+            border-radius: 12px;
             font-family: inherit;
             font-size: 16px;
             transition: border-color 150ms ease, box-shadow 150ms ease;
@@ -301,8 +308,8 @@
 
         input[type="text"]:focus {
             outline: none;
-            border-color: var(--color-accent-primary);
-            box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
+            border-color: rgba(0,255,136,0.45);
+            box-shadow: 0 0 0 3px rgba(0,255,136,0.18);
         }
         
         .results-section {
@@ -312,6 +319,13 @@
         .results-section.visible {
             display: block;
         }
+        .results-section.collapsed {
+            opacity: 0.55;
+            transition: opacity 160ms ease;
+        }
+        .results-section.collapsed:hover {
+            opacity: 1;
+        }
         
         .results-table {
             width: 100%;
@@ -346,11 +360,11 @@
 
         .results-table .duration-col {
             width: 80px;
-            text-align: center;
+            text-align: right;
         }
-        .results-table .preview-col {
-            width: 110px;
-            text-align: center;
+        .results-table .action-col {
+            width: 120px;
+            text-align: right;
         }
 
         .results-table tbody tr {
@@ -394,30 +408,12 @@
                 width: 60px;
             }
 
-            .results-table .preview-col {
-                width: 84px;
+            .results-table .action-col {
+                width: 100px;
             }
         }
 
-        .results-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: calc(var(--spacing-unit) * 2);
-            flex-wrap: wrap;
-            margin: 0 0 calc(var(--spacing-unit) * 2) 0;
-        }
-        .results-header h3 {
-            margin: 0;
-        }
-        .results-header .volume-control {
-            margin-top: 0;
-            min-width: 260px;
-            flex: 0 1 360px;
-        }
-        .results-header .volume-control label {
-            font-size: 12px;
-        }
+        .results-header h3 { margin: 0; }
         
         .confidence-bar {
             width: 60px;
@@ -432,6 +428,83 @@
             transition: width 0.2s;
         }
 
+        /* Selected source card */
+        .selected-card {
+            margin-top: calc(var(--spacing-unit) * 3);
+            padding: calc(var(--spacing-unit) * 3);
+            background: var(--color-surface-elevated);
+            border: 1px solid rgba(255,255,255,0.10);
+            border-radius: 12px;
+            box-shadow: var(--shadow-lg);
+        }
+        .selected-title {
+            margin: 0;
+            font-size: 22px;
+            line-height: 1.2;
+            font-weight: 800;
+            letter-spacing: 0.01em;
+            color: var(--color-text);
+        }
+        .selected-meta {
+            margin: 10px 0 0 0;
+            font-size: 13px;
+            color: rgba(255,255,255,0.62);
+        }
+        .selected-actions {
+            display: flex;
+            gap: 12px;
+            margin-top: 16px;
+            flex-wrap: wrap;
+        }
+        .selected-actions .primary {
+            flex: 1;
+            min-width: 180px;
+            padding: 12px 16px;
+        }
+        .selected-actions button:not(.primary) {
+            flex: 1;
+            min-width: 160px;
+        }
+        .selected-support {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+            flex-wrap: wrap;
+            margin-top: 12px;
+        }
+        .selected-support .volume-control {
+            margin-top: 0;
+            flex: 1;
+            min-width: 220px;
+            opacity: 0.85;
+        }
+        .engine-line {
+            margin-top: 14px;
+            color: rgba(255,255,255,0.72);
+            font-size: 13px;
+        }
+        details.details-toggle {
+            margin-top: 12px;
+        }
+        details.details-toggle summary {
+            cursor: pointer;
+            color: rgba(255,255,255,0.7);
+            font-size: 12px;
+            list-style: none;
+        }
+        details.details-toggle summary::-webkit-details-marker { display: none; }
+        .selected-details {
+            margin-top: 8px;
+            font-size: 12px;
+            color: rgba(255,255,255,0.58);
+        }
+
+        .footer {
+            margin-top: calc(var(--spacing-unit) * 6);
+            display: flex;
+            justify-content: center;
+        }
+        
         .player-section {
             margin: 30px 0;
             display: none;
@@ -856,15 +929,14 @@
 </head>
 <body>
     <div class="container">
-        <div class="topbar">
-            <h1>🎵 MOTIF</h1>
-            <button id="faqBtn" class="faq-link" type="button">FAQ</button>
+        <div class="hero">
+            <h1>MOTIF</h1>
+            <p class="tagline"><strong>Procedural music generated from MIDI structure</strong></p>
         </div>
-        <p>Procedural Music Synthesis from MIDI Structure</p>
         
         <div class="controls">
-            <input type="text" id="songInput" placeholder="Enter song name..." />
-            <button id="searchBtn">Search</button>
+            <input type="text" id="songInput" placeholder="Search for a song…" />
+            <button id="searchBtn" class="primary">Search</button>
         </div>
         
         <div id="status">Ready. Enter a song name to search for MIDI files.</div>
@@ -872,18 +944,14 @@
         <div id="resultsSection" class="results-section">
             <div class="results-header">
                 <h3>Search Results</h3>
-                <div class="volume-control">
-                    <label for="soundfontVolume">Preview volume</label>
-                    <input type="range" id="soundfontVolume" min="0" max="1" step="0.01" value="0.7" />
-                </div>
             </div>
             <table id="resultsTable" class="results-table">
                 <thead>
                     <tr>
-                        <th>Title</th>
+                        <th>Song</th>
                         <th class="source-col">Source</th>
-                        <th class="duration-col">Duration</th>
-                        <th class="preview-col">Preview</th>
+                        <th class="duration-col">Length</th>
+                        <th class="action-col">Action</th>
                     </tr>
                 </thead>
                 <tbody id="resultsBody">
@@ -892,57 +960,55 @@
         </div>
         
         <div id="playerSection" class="player-section">
-            <div id="selectedInfo" class="player-info">
-                <h4 id="selectedTitle">No MIDI selected</h4>
-                <p id="selectedMeta">Select a MIDI file from search results to enable playback</p>
-            </div>
+            <div id="selectedCard" class="selected-card">
+                <h2 id="selectedTitle" class="selected-title">No source selected</h2>
+                <div id="selectedMeta" class="selected-meta">Search for a song, then choose a source to use.</div>
 
-            <div class="section">
-                <div class="section-header">
-                    <h3 class="section-title">Synthesis Engine</h3>
-                    <p class="section-subtitle">Run it through the Gameboy emulator.</p>
+                <div class="selected-actions">
+                    <button id="previewBtn" type="button" disabled>Preview MIDI</button>
+                    <button id="motifBtn" class="primary" disabled>Generate</button>
                 </div>
-                <div class="divider"></div>
 
-                <div class="motif-stage">
-                    <div class="motif-grid">
-                        <div class="motif-header">
-                            <h4 style="margin:0; color:#ffaa44; text-shadow: 0 0 18px rgba(255,170,68,0.15);">Run the engine</h4>
-                            <p class="motif-kicker">Gameboy MIDI synthesis. Triangle, square, and sawtooth waveforms. Polyphonic 8-bit chiptune generation.</p>
-                        </div>
-
-                        <div class="motif-controls">
-                            <button id="motifBtn" class="primary" disabled>Generate & Play</button>
-                            <button id="motifStopBtn" disabled>Stop</button>
-                            <button id="copyLinkBtn" type="button" disabled>Copy link</button>
-                            <div class="volume-control">
-                                <label for="motifVolume">Volume</label>
-                                <input type="range" id="motifVolume" min="0" max="1" step="0.01" value="0.7" />
-                            </div>
-                        </div>
-
-                        <div id="iosAudioBanner" class="ios-audio-banner" aria-live="polite">
-                            <div class="row">
-                                <div class="copy">
-                                    <strong>iOS Safari:</strong> tap once to enable audio, then press <strong>Generate &amp; Play</strong>.
-                                </div>
-                                <button id="enableAudioBtn" type="button">Enable Audio</button>
-                            </div>
-                            <div id="iosAudioState" class="state">Audio: …</div>
-                        </div>
-
-                        <div class="motif-progress-container" id="motifProgressContainer" style="display: none;">
-                            <div class="progress-time">
-                                <span id="motifCurrentTime">0:00</span>
-                                <span id="motifDuration">0:00</span>
-                            </div>
-                            <div class="progress-bar-wrapper">
-                                <input type="range" id="motifProgressBar" class="progress-bar" min="0" max="100" value="0" step="0.1" />
-                                <div class="progress-fill" id="motifProgressFill"></div>
-                            </div>
-                        </div>
+                <div class="selected-support">
+                    <button id="motifStopBtn" type="button" disabled>Stop</button>
+                    <button id="copyLinkBtn" type="button" disabled>Copy link</button>
+                    <div class="volume-control">
+                        <label for="motifVolume">Output</label>
+                        <input type="range" id="motifVolume" min="0" max="1" step="0.01" value="0.7" />
+                    </div>
+                    <div class="volume-control">
+                        <label for="soundfontVolume">Preview</label>
+                        <input type="range" id="soundfontVolume" min="0" max="1" step="0.01" value="0.7" />
                     </div>
                 </div>
+
+                <div class="engine-line">Reimagined as classic game-console music using Motif’s Wario engine.</div>
+
+                <div id="iosAudioBanner" class="ios-audio-banner" aria-live="polite">
+                    <div class="row">
+                        <div class="copy">
+                            <strong>iOS Safari:</strong> tap once to enable audio, then press <strong>Generate</strong>.
+                        </div>
+                        <button id="enableAudioBtn" type="button">Enable Audio</button>
+                    </div>
+                    <div id="iosAudioState" class="state">Audio: …</div>
+                </div>
+
+                <div class="motif-progress-container" id="motifProgressContainer" style="display: none;">
+                    <div class="progress-time">
+                        <span id="motifCurrentTime">0:00</span>
+                        <span id="motifDuration">0:00</span>
+                    </div>
+                    <div class="progress-bar-wrapper">
+                        <input type="range" id="motifProgressBar" class="progress-bar" min="0" max="100" value="0" step="0.1" />
+                        <div class="progress-fill" id="motifProgressFill"></div>
+                    </div>
+                </div>
+
+                <details class="details-toggle">
+                    <summary>Details</summary>
+                    <div id="selectedDetails" class="selected-details"></div>
+                </details>
             </div>
 
             <div class="section" id="embedSection" data-not-live="true" style="display:none;">
@@ -969,6 +1035,10 @@
         </div>
     </div>
 
+    <div class="footer">
+        <button id="faqBtn" class="faq-link" type="button">FAQ</button>
+    </div>
+
     <div id="faqModalBackdrop" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="faqTitle">
         <div class="modal" role="document">
             <header>

src/main.ts

@@ -11,9 +11,6 @@ class MotifApp {
 
   // Preview player (lazily created for iOS compatibility)
   private soundfontPlayer: SoundfontMIDIPlayer | null = null;
-  private playingPreviewIndex: number | null = null;
-  private previewStopTimeout: number | null = null;
-  private previewButtons: HTMLButtonElement[] = [];
   
   private searchBtn!: HTMLButtonElement;
   private songInput!: HTMLInputElement;
@@ -25,9 +22,11 @@ class MotifApp {
   
   private selectedTitle!: HTMLElement;
   private selectedMeta!: HTMLElement;
+  private selectedDetails!: HTMLElement;
 
   // Preview player controls
   private soundfontVolumeSlider!: HTMLInputElement;
+  private previewBtn!: HTMLButtonElement;
 
   // Motif controls
   private motifBtn!: HTMLButtonElement;
@@ -98,9 +97,11 @@ class MotifApp {
     
     this.selectedTitle = document.getElementById('selectedTitle')!;
     this.selectedMeta = document.getElementById('selectedMeta')!;
+    this.selectedDetails = document.getElementById('selectedDetails')!;
 
     // Preview player controls
     this.soundfontVolumeSlider = document.getElementById('soundfontVolume') as HTMLInputElement;
+    this.previewBtn = document.getElementById('previewBtn') as HTMLButtonElement;
 
     // Motif controls
     this.motifBtn = document.getElementById('motifBtn') as HTMLButtonElement;
@@ -140,7 +141,8 @@ class MotifApp {
       }
     });
 
-    // Preview player (row buttons in results table)
+    // Preview MIDI (verification only)
+    this.previewBtn.addEventListener('click', () => void this.handlePreviewMIDI());
     this.soundfontVolumeSlider.addEventListener('input', (e) => {
       const volume = parseFloat((e.target as HTMLInputElement).value);
       this.soundfontPlayer?.setVolume(volume);
@@ -256,7 +258,7 @@ class MotifApp {
     // Stop any playing Motif audio
     this.handleMotifStop();
 
-    this.updateStatus('Searching for MIDI files...');
+    this.updateStatus('Searching…');
     this.searchBtn.disabled = true;
     this.hideResults();
 
@@ -281,7 +283,7 @@ class MotifApp {
       }
 
       this.displayResults();
-      this.updateStatus(`Found ${results.length} MIDI files. Select one to play.`);
+      this.updateStatus('Pick a source to use.');
       this.updateIOSAudioBanner();
 
     } catch (error) {
@@ -293,95 +295,31 @@ class MotifApp {
 
   private displayResults(): void {
     this.resultsBody.innerHTML = '';
-    this.previewButtons = [];
 
     this.searchResults.forEach((result, index) => {
       const row = document.createElement('tr');
-      if (index === this.selectedResultIndex) {
-        row.classList.add('selected');
-      }
-
       row.innerHTML = `
-        <td>${result.title}</td>
-        <td class="source-col">${result.source}</td>
-        <td class="duration-col">${result.parsed ? Math.round(result.parsed.durationSec) + 's' : '?'}</td>
-        <td class="preview-col"><button type="button" class="row-preview-btn">Play</button></td>
+        <td>${this.cleanSongTitle(result.title)}</td>
+        <td class="source-col">${this.formatSourceLabel(result.source)}</td>
+        <td class="duration-col">${this.formatDuration(result.parsed?.durationSec)}</td>
+        <td class="action-col"><button type="button" class="row-use-btn">Use this</button></td>
       `;
 
-      // Make entire row clickable
-      row.addEventListener('click', () => this.selectResult(index));
-
-      const btn = row.querySelector('button.row-preview-btn') as HTMLButtonElement;
-      btn.addEventListener('click', (e) => {
+      // Use explicit action button to reduce accidental selection
+      const useBtn = row.querySelector('button.row-use-btn') as HTMLButtonElement;
+      useBtn.addEventListener('click', (e) => {
         e.stopPropagation();
-        void this.handleRowPreview(index);
+        void this.selectResult(index);
       });
-      this.previewButtons[index] = btn;
 
       this.resultsBody.appendChild(row);
     });
 
     this.resultsSection.classList.add('visible');
+    this.resultsSection.classList.remove('collapsed');
+    this.playerSection.classList.remove('visible');
 
-    // Auto-select first result
-    if (this.searchResults.length > 0) {
-      this.selectResult(0);
-    }
-  }
-
-  private updatePreviewButtons(): void {
-    for (let i = 0; i < this.previewButtons.length; i++) {
-      const btn = this.previewButtons[i];
-      if (!btn) continue;
-      btn.textContent = this.playingPreviewIndex === i ? 'Stop' : 'Play';
-    }
-  }
-
-  private async handleRowPreview(index: number): Promise<void> {
-    if (this.playingPreviewIndex === index) {
-      this.stopPreview(true);
-      return;
-    }
-
-    // Stop any existing preview first
-    this.stopPreview(false);
-
-    // Ensure this MIDI is selected/loaded (also satisfies iOS user-gesture unlock path)
-    await this.selectResult(index);
-
-    try {
-      const player = await this.ensureAudioReady();
-      player.setVolume(parseFloat(this.soundfontVolumeSlider.value));
-      await player.play();
-
-      this.playingPreviewIndex = index;
-      this.updatePreviewButtons();
-      this.updateStatus('Previewing MIDI…');
-
-      // Best-effort: reset UI after playback ends (SoundfontMIDIPlayer self-stops)
-      const duration = player.getDuration();
-      if (this.previewStopTimeout) window.clearTimeout(this.previewStopTimeout);
-      this.previewStopTimeout = window.setTimeout(() => {
-        if (this.playingPreviewIndex === index) {
-          this.stopPreview(false);
-          this.updateStatus('Preview finished.');
-        }
-      }, Math.max(0.5, duration + 0.5) * 1000);
-    } catch (error) {
-      this.updateStatus(`Preview error: ${error instanceof Error ? error.message : 'Unknown error'}`);
-      this.stopPreview(false);
-    }
-  }
-
-  private stopPreview(updateStatus: boolean): void {
-    if (this.previewStopTimeout) {
-      window.clearTimeout(this.previewStopTimeout);
-      this.previewStopTimeout = null;
-    }
-    this.soundfontPlayer?.stop();
-    this.playingPreviewIndex = null;
-    this.updatePreviewButtons();
-    if (updateStatus) this.updateStatus('Preview stopped.');
+    // No auto-select: user should choose "Use this"
   }
 
   public async selectResult(index: number): Promise<void> {
@@ -390,7 +328,7 @@ class MotifApp {
     // Stop any playing Motif audio
     this.handleMotifStop();
     // Stop any playing preview audio
-    this.stopPreview(false);
+    this.soundfontPlayer?.stop();
 
     this.selectedResultIndex = index;
     const result = this.searchResults[index];
@@ -401,7 +339,7 @@ class MotifApp {
       row.classList.toggle('selected', i === index);
     });
     
-    this.updateStatus('Loading MIDI file...');
+    this.updateStatus('Loading…');
     this.disablePlayerControls();
 
     try {
@@ -423,38 +361,61 @@ class MotifApp {
 
       this.currentMIDI = { events, metadata: { ...metadata, duration: actualDuration } };
 
-      // Load into preview player (ensure audio unlocked on iOS)
-      const player = await this.ensureAudioReady();
-      await player.load(events);
-      player.setVolume(parseFloat(this.soundfontVolumeSlider.value));
-
       // Update UI
-      this.selectedTitle.textContent = result.title;
-      this.selectedMeta.innerHTML = `
-        <strong>Source:</strong> ${result.source} |
-        <strong>Duration:</strong> ${Math.round(actualDuration)}s |
-        <strong>Tracks:</strong> ${metadata.trackCount} |
-        <strong>Notes:</strong> ${events.length} |
-        <strong>Tempo:</strong> ${metadata.tempo}bpm
-      `;
+      const displayTitle = this.cleanSongTitle(result.title);
+      this.selectedTitle.textContent = displayTitle;
+      this.selectedMeta.textContent = `Source: ${this.formatSourceLabel(result.source)} · Length: ${this.formatDuration(actualDuration)} · Notes: ${events.length}`;
+
+      // Optional details (hidden behind toggle)
+      const detailParts: string[] = [];
+      const trackCount = Number(metadata.trackCount);
+      const tempo = Number(metadata.tempo);
+      const duration = Number(actualDuration);
+      if (Number.isFinite(trackCount) && trackCount > 0) detailParts.push(`Tracks: ${trackCount}`);
+      if (Number.isFinite(tempo) && tempo > 0) detailParts.push(`Tempo: ${Math.round(tempo)} bpm`);
+      if (Number.isFinite(duration) && duration > 0) detailParts.push(`Length: ${this.formatDuration(duration)}`);
+      detailParts.push(`Notes: ${events.length}`);
+      this.selectedDetails.textContent = detailParts.join(' · ');
 
       this.updateEmbedSnippet(result.title);
       this.updateIOSAudioBanner();
       
       this.playerSection.classList.add('visible');
+      this.resultsSection.classList.add('collapsed');
       this.enablePlayerControls();
-      this.updateStatus('MIDI loaded. You can now preview or generate.');
+      this.updateStatus('');
 
     } catch (error) {
       this.updateStatus(`Load error: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
   }
 
+  private async handlePreviewMIDI(): Promise<void> {
+    if (!this.currentMIDI) return;
+    try {
+      this.previewBtn.disabled = true;
+      const prevLabel = this.previewBtn.textContent || 'Preview MIDI';
+      this.previewBtn.textContent = 'Previewing…';
+
+      const player = await this.ensureAudioReady();
+      await player.load(this.currentMIDI.events);
+      player.setVolume(parseFloat(this.soundfontVolumeSlider.value));
+      await player.play();
+
+      const duration = player.getDuration();
+      window.setTimeout(() => {
+        this.previewBtn.disabled = false;
+        this.previewBtn.textContent = prevLabel;
+      }, Math.max(0.5, duration + 0.25) * 1000);
+    } catch {
+      this.previewBtn.disabled = false;
+      this.previewBtn.textContent = 'Preview MIDI';
+    }
+  }
+
   // Motif handlers
   private async handleMotif(): Promise<void> {
-    console.log('Motif Generate & Play button clicked');
     if (!this.currentMIDI) {
-      console.error('No MIDI loaded');
       return;
     }
 
@@ -463,14 +424,12 @@ class MotifApp {
       await unlockAudio();
       this.updateIOSAudioBanner();
 
-      this.updateStatus('Generating Motif synthesis...');
+      this.updateStatus('Generating…');
       this.motifBtn.disabled = true;
 
-      console.log('Calling generateFromMIDI with', this.currentMIDI.events.length, 'events');
       // Generate a variation using the procedural role-mapping mode
       await this.motifEngine.generateFromMIDI(this.currentMIDI.events, 'procedural');
 
-      console.log('Calling motifEngine.play()');
       await this.motifEngine.play();
 
       this.motifStopBtn.disabled = false;
@@ -485,10 +444,8 @@ class MotifApp {
       // Start progress updates
       this.startMotifProgressUpdates();
 
-      this.updateStatus('Playing Motif synthesis...');
-      console.log('Motif playback started successfully');
+      this.updateStatus('');
     } catch (error) {
-      console.error('Motif error:', error);
       this.updateStatus(`Motif error: ${error instanceof Error ? error.message : 'Unknown error'}`);
       this.motifBtn.disabled = false;
     }
@@ -499,7 +456,7 @@ class MotifApp {
     this.motifBtn.disabled = false;
     this.motifStopBtn.disabled = true;
     this.stopMotifProgressUpdates();
-    this.updateStatus('Motif synthesis stopped.');
+    this.updateStatus('');
   }
 
   private handleMotifSeek(progress: number): void {
@@ -536,6 +493,50 @@ class MotifApp {
     return `${mins}:${secs.toString().padStart(2, '0')}`;
   }
 
+  private titleCase(input: string): string {
+    const small = new Set([
+      'a', 'an', 'and', 'as', 'at', 'but', 'by', 'for', 'from', 'in', 'into',
+      'nor', 'of', 'on', 'or', 'per', 'the', 'to', 'via', 'with',
+    ]);
+    const words = (input || '')
+      .split(/\s+/g)
+      .filter(Boolean)
+      .map((w) => w.trim());
+    return words
+      .map((word, idx) => {
+        if (/^[A-Z0-9]+$/.test(word)) return word;
+        const lower = word.toLowerCase();
+        if (idx !== 0 && small.has(lower)) return lower;
+        return lower.charAt(0).toUpperCase() + lower.slice(1);
+      })
+      .join(' ');
+  }
+
+  private cleanSongTitle(raw: string): string {
+    const cleaned = (raw || '')
+      .replace(/\.mid$/i, '')
+      .replace(/[_]+/g, ' ')
+      .replace(/[.]+/g, ' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+    return this.titleCase(cleaned || 'Unknown');
+  }
+
+  private formatDuration(secondsMaybe: any): string {
+    const seconds = Number(secondsMaybe);
+    if (!Number.isFinite(seconds) || seconds <= 0) return '—';
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  }
+
+  private formatSourceLabel(source: string): string {
+    const s = String(source || '').toLowerCase();
+    if (s === 'bitmidi') return 'BitMidi';
+    if (s === 'dongrays') return 'Dongrays';
+    return this.titleCase(s);
+  }
+
   private hideResults(): void {
     this.resultsSection.classList.remove('visible');
     this.playerSection.classList.remove('visible');
@@ -543,11 +544,13 @@ class MotifApp {
 
   private enablePlayerControls(): void {
     this.motifBtn.disabled = false;
-    this.copyLinkBtn.disabled = this.searchResults.length === 0;
+    this.previewBtn.disabled = false;
+    this.copyLinkBtn.disabled = this.currentMIDI == null;
   }
 
   private disablePlayerControls(): void {
     this.motifBtn.disabled = true;
+    this.previewBtn.disabled = true;
     this.motifStopBtn.disabled = true;
     this.copyLinkBtn.disabled = true;
   }
@@ -627,9 +630,13 @@ class MotifApp {
     try {
       this.copyLinkBtn.disabled = true;
       await this.copyToClipboard(shareUrl);
-      this.updateStatus('Link copied.');
+      const prev = this.copyLinkBtn.textContent || 'Copy link';
+      this.copyLinkBtn.textContent = 'Copied';
+      window.setTimeout(() => {
+        this.copyLinkBtn.textContent = prev;
+      }, 900);
     } catch {
-      this.updateStatus('Copy failed.');
+      // keep quiet; clipboard can fail in some contexts
     } finally {
       this.copyLinkBtn.disabled = false;
     }