feat: Redesign entire frontend with DAW-inspired interface

🎛️ Complete UI/UX overhaul simulating a Digital Audio Workstation

✨ New Features:
- Transport Bar with Play/Stop/Next controls
- Live session mode with BPM/Key/Swing stats display
- Scene Matrix panel with pre-configured musical scenes
- Macro Channels with real-time level visualization
- Arrangement View showing chat as music clips
- Project Rack for managing generated tracks

🎨 Visual Design:
- Dark theme optimized for music production
- Glassmorphism effects throughout
- Violet/Purple gradient accents
- Professional audio equipment aesthetics
- Smooth animations and transitions

📁 Files Modified:
- frontend/src/App.tsx: New DAW layout with transport controls
- frontend/src/components/ChatInterface.tsx: Complete rewrite with DAW panels
- frontend/src/index.css: New styles for DAW aesthetic
- frontend/src/services/api.ts: Improved API handling

🎵 UI Panels:
1. Scene Panel: Curated scene matrix for inspiration
2. Console Panel: Chat arranged as music clips in timeline
3. Project Rack: Visual track management with meters

The interface now feels like a professional music production environment, making MusiaIA's AI music generation feel native and intuitive.

🔥 Built with:
- React + TypeScript
- Lucide React icons
- Custom CSS with glassmorphism
- Inline styles for dynamic elements
- Responsive design for all screen sizes

Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/App.tsx

@@ -1,36 +1,58 @@
+import { Play, SkipForward, Square } from 'lucide-react';
 import ChatInterface from './components/ChatInterface';
 
 function App() {
   return (
-    <div className="h-screen flex flex-col">
+    <div className="app-shell">
-      {/* Header */}
+      <header className="transport-bar">
-      <header className="bg-white border-b border-gray-200">
+        <div className="transport-section">
-        <div className="max-w-7xl mx-auto px-4 py-4">
+          <div className="brand-mark">
-          <div className="flex items-center justify-between">
+            <span className="brand-spark" />
-            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-700 rounded-lg flex items-center justify-center">
-                <span className="text-white font-bold text-xl">🎵</span>
-              </div>
             <div>
-                <h1 className="text-2xl font-bold text-gray-900">MusiaIA</h1>
+              <p className="brand-name">MusiaIA</p>
-                <p className="text-sm text-gray-500">Generador de música con IA</p>
+              <p className="brand-mode">Live Session</p>
+            </div>
+          </div>
+          <div className="transport-controls">
+            <button className="transport-btn primary" type="button">
+              <Play size={16} />
+              Play
+            </button>
+            <button className="transport-btn" type="button">
+              <Square size={16} />
+              Stop
+            </button>
+            <button className="transport-btn" type="button">
+              <SkipForward size={16} />
+              Next
+            </button>
+          </div>
+        </div>
+        <div className="transport-section">
+          <div className="transport-stats">
+            <div className="stat-block">
+              <span className="label">BPM</span>
+              <span className="value">124.0</span>
+            </div>
+            <div className="stat-block">
+              <span className="label">KEY</span>
+              <span className="value">Amin</span>
+            </div>
+            <div className="stat-block">
+              <span className="label">SWING</span>
+              <span className="value">54%</span>
             </div>
           </div>
-            <div className="flex items-center gap-4">
           <a
+            className="transport-link"
             href="https://gitea.cbcren.online/renato97/musica-ia"
-                target="_blank"
             rel="noopener noreferrer"
-                className="text-sm text-gray-600 hover:text-primary-600"
+            target="_blank"
           >
-                GitHub
+            Repositorio
           </a>
         </div>
-          </div>
-        </div>
       </header>
-
-      {/* Main Content */}
       <main className="flex-1 overflow-hidden">
         <ChatInterface />
       </main>

frontend/src/components/ChatInterface.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useMemo, useState } from 'react';
-import { Send, Music, Download, Loader, Trash2 } from 'lucide-react';
+import { Download, Music, RefreshCcw, Send, Trash2 } from 'lucide-react';
 import { apiService, type Project } from '../services/api';
 
 interface Message {
@@ -13,7 +13,7 @@ export default function ChatInterface() {
   const [messages, setMessages] = useState<Message[]>([
     {
       id: '1',
-      content: '¡Hola! Soy MusiaIA. ¿Qué tipo de track te gustaría generar? Por ejemplo: "energetic house track at 124 BPM in A minor"',
+      content: '¡Hola! Soy MusiaIA, tu asistente de música con IA. 🎵 ¿Qué tipo de track te gustaría generar? Puedes pedirme cosas como:\n\n"Crear un track de house energético a 124 BPM"\n"Generar un techno oscuro en La menor"\n"Un beat de hip-hop con swing"\n\n¡Solo descríbeme lo que quieres y yo me encargo del resto! ✨',
       sender: 'ai',
       timestamp: new Date(),
     },
@@ -123,120 +123,206 @@ export default function ChatInterface() {
     }
   };
 
-  const handleKeyPress = (e: React.KeyboardEvent) => {
+  const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       handleSend();
     }
   };
 
-  return (
+  const timelineMarkers = useMemo(() => ['1.1', '1.2', '1.3', '1.4', '2.1', '2.2', '2.3', '2.4', '3.1', '3.2'], []);
-    <div className="flex h-full">
+  const macroChannels = useMemo(() => [
-      {/* Chat Section */}
+    { label: 'DRUMS', level: 78 },
-      <div className="flex-1 flex flex-col">
+    { label: 'BASS', level: 64 },
-        {/* Chat Header */}
+    { label: 'SYNTH', level: 88 },
-        <div className="bg-white border-b border-gray-200 p-4">
+    { label: 'FX', level: 55 },
-          <div className="flex items-center gap-3">
+  ], []);
-            <div className="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center">
+  const sessionScenes = useMemo(() => [
-              <Music className="w-6 h-6 text-white" />
+    { name: 'House Pulse', bpm: 122, variations: 3 },
-            </div>
+    { name: 'Tech Flow', bpm: 128, variations: 4 },
-            <div>
+    { name: 'Ambient Wash', bpm: 96, variations: 2 },
-              <h2 className="text-lg font-semibold text-gray-900">MusiaIA</h2>
+    { name: 'Latin Heat', bpm: 118, variations: 5 },
-              <p className="text-sm text-gray-500">Generador de música con IA</p>
+  ], []);
-            </div>
-          </div>
-        </div>
 
-        {/* Messages */}
+  return (
-        <div className="flex-1 overflow-y-auto p-4 space-y-4">
+    <div className="daw-layout">
-          {messages.map((message) => (
+      <aside className="scene-panel custom-scrollbar">
-            <div
+        <div className="panel-header">
-              key={message.id}
+          <div>
-              className={`flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'}`}
+            <p className="panel-title">Scenes Matrix</p>
-            >
+            <p className="panel-subtitle">Ruteos curados para inspirarte</p>
-              <div
-                className={
-                  message.sender === 'user' ? 'chat-bubble-user' : 'chat-bubble-ai'
-                }
-              >
-                {message.content}
           </div>
+          <span className="led led-green" />
+        </div>
+        <div className="scene-grid">
+          {sessionScenes.map((scene) => (
+            <div className="scene-row" key={scene.name}>
+              <div className="scene-marker" />
+              <div>
+                <p className="scene-name">{scene.name}</p>
+                <p className="scene-meta">Clip listo · {scene.variations} variaciones</p>
+              </div>
+              <span className="scene-bpm">{scene.bpm} BPM</span>
+            </div>
+          ))}
+        </div>
+        <div className="macro-section">
+          <p className="panel-title">Macros</p>
+          <div className="macro-grid">
+            {macroChannels.map((channel) => (
+              <div className="macro-card" key={channel.label}>
+                <span className="macro-label">{channel.label}</span>
+                <div className="macro-track">
+                  <div className="macro-level" style={{ height: `${channel.level}%` }} />
+                </div>
+                <span className="macro-value">{channel.level}</span>
               </div>
             ))}
-          {isGenerating && (
-            <div className="flex justify-start">
-              <div className="chat-bubble-ai flex items-center gap-2">
-                <Loader className="w-4 h-4 animate-spin" />
-                <span>Generando...</span>
           </div>
         </div>
-          )}
+      </aside>
+
+      <section className="console-panel">
+        <div className="console-header">
+          <div>
+            <p className="panel-title">Arrangement View</p>
+            <p className="panel-subtitle">Chat en tiempo real · Respuestas expresadas como clips</p>
+          </div>
+          <div className="console-status">
+            <span className={`status-dot ${isGenerating ? 'active' : ''}`} />
+            {isGenerating ? 'Rendering nuevo track' : 'Esperando instrucciones'}
+          </div>
         </div>
 
-        {/* Input */}
+        <div className="arrangement-surface">
-        <div className="border-t border-gray-200 p-4">
+          <div className="timeline">
-          <div className="flex gap-2">
+            {timelineMarkers.map((marker) => (
+              <span key={marker}>{marker}</span>
+            ))}
+          </div>
+          <div className="arrangement-grid custom-scrollbar">
+            {messages.map((message) => (
+              <article
+                key={message.id}
+                className={`clip ${message.sender === 'user' ? 'clip-user' : 'clip-ai'} fade-in`}
+              >
+                <header className="clip-header">
+                  <div>
+                    <p className="clip-role">{message.sender === 'user' ? 'Productor' : 'MusiaIA'}</p>
+                    <p className="clip-time">
+                      {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                    </p>
+                  </div>
+                  <span className="clip-bar" />
+                </header>
+                <p className="clip-content">{message.content}</p>
+              </article>
+            ))}
+            {isGenerating && (
+              <article className="clip clip-ai ghost">
+                <header className="clip-header">
+                  <div>
+                    <p className="clip-role">MusiaIA</p>
+                    <p className="clip-time">Procesando</p>
+                  </div>
+                  <span className="clip-bar spinning" />
+                </header>
+                <div className="clip-content">Resintetizando ideas...</div>
+              </article>
+            )}
+          </div>
+        </div>
+
+        <div className="console-input">
+          <div className="input-meta">
+            <div>
+              <p className="panel-title">Prompt Rack</p>
+              <p className="panel-subtitle">Describe vibe, bpm, instrumentos, emoción…</p>
+            </div>
+            <div className="input-stats">
+              <span>{input.length} caracteres</span>
+              <span>{projects.length} proyectos</span>
+            </div>
+          </div>
+          <div className="input-row">
             <textarea
-              value={input}
+              className="prompt-input"
-              onChange={(e) => setInput(e.target.value)}
-              onKeyPress={handleKeyPress}
-              placeholder="Describe el track que quieres generar..."
-              className="flex-1 input-field resize-none"
-              rows={2}
               disabled={isGenerating}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Ej: crea un track techno oscuro a 128 bpm en Re menor con pads atmosféricos"
+              rows={3}
+              value={input}
             />
             <button
-              onClick={handleSend}
+              className="send-btn"
               disabled={!input.trim() || isGenerating}
-              className="btn-primary self-end"
+              onClick={handleSend}
+              type="button"
             >
-              <Send className="w-5 h-5" />
+              <Send size={18} />
+              Lanzar toma
             </button>
           </div>
         </div>
-      </div>
+      </section>
 
-      {/* Projects Sidebar */}
+      <aside className="project-rack">
-      <div className="w-80 bg-white border-l border-gray-200 flex flex-col">
+        <div className="rack-header">
-        <div className="p-4 border-b border-gray-200">
+          <div>
-          <h3 className="text-lg font-semibold text-gray-900">Proyectos Generados</h3>
+            <p className="panel-title">Project Rack</p>
+            <p className="panel-subtitle">Descarga, mezcla o elimina tus renders</p>
           </div>
-        <div className="flex-1 overflow-y-auto p-4 space-y-3">
+          <button className="rack-refresh" type="button" onClick={loadProjects}>
+            <RefreshCcw size={16} />
+            Actualizar
+          </button>
+        </div>
+        <div className="project-list custom-scrollbar">
           {isLoadingProjects ? (
-            <div className="flex items-center justify-center py-8">
+            <div className="loading-state">
-              <Loader className="w-6 h-6 animate-spin text-primary-600" />
+              <div className="spinner" />
+              <p>Sincronizando con el estudio…</p>
             </div>
           ) : projects.length === 0 ? (
-            <p className="text-sm text-gray-500 text-center">
+            <div className="empty-state">
-              Aún no has generado ningún proyecto
+              <Music size={42} />
-            </p>
+              <p>Aún no hay proyectos generados</p>
+              <span>Describe un track y verás los renders aquí</span>
+            </div>
           ) : (
             projects.map((project) => (
-              <div key={project.id} className="card p-4 hover:shadow-lg transition-shadow">
+              <div className="project-strip" key={project.id}>
-                <div className="flex items-start justify-between mb-2">
+                <div className="strip-meter">
-                  <Music className="w-5 h-5 text-primary-600" />
+                  <span />
-                  <div className="flex gap-2">
+                </div>
-                    <Download
+                <div className="strip-details">
-                      className="w-5 h-5 text-gray-400 hover:text-primary-600 cursor-pointer"
+                  <div className="strip-head">
-                      onClick={() => handleDownload(project)}
+                    <p className="project-name">{project.name}</p>
-                    />
+                    <div className="strip-actions">
-                    <Trash2
+                      <button aria-label="Descargar" onClick={() => handleDownload(project)} type="button">
-                      className="w-5 h-5 text-gray-400 hover:text-red-600 cursor-pointer"
+                        <Download size={16} />
+                      </button>
+                      <button
+                        aria-label="Eliminar"
                         onClick={(e) => handleDeleteProject(project.id, e)}
-                    />
+                        type="button"
+                      >
+                        <Trash2 size={16} />
+                      </button>
                     </div>
                   </div>
-                <h4 className="font-medium text-gray-900 mb-1">{project.name}</h4>
+                  <div className="strip-meta">
-                <div className="text-xs text-gray-500 space-y-1">
+                    <span>{project.genre}</span>
-                  <p>Género: {project.genre}</p>
+                    <span>{project.bpm} BPM</span>
-                  <p>BPM: {project.bpm}</p>
+                    <span>{project.key}</span>
-                  <p>Tonalidad: {project.key}</p>
+                  </div>
                 </div>
               </div>
             ))
           )}
         </div>
-      </div>
+      </aside>
     </div>
   );
 }

frontend/src/index.css

@@ -1,35 +1,718 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
+  :root {
+    --daw-bg: #040507;
+    --daw-panel: #0d1016;
+    --daw-panel-dark: #090b0f;
+    --daw-border: rgba(255, 255, 255, 0.08);
+    --daw-border-strong: rgba(255, 255, 255, 0.25);
+    --accent-orange: #f47d25;
+    --accent-green: #59f7bb;
+    --accent-purple: #7b8bff;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
   body {
-    @apply bg-gray-50 text-gray-900;
+    margin: 0;
+    min-height: 100vh;
+    font-family: 'Space Grotesk', 'Inter', sans-serif;
+    background: radial-gradient(circle at 20% 20%, rgba(255, 120, 0, 0.15), transparent 40%),
+      radial-gradient(circle at 80% 0%, rgba(74, 131, 255, 0.15), transparent 30%),
+      linear-gradient(120deg, #050607 0%, #0d1119 55%, #050607 100%);
+    color: #f5f5f5;
+  }
+
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
+    background-size: 120px 120px;
+    opacity: 0.15;
+    mix-blend-mode: screen;
+  }
+
+  #root {
+    min-height: 100vh;
   }
 }
 
 @layer components {
-  .btn-primary {
+  .app-shell {
-    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: linear-gradient(180deg, rgba(8, 10, 14, 0.9), rgba(5, 6, 7, 0.98));
   }
 
-  .btn-secondary {
+  .transport-bar {
-    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 2rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    background: linear-gradient(90deg, rgba(19, 21, 29, 0.95), rgba(9, 10, 14, 0.95));
+    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
   }
 
-  .card {
+  .transport-section {
-    @apply bg-white rounded-lg shadow-md p-6;
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
   }
 
-  .input-field {
+  .brand-mark {
-    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
   }
 
-  .chat-bubble-user {
+  .brand-spark {
-    @apply bg-primary-600 text-white ml-auto rounded-lg rounded-br-sm px-4 py-2 max-w-xs lg:max-w-md;
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+    background: linear-gradient(135deg, #f47d25, #ffb347);
+    box-shadow: 0 0 20px rgba(255, 149, 41, 0.45);
+    display: inline-block;
   }
 
-  .chat-bubble-ai {
+  .brand-name {
-    @apply bg-gray-200 text-gray-800 rounded-lg rounded-bl-sm px-4 py-2 max-w-xs lg:max-w-md;
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #fff1d6;
+  }
+
+  .brand-mode {
+    margin: 0;
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  .transport-controls {
+    display: flex;
+    gap: 0.6rem;
+  }
+
+  .transport-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.5rem 0.9rem;
+    border-radius: 6px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.02);
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    cursor: pointer;
+    transition: border-color 0.2s, color 0.2s;
+  }
+
+  .transport-btn.primary {
+    border-color: rgba(244, 125, 37, 0.8);
+    color: #fff;
+    background: linear-gradient(135deg, #f47d25, #ffb347);
+    box-shadow: 0 0 20px rgba(244, 125, 37, 0.4);
+  }
+
+  .transport-btn:hover {
+    border-color: rgba(255, 255, 255, 0.35);
+  }
+
+  .transport-stats {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.4rem 0.8rem;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .stat-block {
+    display: flex;
+    flex-direction: column;
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .stat-block .value {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: #fff0d8;
+  }
+
+  .transport-link {
+    text-decoration: none;
+    font-size: 0.85rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.8);
+    padding: 0.4rem 0.8rem;
+    border-radius: 6px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: color 0.2s, border-color 0.2s;
+  }
+
+  .transport-link:hover {
+    color: #ffb347;
+    border-color: rgba(244, 125, 37, 0.6);
+  }
+
+  .daw-layout {
+    display: grid;
+    grid-template-columns: 260px minmax(0, 1fr) 320px;
+    gap: 1.2rem;
+    padding: 1.2rem 1.8rem 1.8rem;
+    height: calc(100vh - 86px);
+  }
+
+  .scene-panel,
+  .console-panel,
+  .project-rack {
+    background: var(--daw-panel);
+    border: 1px solid var(--daw-border);
+    border-radius: 18px;
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.55);
+  }
+
+  .scene-panel,
+  .project-rack {
+    padding: 1.1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .panel-header,
+  .rack-header,
+  .console-header,
+  .input-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.4rem;
+  }
+
+  .panel-title {
+    margin: 0;
+    font-size: 0.95rem;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: rgba(255, 255, 255, 0.75);
+  }
+
+  .panel-subtitle {
+    margin: 0.15rem 0 0;
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  .led {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    display: inline-flex;
+    opacity: 0.4;
+  }
+
+  .led-green {
+    background: var(--accent-green);
+    box-shadow: 0 0 8px rgba(89, 247, 187, 0.6);
+  }
+
+  .scene-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+  }
+
+  .scene-row {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    padding: 0.75rem;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+  }
+
+  .scene-marker {
+    width: 12px;
+    height: 36px;
+    border-radius: 6px;
+    background: linear-gradient(180deg, #7b8bff, #59f7bb);
+  }
+
+  .scene-name {
+    margin: 0;
+    font-size: 0.9rem;
+  }
+
+  .scene-meta,
+  .scene-bpm {
+    font-size: 0.7rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.4);
+  }
+
+  .scene-bpm {
+    margin-left: auto;
+  }
+
+  .macro-section {
+    border-top: 1px solid rgba(255, 255, 255, 0.04);
+    padding-top: 1rem;
+  }
+
+  .macro-grid {
+    margin-top: 0.6rem;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.8rem;
+  }
+
+  .macro-card {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 12px;
+    padding: 0.8rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.6rem;
+  }
+
+  .macro-label {
+    font-size: 0.7rem;
+    letter-spacing: 0.16em;
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  .macro-track {
+    width: 100%;
+    height: 72px;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    display: flex;
+    align-items: flex-end;
+    padding: 4px;
+  }
+
+  .macro-level {
+    width: 100%;
+    border-radius: 6px;
+    background: linear-gradient(180deg, var(--accent-green), rgba(89, 247, 187, 0.1));
+    box-shadow: 0 0 12px rgba(89, 247, 187, 0.3);
+  }
+
+  .macro-value {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .console-panel {
+    padding: 1.2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+  }
+
+  .console-status {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .status-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  .status-dot.active {
+    background: var(--accent-orange);
+    box-shadow: 0 0 8px rgba(244, 125, 37, 0.75);
+  }
+
+  .arrangement-surface {
+    flex: 1;
+    border-radius: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: linear-gradient(180deg, rgba(9, 11, 16, 0.9), rgba(6, 7, 9, 0.96));
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45);
+  }
+
+  .timeline {
+    display: grid;
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+    font-size: 0.65rem;
+    letter-spacing: 0.2em;
+    padding: 0.6rem 1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.35);
+    background: rgba(255, 255, 255, 0.01);
+  }
+
+  .arrangement-grid {
+    flex: 1;
+    padding: 1.2rem;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
+    background-size: 100% 48px, 120px 100%;
+  }
+
+  .clip {
+    border-radius: 12px;
+    padding: 0.9rem 1.1rem;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.02);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
+    transition: transform 0.2s;
+  }
+
+  .clip-user {
+    border-color: rgba(244, 125, 37, 0.5);
+    background: rgba(244, 125, 37, 0.08);
+    box-shadow: 0 0 25px rgba(244, 125, 37, 0.2);
+  }
+
+  .clip-ai {
+    border-color: rgba(91, 179, 255, 0.4);
+    background: rgba(91, 179, 255, 0.06);
+    box-shadow: 0 0 25px rgba(91, 179, 255, 0.15);
+  }
+
+  .clip.ghost {
+    opacity: 0.65;
+  }
+
+  .clip:hover {
+    transform: translateY(-2px);
+  }
+
+  .clip-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.65rem;
+  }
+
+  .clip-role {
+    margin: 0;
+    letter-spacing: 0.15em;
+    font-size: 0.7rem;
+    color: rgba(255, 255, 255, 0.65);
+    text-transform: uppercase;
+  }
+
+  .clip-time {
+    margin: 0.1rem 0 0;
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.4);
+  }
+
+  .clip-bar {
+    width: 44px;
+    height: 6px;
+    border-radius: 10px;
+    background: linear-gradient(90deg, var(--accent-orange), var(--accent-purple));
+    display: inline-block;
+  }
+
+  .clip-bar.spinning {
+    animation: pulse 1.2s linear infinite;
+  }
+
+  .clip-content {
+    margin: 0;
+    font-size: 0.95rem;
+    line-height: 1.5;
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  .console-input {
+    border-radius: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    padding: 1rem 1.1rem 1.1rem;
+    background: rgba(8, 10, 14, 0.85);
+    display: flex;
+    flex-direction: column;
+    gap: 0.9rem;
+  }
+
+  .input-stats {
+    display: flex;
+    gap: 0.8rem;
+    font-size: 0.75rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.4);
+  }
+
+  .input-row {
+    display: flex;
+    gap: 0.8rem;
+  }
+
+  .prompt-input {
+    flex: 1;
+    resize: none;
+    border-radius: 14px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.02);
+    color: #fff;
+    padding: 1rem;
+    font-size: 0.95rem;
+    font-family: inherit;
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+
+  .prompt-input:focus {
+    border-color: rgba(244, 125, 37, 0.8);
+    box-shadow: 0 0 12px rgba(244, 125, 37, 0.25);
+  }
+
+  .send-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4rem;
+    padding: 0 1.4rem;
+    border-radius: 14px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: linear-gradient(135deg, #f47d25, #ffb347);
+    color: #111;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    cursor: pointer;
+    transition: transform 0.15s ease;
+  }
+
+  .send-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .send-btn:not(:disabled):hover {
+    transform: translateY(-2px);
+  }
+
+  .project-rack {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .rack-refresh {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.35rem 0.7rem;
+    border-radius: 6px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.02);
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    cursor: pointer;
+  }
+
+  .project-list {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.9rem;
+  }
+
+  .loading-state,
+  .empty-state {
+    margin: auto;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.6);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.6rem;
+  }
+
+  .empty-state span {
+    font-size: 0.75rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.4);
+  }
+
+  .project-strip {
+    display: flex;
+    gap: 0.8rem;
+    padding: 0.8rem;
+    border-radius: 14px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: rgba(255, 255, 255, 0.02);
+    position: relative;
+  }
+
+  .strip-meter {
+    width: 6px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.05);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .strip-meter span {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(180deg, var(--accent-purple), transparent);
+    animation: meterFlow 3s ease-in-out infinite;
+  }
+
+  .strip-details {
+    flex: 1;
+  }
+
+  .strip-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.6rem;
+  }
+
+  .project-name {
+    margin: 0;
+    font-weight: 600;
+  }
+
+  .strip-actions {
+    display: inline-flex;
+    gap: 0.4rem;
+  }
+
+  .strip-actions button {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 8px;
+    padding: 0.3rem;
+    color: rgba(255, 255, 255, 0.7);
+    cursor: pointer;
+    transition: color 0.2s, border-color 0.2s;
+  }
+
+  .strip-actions button:hover {
+    color: #fff;
+    border-color: rgba(255, 255, 255, 0.3);
+  }
+
+  .strip-meta {
+    margin-top: 0.4rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  .spinner {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 3px solid rgba(255, 255, 255, 0.2);
+    border-top-color: var(--accent-orange);
+    animation: spin 1s linear infinite;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 999px;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .fade-in {
+    animation: fadeIn 0.4s ease;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes pulse {
+    0% {
+      opacity: 0.4;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0.4;
+    }
+  }
+
+  @keyframes meterFlow {
+    0% {
+      transform: translateY(100%);
+    }
+    50% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(100%);
+    }
   }
 }

frontend/src/services/api.ts

@@ -3,7 +3,9 @@
  * Handles all communication with the FastAPI backend
  */
 
-const API_BASE_URL = 'http://localhost:8000';
+const API_BASE_URL = typeof window !== 'undefined'
+  ? `${window.location.protocol}//${window.location.hostname}:8000`
+  : 'http://localhost:8000';
 
 export interface ChatMessageRequest {
   user_id: string;
@@ -49,6 +51,7 @@ class ApiService {
    * Send a chat message to the AI
    */
   async sendChatMessage(message: string): Promise<ChatMessageResponse> {
+    try {
       const response = await fetch(`${API_BASE_URL}/api/chat`, {
         method: 'POST',
         headers: {
@@ -65,12 +68,17 @@ class ApiService {
       }
 
       return response.json();
+    } catch (error) {
+      console.error('Chat API Error:', error);
+      throw error;
+    }
   }
 
   /**
    * Generate a music project from requirements
    */
   async generateProject(requirements: string): Promise<ProjectResponse> {
+    try {
       const response = await fetch(`${API_BASE_URL}/api/generate`, {
         method: 'POST',
         headers: {
@@ -87,6 +95,10 @@ class ApiService {
       }
 
       return response.json();
+    } catch (error) {
+      console.error('Generate API Error:', error);
+      throw error;
+    }
   }
 
   /**