feat: Implement active deployment polling and prioritized selection on the project details page, refine UI styling, and add an API .gitignore.

Author: CodeKage25

apps/api/.gitignore

@@ -0,0 +1,45 @@
+# Dependencies
+node_modules/
+.pnp/
+.pnp.js
+
+# Build outputs
+dist/
+build/
+*.tsbuildinfo
+
+# Database
+*.db
+*.db-journal
+*.db-wal
+*.db-shm
+apps/api/data/
+
+# Environment files
+.env
+.env.local
+.env.*.local
+
+# Logs
+logs/
+*.log
+npm-debug.log*
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+.DS_Store
+
+# Docker
+.builds/
+
+# Testing
+coverage/
+
+# OS
+Thumbs.db
+
+# Certbot/SSL
+certbot/

apps/api/data/deployhub.db-shm

@@ -1,8 +1,9 @@
 .project-details {
     animation: fadeIn 0.3s ease;
-    max-width: 1400px;
+    max-width: 1200px;
     margin: 0 auto;
     min-height: calc(100vh - 120px);
+    padding-right: 1rem;
 }
 
 .project-loading,
@@ -24,92 +25,136 @@
     animation: spin 1s linear infinite;
 }
 
-/* Header */
+/* Header - Clean & Aligned */
 .project-header {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     justify-content: space-between;
-    gap: 1.5rem;
-    margin-bottom: 1.5rem;
-    padding-bottom: 1.25rem;
+    gap: 1rem;
+    margin-bottom: 1.25rem;
+    padding-bottom: 1rem;
     border-bottom: 1px solid var(--color-border);
 }
 
 .project-header-left {
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
+    gap: 0.25rem;
     flex: 1;
     min-width: 0;
 }
 
 .back-link {
     display: inline-flex;
     align-items: center;
-    gap: 0.35rem;
-    color: var(--color-text-secondary);
-    font-size: 0.8rem;
-    margin-bottom: 0.35rem;
+    gap: 0.25rem;
+    color: var(--color-text-muted);
+    font-size: 0.75rem;
+    margin-bottom: 0.25rem;
     transition: all 0.15s ease;
 }
 
 .back-link:hover {
     color: var(--color-primary);
-    transform: translateX(-3px);
 }
 
 .project-header h1 {
-    font-size: 1.75rem;
-    font-weight: 700;
+    font-size: 1.5rem;
+    font-weight: 600;
     color: var(--color-text);
+    line-height: 1.2;
 }
 
 .project-meta {
     display: flex;
-    gap: 0.75rem;
+    gap: 0.5rem;
     flex-wrap: wrap;
     align-items: center;
+    margin-top: 0.25rem;
 }
 
 .meta-item {
     display: flex;
     align-items: center;
-    gap: 0.35rem;
+    gap: 0.25rem;
     color: var(--color-text-muted);
-    font-size: 0.8rem;
+    font-size: 0.75rem;
 }
 
 .meta-item.buildpack {
     background: rgba(168, 85, 247, 0.1);
     color: var(--color-primary);
-    padding: 0.2rem 0.6rem;
+    padding: 0.15rem 0.5rem;
     border-radius: 4px;
-    font-size: 0.75rem;
+    font-size: 0.7rem;
     font-weight: 500;
 }
 
-/* Sleek Action Buttons */
+/* Sleek Action Buttons - Production Quality */
 .project-actions {
     display: flex;
-    gap: 0.5rem;
+    align-items: center;
+    gap: 0.375rem;
     flex-shrink: 0;
 }
 
 .project-actions .btn {
-    padding: 0.5rem 0.875rem;
-    font-size: 0.8rem;
+    height: 32px;
+    padding: 0 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 500;
     border-radius: 6px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.35rem;
+    white-space: nowrap;
+    transition: all 0.15s ease;
+}
+
+.project-actions .btn svg {
+    width: 14px;
+    height: 14px;
+}
+
+.project-actions .btn-secondary {
+    background: var(--color-bg-elevated);
+    border: 1px solid var(--color-border);
+    color: var(--color-text-secondary);
+}
+
+.project-actions .btn-secondary:hover {
+    background: var(--color-bg-hover);
+    color: var(--color-text);
+}
+
+.project-actions .btn-secondary.active {
+    background: rgba(168, 85, 247, 0.1);
+    border-color: rgba(168, 85, 247, 0.3);
+    color: var(--color-primary);
+}
+
+.project-actions .btn-primary {
+    background: linear-gradient(135deg, #a855f7, #7c3aed);
+    border: none;
+    color: white;
+}
+
+.project-actions .btn-primary:hover {
+    background: linear-gradient(135deg, #9333ea, #6d28d9);
+    transform: translateY(-1px);
 }
 
 .project-actions .btn-icon {
-    width: 34px;
-    height: 34px;
+    width: 32px;
+    height: 32px;
     padding: 0;
 }
 
-.project-actions .btn.active {
-    background: var(--color-primary);
-    color: white;
+.project-actions .btn-icon:hover {
+    background: rgba(239, 68, 68, 0.1);
+    border-color: rgba(239, 68, 68, 0.3);
+    color: #ef4444;
 }
 
 /* Environment Variables Panel - Compact */

apps/api/data/deployhub.db-wal

@@ -97,7 +97,14 @@ export default function ProjectDetails() {
             const data = await projects.get(id!);
             setProject(data);
             if (data.deployments.length > 0) {
-                setSelectedDeployment(data.deployments[0]);
+                // Prioritize building/deploying deployment, otherwise select the first one
+                const activeDeployment = data.deployments.find(
+                    (d: Deployment) => d.status === 'building' || d.status === 'deploying'
+                );
+                const runningDeployment = data.deployments.find(
+                    (d: Deployment) => d.status === 'running'
+                );
+                setSelectedDeployment(activeDeployment || runningDeployment || data.deployments[0]);
             }
         } catch (err: any) {
             setError(err.message);
@@ -106,6 +113,20 @@ export default function ProjectDetails() {
         }
     };
 
+    // Poll for updates when there's an active deployment
+    useEffect(() => {
+        const hasActiveDeployment = project?.deployments.some(
+            (d: Deployment) => d.status === 'building' || d.status === 'deploying'
+        );
+
+        if (hasActiveDeployment) {
+            const interval = setInterval(() => {
+                loadProject();
+            }, 3000);
+            return () => clearInterval(interval);
+        }
+    }, [project]);
+
     const loadLogs = async (deploymentId: string) => {
         try {
             const data = await deployments.getLogs(deploymentId);