Add builds card to frontend

frontend/src/App.svelte

@@ -1,7 +1,7 @@
 <script>
     import { onMount } from 'svelte';
     import { API_BASE, ENABLE_POLLING } from './config';
-    import { getCiStatus, getMenu, getPrices } from './services/api';
+    import { getBuildHistory, getCiStatus, getMenu, getPrices } from './services/api';
     import { prettify } from './utils/text';
 
     let menu = null;
@@ -11,6 +11,8 @@
     let errorMessage = '';
     let ciStatus = null;
     let loadingCiStatus = true;
+    let buildHistory = [];
+    let loadingHistory = true;
 
     async function fetchMenu() {
         loadingMenu = true;
@@ -45,8 +47,20 @@
         }
     }
 
+    async function fetchBuildHistory() {
+        loadingHistory = true;
+        try {
+            const history = await getBuildHistory();
+            buildHistory = history.builds || [];
+        } catch (error) {
+            errorMessage = `No pudimos leer el historial CI: ${error.message}`;
+        } finally {
+            loadingHistory = false;
+        }
+    }
+
     async function loadInitialData() {
-        await Promise.all([fetchMenu(), fetchPrices(), fetchCiStatus()]);
+        await Promise.all([fetchMenu(), fetchPrices(), fetchCiStatus(), fetchBuildHistory()]);
     }
     onMount(() => {
         loadInitialData();
@@ -55,10 +69,12 @@
 
         const pricesInterval = setInterval(fetchPrices, 8000);
         const ciInterval = setInterval(fetchCiStatus, 10000);
+        const historyInterval = setInterval(fetchBuildHistory, 15000);
 
         return () => {
             clearInterval(pricesInterval);
             clearInterval(ciInterval);
+            clearInterval(historyInterval);
         };
     });
 </script>
@@ -246,6 +262,63 @@
             {/if}
         </article>
 
+        <article class="card history-card">
+            <div class="card-head">
+                <div>
+                    <p class="label">Historial</p>
+                    <p class="sub">Builds recientes en Jenkins</p>
+                </div>
+                {#if loadingHistory}
+                    <span class="tag">actualizando...</span>
+                {/if}
+            </div>
+
+            {#if buildHistory.length}
+                <div class="history-list">
+                    {#each buildHistory as build}
+                        <details class={`history-item ${build.status}`} open={build === buildHistory[0]}>
+                            <summary>
+                                <div class="summary-left">
+                                    <span class={`status-dot ${build.status}`}></span>
+                                    <span class="summary-title">#{build.number}</span>
+                                    <span class="summary-branch">{build.branch}</span>
+                                </div>
+                                <div class="summary-meta">
+                                    <span class="mono">#{build.commit}</span>
+                                    <span>{build.finished_at}</span>
+                                </div>
+                            </summary>
+                            <div class="history-body">
+                                <p class="history-row">
+                                    <span>Autor</span>
+                                    <span>{build.author}</span>
+                                </p>
+                                <p class="history-row">
+                                    <span>Duración</span>
+                                    <span>{build.duration_seconds} s</span>
+                                </p>
+                                {#if build.status === 'failed'}
+                                    <p class="history-row">
+                                        <span>Stage</span>
+                                        <span class="chip danger">{build.failed_stage}</span>
+                                    </p>
+                                    <p class="history-message">
+                                        {build.fun_message}
+                                    </p>
+                                {:else}
+                                    <p class="history-message success">
+                                        Correcto
+                                    </p>
+                                {/if}
+                            </div>
+                        </details>
+                    {/each}
+                </div>
+            {:else if !loadingHistory}
+                <p>No hay builds registradas aún.</p>
+            {/if}
+        </article>
+
         <article class="card">
             <div class="card-head">
                 <div class="label">Desayunos</div>