Skip to content

v0.15.0 #51

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arjunkomath merged 6 commits into from
Jun 26, 2026
Merged

v0.15.0 #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1c84d6d
Ensure stateful builds use deployment target
arjunkomath Jun 25, 2026
6d35178
Merge pull request #48 from techulus/feat/stateful-build-target-builds
arjunkomath Jun 25, 2026
7a14476
Simplify loaders and improve rollout logs
arjunkomath Jun 25, 2026
2069be1
Merge pull request #49 from techulus/simplify-loaders-rollout-logs
arjunkomath Jun 25, 2026
312bde4
Make services canvas interactive
arjunkomath Jun 26, 2026
e7e7c4c
Merge pull request #50 from techulus/interactive-service-canvas
arjunkomath Jun 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 5 additions & 157 deletions web/app/(dashboard)/dashboard/servers/[id]/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,161 +1,10 @@
import { SetBreadcrumbs } from "@/components/core/breadcrumb-data";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";

function ServerDetailsSkeleton() {
return (
<Card>
<CardHeader>
<CardTitle>Server Details</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-4 md:grid-cols-3">
{Array.from({ length: 9 }).map((_, index) => (
<div key={index} className="space-y-2">
<Skeleton className="h-3 w-24" />
<Skeleton className="h-4 w-32 max-w-full" />
</div>
))}
</div>
</CardContent>
</Card>
);
}

function HealthMetricSkeleton() {
return (
<div className="space-y-3">
<div className="flex items-center gap-2">
<Skeleton className="size-4 rounded" />
<Skeleton className="h-4 w-16" />
</div>
<Skeleton className="h-2 w-full rounded-full" />
<Skeleton className="h-3 w-10" />
</div>
);
}

function HealthStatusSkeleton() {
return (
<div className="flex items-start gap-3">
<Skeleton className="size-8 rounded-md" />
<div className="space-y-2">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-3 w-16" />
</div>
</div>
);
}

function SystemHealthSkeleton() {
return (
<Card>
<CardHeader>
<CardTitle>System Health</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid gap-4 sm:grid-cols-3">
<HealthMetricSkeleton />
<HealthMetricSkeleton />
<HealthMetricSkeleton />
</div>
<div className="border-t pt-4">
<div className="grid gap-4 sm:grid-cols-3">
<HealthStatusSkeleton />
<HealthStatusSkeleton />
<HealthStatusSkeleton />
</div>
</div>
</CardContent>
</Card>
);
}

function RunningServicesSkeleton() {
return (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Skeleton className="size-5 rounded" />
<Skeleton className="h-5 w-36" />
</CardTitle>
<CardDescription>
<Skeleton className="h-4 w-48" />
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-3 md:grid-cols-2">
{Array.from({ length: 4 }).map((_, index) => (
<div
key={index}
className="flex items-center gap-2.5 rounded-lg border px-3 py-2.5"
>
<Skeleton className="size-8 shrink-0 rounded-md" />
<div className="min-w-0 flex-1 space-y-2">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-3 w-44 max-w-full" />
</div>
</div>
))}
</div>
</CardContent>
</Card>
);
}

function AgentLogsSkeleton() {
return (
<div className="space-y-2">
<h3 className="text-sm font-medium">Agent Logs</h3>
<div className="flex h-[420px] flex-col overflow-hidden rounded-lg border bg-card">
<div className="flex items-center gap-2 border-b p-3">
<Skeleton className="h-9 w-64 max-w-full rounded-md" />
<Skeleton className="ml-auto size-8 rounded-md" />
</div>
<div className="space-y-2 p-4">
{Array.from({ length: 12 }).map((_, index) => (
<Skeleton
key={index}
className="h-3"
style={{ width: `${92 - (index % 5) * 9}%` }}
/>
))}
</div>
</div>
</div>
);
}

function DangerZoneSkeleton() {
return (
<Card className="border-destructive/30">
<CardHeader>
<CardTitle>
<Skeleton className="h-5 w-28" />
</CardTitle>
<CardDescription>
<Skeleton className="h-4 w-72 max-w-full" />
</CardDescription>
</CardHeader>
<CardContent>
<Skeleton className="h-9 w-32 rounded-md" />
</CardContent>
</Card>
);
}

export default function Loading() {
return (
<>
<SetBreadcrumbs
items={[{ label: "Dashboard", href: "/dashboard" }]}
/>
<SetBreadcrumbs items={[{ label: "Dashboard", href: "/dashboard" }]} />
<div
aria-hidden="true"
className="container max-w-7xl mx-auto px-4 py-6 space-y-6"
Expand All @@ -166,11 +15,10 @@ export default function Loading() {
<Skeleton className="h-5 w-16 rounded-md" />
</div>

<ServerDetailsSkeleton />
<SystemHealthSkeleton />
<RunningServicesSkeleton />
<AgentLogsSkeleton />
<DangerZoneSkeleton />
<Skeleton className="h-32 rounded-xl" />
<Skeleton className="h-40 rounded-xl" />
<Skeleton className="h-36 rounded-xl" />
<Skeleton className="h-[420px] rounded-lg" />
</div>
<div aria-live="polite" className="sr-only">
Loading server details
Expand Down
53 changes: 53 additions & 0 deletions web/app/api/projects/[id]/services/[serviceId]/position/route.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { and, eq, isNull } from "drizzle-orm";
import { headers } from "next/headers";
import { z } from "zod";
import { db } from "@/db";
import { services } from "@/db/schema";
import { auth } from "@/lib/auth";

const positionSchema = z.object({
canvasX: z.number().int().min(0).max(10000),
canvasY: z.number().int().min(0).max(10000),
});

export async function PATCH(
request: Request,
{ params }: { params: Promise<{ id: string; serviceId: string }> },
) {
const session = await auth.api.getSession({
headers: await headers(),
});

if (!session) {
return Response.json({ error: "Unauthorized" }, { status: 401 });
}

const { id: projectId, serviceId } = await params;
const parsed = positionSchema.safeParse(await request.json());

if (!parsed.success) {
return Response.json({ error: "Invalid position" }, { status: 400 });
}

const [service] = await db
.update(services)
.set(parsed.data)
.where(
and(
eq(services.id, serviceId),
eq(services.projectId, projectId),
isNull(services.deletedAt),
),
)
.returning({
id: services.id,
canvasX: services.canvasX,
canvasY: services.canvasY,
});

if (!service) {
return Response.json({ error: "Service not found" }, { status: 404 });
}

return Response.json(service);
}
91 changes: 10 additions & 81 deletions web/components/dashboard/dashboard-page-skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,92 +1,21 @@
import { Skeleton } from "@/components/ui/skeleton";

function DashboardHeaderSkeleton() {
return (
<header className="border-b">
<div className="container max-w-full mx-auto px-4 h-14 flex items-center justify-between">
<div className="flex items-center gap-3">
<Skeleton className="size-6 rounded" />
<Skeleton className="h-4 w-28" />
</div>
<Skeleton className="size-8 rounded-md" />
</div>
</header>
);
}

function ProjectCardSkeleton() {
return (
<div className="min-h-[80px] rounded-lg border p-4">
<div className="flex h-full gap-3">
<Skeleton className="size-10 shrink-0 rounded-md" />
<div className="flex min-w-0 flex-1 flex-col justify-between">
<Skeleton className="h-4 w-2/3" />
<Skeleton className="h-3 w-20" />
</div>
</div>
</div>
);
}

function ServerRowSkeleton() {
return (
<div className="rounded-lg border p-4">
<div className="flex items-center justify-between gap-4">
<div className="flex min-w-0 flex-1 items-center gap-3">
<Skeleton className="size-10 shrink-0 rounded-md" />
<div className="min-w-0 flex-1 space-y-2">
<Skeleton className="h-4 w-40" />
<Skeleton className="h-3 w-56 max-w-full" />
</div>
</div>
<Skeleton className="hidden h-8 w-24 rounded-md sm:block" />
</div>
</div>
);
}

export function DashboardPageSkeleton() {
return (
<div className="min-h-screen bg-background">
<DashboardHeaderSkeleton />
<header className="border-b">
<div className="container max-w-full mx-auto px-4 h-14 flex items-center justify-between">
<Skeleton className="h-4 w-36" />
<Skeleton className="size-8 rounded-md" />
</div>
</header>
<main
aria-hidden="true"
className="container max-w-7xl mx-auto px-4 py-6 space-y-12"
className="container max-w-7xl mx-auto px-4 py-6 space-y-8"
>
<section className="grid gap-4 md:grid-cols-3">
<Skeleton className="h-24 rounded-lg" />
<Skeleton className="h-24 rounded-lg" />
<Skeleton className="h-24 rounded-lg" />
</section>

<section className="space-y-6">
<div className="flex items-center justify-between gap-4">
<div className="space-y-2">
<Skeleton className="h-5 w-24" />
<Skeleton className="h-4 w-44" />
</div>
<Skeleton className="h-9 w-28 rounded-md" />
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<ProjectCardSkeleton />
<ProjectCardSkeleton />
<ProjectCardSkeleton />
</div>
</section>

<section className="space-y-4">
<div className="flex items-center justify-between gap-4">
<div className="space-y-2">
<Skeleton className="h-5 w-20" />
<Skeleton className="h-4 w-36" />
</div>
<Skeleton className="h-9 w-28 rounded-md" />
</div>
<div className="space-y-3">
<ServerRowSkeleton />
<ServerRowSkeleton />
</div>
</section>
<Skeleton className="h-24 rounded-lg" />
<Skeleton className="h-48 rounded-xl" />
<Skeleton className="h-36 rounded-xl" />
</main>
<div aria-live="polite" className="sr-only">
Loading dashboard
Expand Down
Loading
Loading