Add real-time deployment updates and refactor JavaScript

- Add deploy stats (last deploy time, total count) to dashboard
- Add recent-deployments API endpoint for real-time updates
- Add live build logs to deployments history page
- Fix git clone regression (preserve entrypoint for simple clones)
- Refactor JavaScript into shared app.js with page init functions
- Deploy button disables immediately on click
- Auto-refresh deployment list and logs during builds
- Format JavaScript with Prettier (4-space indent)

templates/app_detail.html

@@ -290,7 +290,7 @@
                         <th>Commit</th>
                     </tr>
                 </thead>
-                <tbody class="table-body">
+                <tbody id="deployments-tbody" class="table-body">
                     {{range .Deployments}}
                     <tr>
                         <td class="text-gray-500">
@@ -343,157 +343,9 @@
 </main>
 
 <script>
-(function() {
-    // Relative time formatting
-    function formatRelativeTime(dateStr) {
-        const date = new Date(dateStr);
-        const now = new Date();
-        const diffMs = now - date;
-        const diffSec = Math.floor(diffMs / 1000);
-        const diffMin = Math.floor(diffSec / 60);
-        const diffHour = Math.floor(diffMin / 60);
-        const diffDay = Math.floor(diffHour / 24);
-
-        if (diffSec < 60) return 'just now';
-        if (diffMin < 60) return diffMin + (diffMin === 1 ? ' minute ago' : ' minutes ago');
-        if (diffHour < 24) return diffHour + (diffHour === 1 ? ' hour ago' : ' hours ago');
-        if (diffDay < 7) return diffDay + (diffDay === 1 ? ' day ago' : ' days ago');
-        return date.toLocaleDateString();
-    }
-
-    function updateRelativeTimes() {
-        document.querySelectorAll('.relative-time').forEach(el => {
-            const time = el.getAttribute('data-time');
-            if (time) {
-                el.textContent = formatRelativeTime(time);
-            }
-        });
-    }
-
-    // Update relative times on load and every minute
-    updateRelativeTimes();
-    setInterval(updateRelativeTimes, 60000);
-
-    const appId = "{{.App.ID}}";
-    const containerLogsEl = document.getElementById('container-logs');
-    const containerLogsWrapper = document.getElementById('container-logs-wrapper');
-    const containerStatusEl = document.getElementById('container-status');
-    const buildLogsEl = document.getElementById('build-logs');
-    const buildLogsWrapper = document.getElementById('build-logs-wrapper');
-    const buildStatusEl = document.getElementById('build-status');
-    const buildLogsSection = document.getElementById('build-logs-section');
-    const appStatusEl = document.getElementById('app-status');
-    const deployBtn = document.getElementById('deploy-btn');
-    const deployBtnText = document.getElementById('deploy-btn-text');
-
-    let currentDeploymentId = {{if .LatestDeployment}}{{.LatestDeployment.ID}}{{else}}null{{end}};
-
-    function updateAppStatusBadge(status) {
-        appStatusEl.className = '';
-        if (status === 'running') {
-            appStatusEl.className = 'badge-success';
-        } else if (status === 'building' || status === 'deploying') {
-            appStatusEl.className = 'badge-warning';
-        } else if (status === 'error') {
-            appStatusEl.className = 'badge-error';
-        } else {
-            appStatusEl.className = 'badge-neutral';
-        }
-        appStatusEl.textContent = status.charAt(0).toUpperCase() + status.slice(1);
-    }
-
-    function updateDeployButton(status) {
-        const isDeploying = (status === 'building' || status === 'deploying');
-        deployBtn.disabled = isDeploying;
-        deployBtnText.textContent = isDeploying ? 'Deploying...' : 'Deploy Now';
-        if (isDeploying) {
-            deployBtn.classList.add('opacity-50', 'cursor-not-allowed');
-        } else {
-            deployBtn.classList.remove('opacity-50', 'cursor-not-allowed');
-        }
-    }
-
-    function updateStatusBadge(el, status) {
-        if (!el) return;
-        el.className = '';
-        if (status === 'running' || status === 'success') {
-            el.className = 'badge-success text-xs';
-        } else if (status === 'building' || status === 'deploying') {
-            el.className = 'badge-warning text-xs';
-        } else if (status === 'failed' || status === 'error') {
-            el.className = 'badge-error text-xs';
-        } else {
-            el.className = 'badge-neutral text-xs';
-        }
-        el.textContent = status.charAt(0).toUpperCase() + status.slice(1);
-    }
-
-    function scrollToBottom(el) {
-        if (el) {
-            el.scrollTop = el.scrollHeight;
-        }
-    }
-
-    function fetchAppStatus() {
-        fetch('/apps/' + appId + '/status')
-            .then(response => response.json())
-            .then(data => {
-                updateAppStatusBadge(data.status);
-                updateDeployButton(data.status);
-
-                // Check if there's a new deployment
-                if (data.latestDeploymentID && data.latestDeploymentID !== currentDeploymentId) {
-                    currentDeploymentId = data.latestDeploymentID;
-                    // Show build logs section if hidden
-                    if (buildLogsSection) {
-                        buildLogsSection.style.display = '';
-                    }
-                    // Immediately fetch new build logs
-                    fetchBuildLogs();
-                }
-            })
-            .catch(err => {
-                console.error('Failed to fetch app status:', err);
-            });
-    }
-
-    function fetchContainerLogs() {
-        fetch('/apps/' + appId + '/container-logs')
-            .then(response => response.json())
-            .then(data => {
-                containerLogsEl.textContent = data.logs || 'No logs available';
-                updateStatusBadge(containerStatusEl, data.status);
-                scrollToBottom(containerLogsWrapper);
-            })
-            .catch(err => {
-                containerLogsEl.textContent = 'Failed to fetch logs: ' + err.message;
-            });
-    }
-
-    function fetchBuildLogs() {
-        if (!currentDeploymentId || !buildLogsEl) return;
-
-        fetch('/apps/' + appId + '/deployments/' + currentDeploymentId + '/logs')
-            .then(response => response.json())
-            .then(data => {
-                buildLogsEl.textContent = data.logs || 'No build logs available';
-                updateStatusBadge(buildStatusEl, data.status);
-                scrollToBottom(buildLogsWrapper);
-            })
-            .catch(err => {
-                buildLogsEl.textContent = 'Failed to fetch logs: ' + err.message;
-            });
-    }
-
-    // Initial fetch
-    fetchAppStatus();
-    fetchContainerLogs();
-    fetchBuildLogs();
-
-    // Refresh every second
-    setInterval(fetchAppStatus, 1000);
-    setInterval(fetchContainerLogs, 1000);
-    setInterval(fetchBuildLogs, 1000);
-})();
+upaas.initAppDetailPage({
+    appId: "{{.App.ID}}",
+    initialDeploymentId: {{if .LatestDeployment}}{{.LatestDeployment.ID}}{{else}}null{{end}}
+});
 </script>
 {{end}}

templates/dashboard.html

@@ -19,7 +19,7 @@
         </a>
     </div>
 
-    {{if .Apps}}
+    {{if .AppStats}}
     <div class="card overflow-hidden">
         <table class="table">
             <thead class="table-header">
@@ -28,37 +28,49 @@
                     <th>Repository</th>
                     <th>Branch</th>
                     <th>Status</th>
+                    <th>Last Deploy</th>
+                    <th>Deploys</th>
                     <th class="text-right">Actions</th>
                 </tr>
             </thead>
             <tbody class="table-body">
-                {{range .Apps}}
+                {{range .AppStats}}
                 <tr class="table-row-hover">
                     <td>
-                        <a href="/apps/{{.ID}}" class="text-primary-600 hover:text-primary-800 font-medium">
-                            {{.Name}}
+                        <a href="/apps/{{.App.ID}}" class="text-primary-600 hover:text-primary-800 font-medium">
+                            {{.App.Name}}
                         </a>
                     </td>
-                    <td class="text-gray-500 font-mono text-xs">{{.RepoURL}}</td>
-                    <td class="text-gray-500">{{.Branch}}</td>
+                    <td class="text-gray-500 font-mono text-xs">{{.App.RepoURL}}</td>
+                    <td class="text-gray-500">{{.App.Branch}}</td>
                     <td>
-                        {{if eq .Status "running"}}
+                        {{if eq .App.Status "running"}}
                         <span class="badge-success">Running</span>
-                        {{else if eq .Status "building"}}
+                        {{else if eq .App.Status "building"}}
                         <span class="badge-warning">Building</span>
-                        {{else if eq .Status "error"}}
+                        {{else if eq .App.Status "error"}}
                         <span class="badge-error">Error</span>
-                        {{else if eq .Status "stopped"}}
+                        {{else if eq .App.Status "stopped"}}
                         <span class="badge-neutral">Stopped</span>
                         {{else}}
-                        <span class="badge-neutral">{{.Status}}</span>
+                        <span class="badge-neutral">{{.App.Status}}</span>
                         {{end}}
                     </td>
+                    <td class="text-gray-500 text-sm">
+                        {{if .LastDeployTime}}
+                        <span class="relative-time cursor-default" data-time="{{.LastDeployISO}}" title="{{.LastDeployLabel}}">
+                            {{.LastDeployLabel}}
+                        </span>
+                        {{else}}
+                        <span class="text-gray-400">-</span>
+                        {{end}}
+                    </td>
+                    <td class="text-gray-500 text-sm">{{.DeployCount}}</td>
                     <td class="text-right">
                         <div class="flex justify-end gap-2">
-                            <a href="/apps/{{.ID}}" class="btn-text text-sm py-1 px-2">View</a>
-                            <a href="/apps/{{.ID}}/edit" class="btn-secondary text-sm py-1 px-2">Edit</a>
-                            <form method="POST" action="/apps/{{.ID}}/deploy" class="inline">
+                            <a href="/apps/{{.App.ID}}" class="btn-text text-sm py-1 px-2">View</a>
+                            <a href="/apps/{{.App.ID}}/edit" class="btn-secondary text-sm py-1 px-2">Edit</a>
+                            <form method="POST" action="/apps/{{.App.ID}}/deploy" class="inline">
                                 <button type="submit" class="btn-success text-sm py-1 px-2">Deploy</button>
                             </form>
                         </div>

templates/deployments.html

@@ -17,38 +17,39 @@
 
     <div class="section-header">
         <h1 class="text-2xl font-medium text-gray-900">Deployment History</h1>
-        <form method="POST" action="/apps/{{.App.ID}}/deploy">
-            <button type="submit" class="btn-success">Deploy Now</button>
+        <form id="deploy-form" method="POST" action="/apps/{{.App.ID}}/deploy">
+            <button id="deploy-btn" type="submit" class="btn-success">Deploy Now</button>
         </form>
     </div>
 
-    {{if .Deployments}}
-    <div class="space-y-4">
+    <!-- Live Build Logs (shown during active deployment) -->
+    <div id="live-logs-section" class="card p-6 mb-4" style="display: none;">
+        <div class="flex items-center justify-between mb-4">
+            <h2 class="section-title">Live Build Logs</h2>
+            <span id="live-status" class="badge-neutral text-xs">Building</span>
+        </div>
+        <div id="live-logs-wrapper" class="bg-gray-900 rounded-lg p-4 overflow-auto" style="max-height: 400px;">
+            <pre id="live-logs" class="text-gray-100 text-xs font-mono whitespace-pre-wrap">Waiting for logs...</pre>
+        </div>
+    </div>
+
+    <div id="deployments-list" class="space-y-4">
+        {{if .Deployments}}
         {{range .Deployments}}
-        <div class="card p-6">
+        <div class="card p-6 deployment-card" data-deployment-id="{{.ID}}" data-status="{{.Status}}">
             <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-4">
                 <div class="flex items-center gap-2 text-sm text-gray-500">
                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                     </svg>
-                    <span>{{.StartedAt.Format "2006-01-02 15:04:05"}}</span>
+                    <span class="relative-time" data-time="{{.StartedAt.Format "2006-01-02T15:04:05Z07:00"}}" title="{{.StartedAt.Format "2006-01-02 15:04:05"}}">{{.StartedAt.Format "2006-01-02 15:04:05"}}</span>
                     {{if .FinishedAt.Valid}}
-                    <span class="text-gray-400">-</span>
-                    <span>{{.FinishedAt.Time.Format "15:04:05"}}</span>
+                    <span class="text-gray-400">•</span>
+                    <span>{{.Duration}}</span>
                     {{end}}
                 </div>
                 <div>
-                    {{if eq .Status "success"}}
-                    <span class="badge-success">Success</span>
-                    {{else if eq .Status "failed"}}
-                    <span class="badge-error">Failed</span>
-                    {{else if eq .Status "building"}}
-                    <span class="badge-warning">Building</span>
-                    {{else if eq .Status "deploying"}}
-                    <span class="badge-info">Deploying</span>
-                    {{else}}
-                    <span class="badge-neutral">{{.Status}}</span>
-                    {{end}}
+                    <span class="deployment-status {{if eq .Status "success"}}badge-success{{else if eq .Status "failed"}}badge-error{{else if eq .Status "building"}}badge-warning{{else if eq .Status "deploying"}}badge-info{{else}}badge-neutral{{end}}">{{if eq .Status "success"}}Success{{else if eq .Status "failed"}}Failed{{else if eq .Status "building"}}Building{{else if eq .Status "deploying"}}Deploying{{else}}{{.Status}}{{end}}</span>
                 </div>
             </div>
 
@@ -56,7 +57,7 @@
                 {{if .CommitSHA.Valid}}
                 <div>
                     <span class="font-medium text-gray-700">Commit:</span>
-                    <span class="font-mono text-gray-500 ml-1">{{.CommitSHA.String}}</span>
+                    <span class="font-mono text-gray-500 ml-1">{{.ShortCommit}}</span>
                 </div>
                 {{end}}
 
@@ -75,35 +76,43 @@
                 {{end}}
             </div>
 
-            {{if .Logs.Valid}}
-            <details class="mt-4">
+            {{if or .Logs.Valid (eq .Status "building") (eq .Status "deploying")}}
+            <details class="mt-4 deployment-logs" {{if or (eq .Status "building") (eq .Status "deploying")}}open{{end}}>
                 <summary class="cursor-pointer text-sm text-primary-600 hover:text-primary-800 font-medium inline-flex items-center">
-                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg class="w-4 h-4 mr-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                     </svg>
                     View Logs
                 </summary>
-                <pre class="mt-3 p-4 bg-gray-900 text-gray-100 rounded-lg text-xs overflow-x-auto font-mono leading-relaxed">{{.Logs.String}}</pre>
+                <div class="logs-wrapper mt-3 overflow-auto" style="max-height: 400px;">
+                    <pre class="logs-content p-4 bg-gray-900 text-gray-100 rounded-lg text-xs font-mono leading-relaxed whitespace-pre-wrap">{{if .Logs.Valid}}{{.Logs.String}}{{else}}Loading...{{end}}</pre>
+                </div>
             </details>
             {{end}}
         </div>
         {{end}}
-    </div>
-    {{else}}
-    <div class="card">
-        <div class="empty-state">
-            <svg class="empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
-            </svg>
-            <h3 class="empty-state-title">No deployments yet</h3>
-            <p class="empty-state-description">Deploy your application to see the deployment history here.</p>
-            <div class="mt-6">
-                <form method="POST" action="/apps/{{.App.ID}}/deploy">
-                    <button type="submit" class="btn-success">Deploy Now</button>
-                </form>
+        {{else}}
+        <div class="card">
+            <div class="empty-state">
+                <svg class="empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
+                </svg>
+                <h3 class="empty-state-title">No deployments yet</h3>
+                <p class="empty-state-description">Deploy your application to see the deployment history here.</p>
+                <div class="mt-6">
+                    <form id="deploy-form-empty" method="POST" action="/apps/{{.App.ID}}/deploy">
+                        <button id="deploy-btn-empty" type="submit" class="btn-success">Deploy Now</button>
+                    </form>
+                </div>
             </div>
         </div>
+        {{end}}
     </div>
-    {{end}}
 </main>
+
+<script>
+upaas.initDeploymentsPage({
+    appId: "{{.App.ID}}"
+});
+</script>
 {{end}}