feat: Implement build management UI with routing and toast notifications

bun.lock

@@ -11,9 +11,12 @@
         "clsx": "^2.1.1",
         "convex": "^1.29.3",
         "lucide-react": "^0.554.0",
+        "next-themes": "^0.4.6",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.66.1",
+        "react-router-dom": "^7.9.6",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^3.4.0",
         "tailwindcss-animate": "^1.0.7",
       },
@@ -518,6 +521,8 @@
 
     "natural-compare-lite": ["natural-compare-lite@1.4.0", "", {}, "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g=="],
 
+    "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
+
     "node-releases": ["node-releases@2.0.27", "", {}, "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA=="],
 
     "normalize-range": ["normalize-range@0.1.2", "", {}, "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA=="],
@@ -572,6 +577,10 @@
 
     "react-refresh": ["react-refresh@0.17.0", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="],
 
+    "react-router": ["react-router@7.9.6", "", { "dependencies": { "cookie": "^1.0.1", "set-cookie-parser": "^2.6.0" }, "peerDependencies": { "react": ">=18", "react-dom": ">=18" }, "optionalPeers": ["react-dom"] }, "sha512-Y1tUp8clYRXpfPITyuifmSoE2vncSME18uVLgaqyxh9H35JWpIfzHo+9y3Fzh5odk/jxPW29IgLgzcdwxGqyNA=="],
+
+    "react-router-dom": ["react-router-dom@7.9.6", "", { "dependencies": { "react-router": "7.9.6" }, "peerDependencies": { "react": ">=18", "react-dom": ">=18" } }, "sha512-2MkC2XSXq6HjGcihnx1s0DBWQETI4mlis4Ux7YTLvP67xnGxCvq+BcCQSO81qQHVUTM1V53tl4iVVaY5sReCOA=="],
+
     "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
 
     "reusify": ["reusify@1.1.0", "", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="],
@@ -588,12 +597,16 @@
 
     "server-only": ["server-only@0.0.1", "", {}, "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA=="],
 
+    "set-cookie-parser": ["set-cookie-parser@2.7.2", "", {}, "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="],
+
     "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
 
     "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
 
     "slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="],
 
+    "sonner": ["sonner@2.0.7", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w=="],
+
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
     "strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],

convex/actions.ts

@@ -1,43 +1,54 @@
 import { v } from "convex/values";
+import { internal } from "./_generated/api";
 import { action } from "./_generated/server";
 
 export const dispatchGithubBuild = action({
 	args: {
+		buildId: v.id("builds"),
 		target: v.string(),
 		flags: v.string(),
 	},
-	handler: async (_ctx, args) => {
-		const githubToken = process.env.GITHUB_TOKEN;
-		if (!githubToken) {
-			throw new Error("GITHUB_TOKEN is not defined");
-		}
+	handler: async (ctx, args) => {
+		try {
+			const githubToken = process.env.GITHUB_TOKEN;
+			if (!githubToken) {
+				throw new Error("GITHUB_TOKEN is not defined");
+			}
 
-		const response = await fetch(
-			"https://api.github.com/repos/meshtastic/firmware/actions/workflows/custom_build.yml/dispatches",
-			{
-				method: "POST",
-				headers: {
-					Authorization: `Bearer ${githubToken}`,
-					Accept: "application/vnd.github.v3+json",
-					"Content-Type": "application/json",
-				},
-				body: JSON.stringify({
-					ref: "master", // or make this configurable
-					inputs: {
-						target: args.target,
-						flags: args.flags,
+			const response = await fetch(
+				"https://api.github.com/repos/meshtastic/firmware/actions/workflows/custom_build.yml/dispatches",
+				{
+					method: "POST",
+					headers: {
+						Authorization: `Bearer ${githubToken}`,
+						Accept: "application/vnd.github.v3+json",
+						"Content-Type": "application/json",
 					},
-				}),
-			},
-		);
+					body: JSON.stringify({
+						ref: "master", // or make this configurable
+						inputs: {
+							target: args.target,
+							flags: args.flags,
+						},
+					}),
+				},
+			);
 
-		if (!response.ok) {
-			const errorText = await response.text();
-			throw new Error(`GitHub API failed: ${response.status} ${errorText}`);
+			if (!response.ok) {
+				const errorText = await response.text();
+				throw new Error(`GitHub API failed: ${response.status} ${errorText}`);
+			}
+
+			// Note: GitHub dispatch API doesn't return the run ID immediately.
+			// We rely on the webhook to link the run back to our build record.
+			// Alternatively, we could poll for the most recent run, but that's race-condition prone.
+		} catch (error) {
+			await ctx.runMutation(internal.builds.logBuildError, {
+				buildId: args.buildId,
+				error: String(error),
+			});
+			// Re-throw so it shows up in Convex logs too
+			throw error;
 		}
-
-		// Note: GitHub dispatch API doesn't return the run ID immediately.
-		// We rely on the webhook to link the run back to our build record.
-		// Alternatively, we could poll for the most recent run, but that's race-condition prone.
 	},
 });

convex/builds.ts

@@ -1,7 +1,7 @@
 import { getAuthUserId } from "@convex-dev/auth/server";
 import { v } from "convex/values";
-import { api } from "./_generated/api";
-import { mutation, query } from "./_generated/server";
+import { api, } from "./_generated/api";
+import { internalMutation, mutation, query } from "./_generated/server";
 
 export const triggerBuild = mutation({
 	args: {
@@ -17,7 +17,6 @@ export const triggerBuild = mutation({
 		}
 
 		// Convert config object to flags string
-		// e.g. { "NO_MQTT": true } -> "-DNO_MQTT"
 		const flags = Object.entries(profile.config)
 			.filter(([_, value]) => value === true)
 			.map(([key, _]) => `-D${key}`)
@@ -25,16 +24,18 @@ export const triggerBuild = mutation({
 
 		// Create build records for each target
 		for (const target of profile.targets) {
-			await ctx.db.insert("builds", {
+			const buildId = await ctx.db.insert("builds", {
 				profileId: profile._id,
 				target: target,
-				githubRunId: 0, // Placeholder, updated via webhook
+				githubRunId: 0,
 				status: "queued",
+				logs: "Build queued...",
 				startedAt: Date.now(),
 			});
 
 			// Schedule the action to dispatch GitHub workflow
 			await ctx.scheduler.runAfter(0, api.actions.dispatchGithubBuild, {
+				buildId: buildId,
 				target: target,
 				flags: flags,
 			});
@@ -52,3 +53,88 @@ export const listByProfile = query({
 			.take(10);
 	},
 });
+
+export const get = query({
+	args: { buildId: v.id("builds") },
+	handler: async (ctx, args) => {
+		const userId = await getAuthUserId(ctx);
+		if (!userId) return null;
+
+		const build = await ctx.db.get(args.buildId);
+		if (!build) return null;
+
+		const profile = await ctx.db.get(build.profileId);
+		if (!profile || profile.userId !== userId) return null;
+
+		return build;
+	},
+});
+
+export const deleteBuild = mutation({
+	args: { buildId: v.id("builds") },
+	handler: async (ctx, args) => {
+		const userId = await getAuthUserId(ctx);
+		if (!userId) throw new Error("Unauthorized");
+
+		const build = await ctx.db.get(args.buildId);
+		if (!build) throw new Error("Build not found");
+
+		const profile = await ctx.db.get(build.profileId);
+		if (!profile || profile.userId !== userId) {
+			throw new Error("Unauthorized");
+		}
+
+		await ctx.db.delete(args.buildId);
+	},
+});
+
+export const retryBuild = mutation({
+	args: { buildId: v.id("builds") },
+	handler: async (ctx, args) => {
+		const userId = await getAuthUserId(ctx);
+		if (!userId) throw new Error("Unauthorized");
+
+		const build = await ctx.db.get(args.buildId);
+		if (!build) throw new Error("Build not found");
+
+		const profile = await ctx.db.get(build.profileId);
+		if (!profile || profile.userId !== userId) {
+			throw new Error("Unauthorized");
+		}
+
+		// Reset build status
+		await ctx.db.patch(args.buildId, {
+			status: "queued",
+			logs: "Build retry queued...",
+			startedAt: Date.now(),
+			completedAt: undefined,
+		});
+
+		// Retry the build
+		const flags = Object.entries(profile.config)
+			.filter(([_, value]) => value === true)
+			.map(([key, _]) => `-D${key}`)
+			.join(" ");
+
+		await ctx.scheduler.runAfter(0, api.actions.dispatchGithubBuild, {
+			buildId: args.buildId,
+			target: build.target,
+			flags: flags,
+		});
+	},
+});
+
+// Internal mutation to log errors from actions
+export const logBuildError = internalMutation({
+	args: {
+		buildId: v.id("builds"),
+		error: v.string(),
+	},
+	handler: async (ctx, args) => {
+		await ctx.db.patch(args.buildId, {
+			status: "failure",
+			logs: `Error triggering build: ${args.error}`,
+			completedAt: Date.now(),
+		});
+	},
+});

convex/schema.ts

@@ -18,6 +18,7 @@ export default defineSchema({
 		githubRunId: v.number(),
 		status: v.string(), // "queued", "in_progress", "success", "failure"
 		artifactUrl: v.optional(v.string()),
+		logs: v.optional(v.string()),
 		startedAt: v.number(),
 		completedAt: v.optional(v.number()),
 	}).index("by_profile", ["profileId"]),

package.json

@@ -17,9 +17,12 @@
 		"clsx": "^2.1.1",
 		"convex": "^1.29.3",
 		"lucide-react": "^0.554.0",
+		"next-themes": "^0.4.6",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-hook-form": "^7.66.1",
+		"react-router-dom": "^7.9.6",
+		"sonner": "^2.0.7",
 		"tailwind-merge": "^3.4.0",
 		"tailwindcss-animate": "^1.0.7"
 	},

src/App.tsx

@@ -1,27 +1,36 @@
-import {
-	Authenticated,
-	AuthLoading,
-	Unauthenticated,
-} from "convex/react";
+import { Authenticated, AuthLoading, Unauthenticated } from "convex/react";
 import { Loader2 } from "lucide-react";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import { Toaster } from "@/components/ui/sonner";
+import BuildDetail from "./pages/BuildDetail";
 import Dashboard from "./pages/Dashboard";
 import LandingPage from "./pages/LandingPage";
 
 function App() {
 	return (
-		<>
+		<BrowserRouter>
 			<AuthLoading>
 				<div className="flex items-center justify-center min-h-screen bg-slate-950">
 					<Loader2 className="w-10 h-10 text-cyan-500 animate-spin" />
 				</div>
 			</AuthLoading>
+
 			<Unauthenticated>
-				<LandingPage />
+				<Routes>
+					<Route path="/" element={<LandingPage />} />
+					<Route path="*" element={<Navigate to="/" replace />} />
+				</Routes>
 			</Unauthenticated>
+
 			<Authenticated>
-				<Dashboard />
+				<Routes>
+					<Route path="/" element={<Dashboard />} />
+					<Route path="/builds/:buildId" element={<BuildDetail />} />
+					<Route path="*" element={<Navigate to="/" replace />} />
+				</Routes>
 			</Authenticated>
-		</>
+			<Toaster />
+		</BrowserRouter>
 	);
 }
 

src/components/BuildsPanel.tsx

@@ -0,0 +1,160 @@
+import { useMutation, useQuery } from "convex/react";
+import {
+	Clock,
+	CheckCircle,
+	XCircle,
+	Loader2,
+	Trash2,
+	RotateCw,
+	ExternalLink,
+} from "lucide-react";
+import { Link } from "react-router-dom";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { api } from "../../convex/_generated/api";
+import type { Id } from "../../convex/_generated/dataModel";
+
+interface BuildsPanelProps {
+	profileId: Id<"profiles">;
+}
+
+export default function BuildsPanel({ profileId }: BuildsPanelProps) {
+	const builds = useQuery(api.builds.listByProfile, { profileId });
+	const deleteBuild = useMutation(api.builds.deleteBuild);
+	const retryBuild = useMutation(api.builds.retryBuild);
+
+	const getStatusIcon = (status: string) => {
+		switch (status) {
+			case "success":
+				return <CheckCircle className="w-4 h-4 text-green-500" />;
+			case "failure":
+				return <XCircle className="w-4 h-4 text-red-500" />;
+			case "in_progress":
+				return <Loader2 className="w-4 h-4 text-blue-500 animate-spin" />;
+			default:
+				return <Clock className="w-4 h-4 text-yellow-500" />;
+		}
+	};
+
+	const getStatusColor = (status: string) => {
+		switch (status) {
+			case "success":
+				return "text-green-400";
+			case "failure":
+				return "text-red-400";
+			case "in_progress":
+				return "text-blue-400";
+			default:
+				return "text-yellow-400";
+		}
+	};
+
+	const handleDelete = async (buildId: Id<"builds">) => {
+		try {
+			await deleteBuild({ buildId });
+			toast.success("Build deleted", {
+				description: "Build record has been removed.",
+			});
+		} catch (error) {
+			toast.error("Delete failed", {
+				description: String(error),
+			});
+		}
+	};
+
+	const handleRetry = async (buildId: Id<"builds">) => {
+		try {
+			await retryBuild({ buildId });
+			toast.success("Build retrying", {
+				description: "Build has been queued again.",
+			});
+		} catch (error) {
+			toast.error("Retry failed", {
+				description: String(error),
+			});
+		}
+	};
+
+	if (!builds || builds.length === 0) {
+		return (
+			<div className="text-slate-500 text-sm py-4">
+				No builds yet. Click "Build" to start.
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-3">
+			<h3 className="text-lg font-semibold">Build History</h3>
+			{builds.map((build) => (
+				<div
+					key={build._id}
+					className="border border-slate-800 rounded-lg p-4 bg-slate-900/30"
+				>
+					<div className="flex items-start justify-between mb-2">
+						<Link
+							to={`/builds/${build._id}`}
+							className="flex items-center gap-2 hover:opacity-80"
+						>
+							{getStatusIcon(build.status)}
+							<span className="font-medium hover:underline">
+								{build.target}
+							</span>
+							<span className={`text-sm ${getStatusColor(build.status)}`}>
+								{build.status}
+							</span>
+						</Link>
+						<div className="flex gap-2">
+							{build.status === "failure" && (
+								<Button
+									size="sm"
+									variant="ghost"
+									onClick={() => handleRetry(build._id)}
+								>
+									<RotateCw className="w-4 h-4" />
+								</Button>
+							)}
+							<Button
+								size="sm"
+								variant="ghost"
+								onClick={() => handleDelete(build._id)}
+							>
+								<Trash2 className="w-4 h-4" />
+							</Button>
+						</div>
+					</div>
+
+					{build.logs && (
+						<pre className="text-xs bg-slate-950 p-2 rounded mt-2 overflow-x-auto text-slate-400 max-h-32 overflow-y-auto">
+							{build.logs.split("\n").slice(-5).join("\n")}
+						</pre>
+					)}
+
+					<div className="flex items-center justify-between mt-3">
+						<Link
+							to={`/builds/${build._id}`}
+							className="text-sm text-cyan-400 hover:underline flex items-center gap-1"
+						>
+							View Details <ExternalLink className="w-3 h-3" />
+						</Link>
+
+						{build.artifactUrl && (
+							<a
+								href={build.artifactUrl}
+								target="_blank"
+								rel="noopener noreferrer"
+								className="text-sm text-cyan-400 hover:underline"
+							>
+								Download Artifact →
+							</a>
+						)}
+					</div>
+
+					<div className="text-xs text-slate-500 mt-2">
+						Started: {new Date(build.startedAt).toLocaleString()}
+					</div>
+				</div>
+			))}
+		</div>
+	);
+}

src/components/ui/sonner.tsx

@@ -0,0 +1,29 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/pages/BuildDetail.tsx

@@ -0,0 +1,127 @@
+import { useQuery } from "convex/react";
+import {
+	ArrowLeft,
+	CheckCircle,
+	Clock,
+	Download,
+	Loader2,
+	Terminal,
+	XCircle,
+} from "lucide-react";
+import { Link, useParams } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { api } from "../../convex/_generated/api";
+import type { Id } from "../../convex/_generated/dataModel";
+
+export default function BuildDetail() {
+	const { buildId } = useParams<{ buildId: string }>();
+	const build = useQuery(api.builds.get, {
+		buildId: buildId as Id<"builds">,
+	});
+
+	if (build === undefined) {
+		return (
+			<div className="flex items-center justify-center min-h-screen bg-slate-950 text-white">
+				<Loader2 className="w-8 h-8 animate-spin text-cyan-500" />
+			</div>
+		);
+	}
+
+	if (build === null) {
+		return (
+			<div className="flex flex-col items-center justify-center min-h-screen bg-slate-950 text-white gap-4">
+				<h1 className="text-2xl font-bold">Build Not Found</h1>
+				<Link to="/">
+					<Button variant="outline">Return to Dashboard</Button>
+				</Link>
+			</div>
+		);
+	}
+
+	const getStatusColor = (status: string) => {
+		switch (status) {
+			case "success":
+				return "text-green-400";
+			case "failure":
+				return "text-red-400";
+			case "in_progress":
+				return "text-blue-400";
+			default:
+				return "text-yellow-400";
+		}
+	};
+
+	const getStatusIcon = (status: string) => {
+		switch (status) {
+			case "success":
+				return <CheckCircle className="w-6 h-6 text-green-500" />;
+			case "failure":
+				return <XCircle className="w-6 h-6 text-red-500" />;
+			case "in_progress":
+				return <Loader2 className="w-6 h-6 text-blue-500 animate-spin" />;
+			default:
+				return <Clock className="w-6 h-6 text-yellow-500" />;
+		}
+	};
+
+	return (
+		<div className="min-h-screen bg-slate-950 text-white p-8">
+			<div className="max-w-4xl mx-auto">
+				<header className="mb-8">
+					<Link
+						to="/"
+						className="inline-flex items-center text-slate-400 hover:text-white mb-4"
+					>
+						<ArrowLeft className="w-4 h-4 mr-2" /> Back to Dashboard
+					</Link>
+
+					<div className="flex items-center justify-between">
+						<div className="flex items-center gap-4">
+							{getStatusIcon(build.status)}
+							<div>
+								<h1 className="text-3xl font-bold">{build.target}</h1>
+								<div className="flex items-center gap-2 text-slate-400 mt-1">
+									<span>Build ID: {build._id}</span>
+									<span>•</span>
+									<span className={getStatusColor(build.status)}>
+										{build.status.toUpperCase()}
+									</span>
+									<span>•</span>
+									<span>{new Date(build.startedAt).toLocaleString()}</span>
+								</div>
+							</div>
+						</div>
+
+						{build.artifactUrl && (
+							<a
+								href={build.artifactUrl}
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<Button className="bg-cyan-600 hover:bg-cyan-700">
+									<Download className="w-4 h-4 mr-2" /> Download Firmware
+								</Button>
+							</a>
+						)}
+					</div>
+				</header>
+
+				<main className="space-y-6">
+					<div className="bg-slate-900 rounded-lg border border-slate-800 overflow-hidden">
+						<div className="flex items-center gap-2 px-4 py-3 bg-slate-900 border-b border-slate-800">
+							<Terminal className="w-4 h-4 text-slate-400" />
+							<span className="font-mono text-sm text-slate-300">
+								Build Logs
+							</span>
+						</div>
+						<div className="p-4 overflow-x-auto">
+							<pre className="font-mono text-sm text-slate-300 whitespace-pre-wrap">
+								{build.logs || "No logs available..."}
+							</pre>
+						</div>
+					</div>
+				</main>
+			</div>
+		</div>
+	);
+}

src/pages/Dashboard.tsx

@@ -1,14 +1,18 @@
 import { useAuthActions } from "@convex-dev/auth/react";
-import { useQuery } from "convex/react";
+import { useMutation, useQuery } from "convex/react";
 import { Plus } from "lucide-react";
 import { useState } from "react";
+import { toast } from "sonner";
+import BuildsPanel from "@/components/BuildsPanel";
 import ProfileEditor from "@/components/ProfileEditor";
 import { Button } from "@/components/ui/button";
 import { api } from "../../convex/_generated/api";
+import type { Id } from "../../convex/_generated/dataModel";
 
 export default function Dashboard() {
 	const { signOut } = useAuthActions();
 	const profiles = useQuery(api.profiles.list);
+	const triggerBuild = useMutation(api.builds.triggerBuild);
 	const [isEditing, setIsEditing] = useState(false);
 	const [editingProfile, setEditingProfile] = useState<any>(null);
 
@@ -22,6 +26,19 @@ export default function Dashboard() {
 		setIsEditing(true);
 	};
 
+	const handleBuild = async (profileId: Id<"profiles">) => {
+		try {
+			await triggerBuild({ profileId });
+			toast.success("Build started", {
+				description: "Check the build status below.",
+			});
+		} catch (error) {
+			toast.error("Build failed", {
+				description: String(error),
+			});
+		}
+	};
+
 	return (
 		<div className="min-h-screen bg-slate-950 text-white p-8">
 			<header className="flex justify-between items-center mb-8">
@@ -65,7 +82,13 @@ export default function Dashboard() {
 									>
 										Edit
 									</Button>
-									<Button size="sm">Build</Button>
+									<Button size="sm" onClick={() => handleBuild(profile._id)}>
+										Build
+									</Button>
+								</div>
+
+								<div className="mt-4 pt-4 border-t border-slate-800">
+									<BuildsPanel profileId={profile._id} />
 								</div>
 							</div>
 						))}