fix: robust migration and UI log tweaks

- Harden migration
- Improve deployment logs UI

Author: Lftobs

apps/api/src/db/migrate.ts

@@ -37,8 +37,10 @@ const addClearCacheColumn = async (db: ReturnType<typeof getDrizzle>) => {
   try {
     db.run(sql`ALTER TABLE deployments ADD COLUMN clear_cache integer NOT NULL DEFAULT 0`);
     console.log("[Migrate] Added clear_cache column to deployments table");
-  } catch {
-    // Column already exists — no-op
+  } catch (err) {
+    if (err instanceof Error && err.message.includes("duplicate column name")) return;
+    console.error("[Migrate] Failed to add clear_cache column:", err);
+    throw err;
   }
 };
 

apps/web/src/components/project/deployments/deployment-logs.tsx

@@ -1,6 +1,15 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, {
+	useState,
+	useEffect,
+	useRef,
+} from "react";
 import { useDeploymentLogs } from "../../../hooks/useDeploymentLogs";
-import { Card, CardContent, CardHeader, CardTitle } from "../../ui/card";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "../../ui/card";
 import { Terminal } from "lucide-react";
 
 export function formatTimeAgo(dateStr: string) {
@@ -16,57 +25,101 @@ export function formatTimeAgo(dateStr: string) {
 
 export function parseTimestamp(raw: string) {
 	if (!raw) return Date.now();
-	const normalized = raw.includes(" ") && !raw.includes("T") ? raw.replace(" ", "T") : raw;
+	const normalized =
+		raw.includes(" ") && !raw.includes("T")
+			? raw.replace(" ", "T")
+			: raw;
 	const d = new Date(normalized);
-	return Number.isNaN(d.getTime()) ? Date.now() : d.getTime();
+	return Number.isNaN(d.getTime())
+		? Date.now()
+		: d.getTime();
 }
 
-export function depDisplayName(projectName: string | undefined, depId: string) {
+export function depDisplayName(
+	projectName: string | undefined,
+	depId: string,
+) {
 	const short = depId.slice(0, 8);
 	if (!projectName) return short;
-	const slug = projectName.toLowerCase().replace(/[^a-z0-9-]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 63);
+	const slug = projectName
+		.toLowerCase()
+		.replace(/[^a-z0-9-]+/g, "-")
+		.replace(/^-+|-+$/g, "")
+		.slice(0, 63);
 	return `${slug}-${short}`;
 }
 
-export function DeploymentDuration({ deployment }: { deployment: any }) {
+export function DeploymentDuration({
+	deployment,
+}: {
+	deployment: any;
+}) {
 	const [duration, setDuration] = useState("");
 
 	useEffect(() => {
 		const calculate = () => {
-			const start = parseTimestamp(deployment.createdAt);
+			const start = parseTimestamp(
+				deployment.createdAt,
+			);
 			const status = deployment.status;
-			const isFinished = status !== "pending" && status !== "building" && status !== "deploying";
-			const end = isFinished ? parseTimestamp(deployment.updatedAt) : Date.now();
-			
+			const isFinished =
+				status !== "pending" &&
+				status !== "building" &&
+				status !== "deploying";
+			const end = isFinished
+				? parseTimestamp(
+						deployment.updatedAt,
+					)
+				: Date.now();
+
 			const diff = Math.max(0, end - start);
 			const secs = Math.floor(diff / 1000);
 			if (secs < 60) {
 				setDuration(`${secs}s`);
 			} else {
-				const mins = Math.floor(secs / 60);
+				const mins = Math.floor(
+					secs / 60,
+				);
 				const remainingSecs = secs % 60;
-				setDuration(`${mins}m ${remainingSecs}s`);
+				setDuration(
+					`${mins}m ${remainingSecs}s`,
+				);
 			}
 		};
 
 		calculate();
-		
+
 		const status = deployment.status;
-		const isFinished = status !== "pending" && status !== "building" && status !== "deploying";
+		const isFinished =
+			status !== "pending" &&
+			status !== "building" &&
+			status !== "deploying";
 		if (isFinished) return;
 
-		const interval = setInterval(calculate, 1000);
+		const interval = setInterval(
+			calculate,
+			1000,
+		);
 		return () => clearInterval(interval);
-	}, [deployment.createdAt, deployment.updatedAt, deployment.status]);
+	}, [
+		deployment.createdAt,
+		deployment.updatedAt,
+		deployment.status,
+	]);
 
-	return <span className="font-mono text-xs text-muted-foreground">{duration}</span>;
+	return (
+		<span className="font-mono text-xs text-muted-foreground">
+			{duration}
+		</span>
+	);
 }
 
 function fmtLogTs(raw: string | undefined) {
 	if (!raw) return "";
 	const d = new Date(raw);
 	if (Number.isNaN(d.getTime())) return raw;
-	const pad = (n: number) => String(n).padStart(2, "0");
+	const pad = (n: number) =>
+		String(n).padStart(2, "0");
 	return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
 }
 
@@ -92,11 +145,18 @@ export function DeploymentLogs({
 					<span className="flex items-center gap-2">
 						<Terminal className="h-4 w-4" />
 						Build Logs —{" "}
-						{deployment.id.slice(0, 8)}
+						{deployment.id.slice(
+							0,
+							8,
+						)}
 					</span>
 					<span className="text-xs font-normal text-muted-foreground flex items-center gap-2 select-none">
 						<span>Duration:</span>
-						<DeploymentDuration deployment={deployment} />
+						<DeploymentDuration
+							deployment={
+								deployment
+							}
+						/>
 					</span>
 				</CardTitle>
 			</CardHeader>
@@ -115,10 +175,19 @@ export function DeploymentLogs({
 						{logs.map((log, i) => (
 							<div
 								key={i}
-								className={`log-line ${log.message.startsWith("CRITICAL") ? "dim" : ""}`}
+								className={`log-line ${log.message.startsWith("CRITICAL") ? "" : log.message.startsWith("ERROR") ? "error" : ""}`}
 							>
 								<span className="log-stage">
-									[{log.stage}]-[{fmtLogTs((log as any).timestamp || log.createdAt)}]
+									[{log.stage}
+									]-[
+									{fmtLogTs(
+										(
+											log as any
+										)
+											.timestamp ||
+											log.createdAt,
+									)}
+									]
 								</span>
 								<span className="log-msg">
 									{log.message}

apps/web/src/index.css

@@ -78,6 +78,11 @@
   opacity: 0.4;
 }
 
+.log-line.error {
+  color: hsl(0 72% 56%);
+  opacity: 0.7;
+}
+
 .log-stage {
   color: hsl(24 95% 53%);
   flex-shrink: 0;