+
+
+
+
+
+
+ v_alpha001
+ {deploymentDetails.description}
+
+
+
+
+
+
+
+
+
+ Created by
+ 
+
+ {deploymentDetails.author.name}
+
+
+
+
+
+
+
+
+
+
+
+ {/* Expandable Logs Section */}
+
+
+
+
+
+
+ {deploymentDetails.branch}
+
+
+ {deploymentDetails.commit}
+
+
+ using image
+
+ {imageName}:{imageTag}
+
+
+
+ Build logs
+
+
+
+
+ handleFilterChange("all")}
+ icon={Layers3}
+ label="All Logs"
+ />
+ handleFilterChange("errors")}
+ icon={CircleXMark}
+ label="Errors"
+ />
+ handleFilterChange("warnings")}
+ icon={TriangleWarning2}
+ label="Warnings"
+ />
+
+ }
+ placeholder="Find in logs..."
+ value={searchTerm}
+ onChange={handleSearchChange}
+ />
+
+
+
+
+
+
+ {/* Fade overlay */}
+ {showFade && (
+
+ )}
+
+ {filteredLogs.length === 0 ? (
+
+
+ {searchTerm
+ ? `No logs match "${searchTerm}"`
+ : `No ${logFilter === "all" ? "build" : logFilter} logs available`}
+
+ ) : (
+
+ {filteredLogs.map((log, index) => (
+
+ )}
+
+ {log.timestamp}
+ {log.level && (
+ [{log.level.toUpperCase()}]
+ )}
+ {log.message}
+
+ ))}
+
+
+);
diff --git a/apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/skeleton.tsx b/apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/skeleton.tsx
new file mode 100644
index 0000000000..67db5b49b0
--- /dev/null
+++ b/apps/dashboard/app/(app)/projects/[projectId]/details/active-deployment-card/skeleton.tsx
@@ -0,0 +1,67 @@
+import { ChevronDown, CodeBranch, CodeCommit, FolderCloud } from "@unkey/icons";
+import { Badge, Button, Card } from "@unkey/ui";
+import { cn } from "@unkey/ui/src/lib/utils";
+import { STATUS_CONFIG } from ".";
+import { StatusIndicator } from "./status-indicator";
+
+export const ActiveDeploymentCardSkeleton = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+
+
+
+ Created by
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ using image
+
+
+
+
+ Build logs
+
+
+ ) => void;
+ onDelete: () => void;
+ onCancel: () => void;
+};
+
+export function EnvVarRow({
+ envVar,
+ isEditing,
+ onEdit,
+ onSave,
+ onDelete,
+ onCancel,
+}: EnvVarRowProps) {
+ const [editKey, setEditKey] = useState(envVar.key);
+ const [editValue, setEditValue] = useState(envVar.value);
+ const [isValueVisible, setIsValueVisible] = useState(false);
+
+ // Make value visible when entering edit mode
+ useEffect(() => {
+ if (isEditing) {
+ setIsValueVisible(true);
+ }
+ }, [isEditing]);
+
+ const handleSave = () => {
+ if (!editKey.trim() || !editValue.trim()) {
+ return;
+ }
+ onSave({ key: editKey.trim(), value: editValue.trim() });
+ };
+
+ const handleCancel = () => {
+ setEditKey(envVar.key);
+ setEditValue(envVar.value);
+ setIsValueVisible(false);
+ onCancel();
+ };
+
+ if (isEditing) {
+ return (
+ (null);
+ const [newVar, setNewVar] = useState({ key: "", value: "", isSecret: false });
+ const [isAddingNew, setIsAddingNew] = useState(false);
+ const trpcUtil = trpc.useUtils();
+
+ const allEnvVars = trpcUtil.deploy.project.envs.getEnvs.getData({
+ projectId,
+ });
+
+ const envVars = allEnvVars?.[environment] || [];
+ const [localEnvVars, setLocalEnvVars] = useState([]);
+
+ // Sync server data with local state when it changes
+ useEffect(() => {
+ if (envVars.length > 0) {
+ setLocalEnvVars(envVars);
+ }
+ }, [envVars]);
+
+ const addVariable = useCallback(() => {
+ if (!newVar.key.trim() || !newVar.value.trim()) {
+ return;
+ }
+
+ const newEnvVar: EnvVar = {
+ id: Date.now().toString(),
+ key: newVar.key.trim(),
+ value: newVar.value.trim(),
+ isSecret: newVar.isSecret,
+ };
+
+ setLocalEnvVars((prev) => [...prev, newEnvVar]);
+ setNewVar({ key: "", value: "", isSecret: false });
+ setIsAddingNew(false);
+
+ // TODO: Call create mutation when available
+ }, [newVar]);
+
+ const updateVariable = useCallback((id: string, updates: Partial) => {
+ setLocalEnvVars((prev) => prev.map((env) => (env.id === id ? { ...env, ...updates } : env)));
+ setEditingId(null);
+
+ // TODO: Call update mutation when available
+ }, []);
+
+ const deleteVariable = useCallback((id: string) => {
+ setLocalEnvVars((prev) => prev.filter((env) => env.id !== id));
+
+ // TODO: Call delete mutation when available
+ }, []);
+
+ const startEditing = useCallback((id: string) => {
+ setEditingId(id);
+ setIsAddingNew(false);
+ }, []);
+
+ const cancelEditing = useCallback(() => {
+ setEditingId(null);
+ setIsAddingNew(false);
+ setNewVar({ key: "", value: "", isSecret: false });
+ }, []);
+
+ const startAdding = useCallback(() => {
+ setIsAddingNew(true);
+ setEditingId(null);
+ }, []);
+
+ return {
+ envVars: localEnvVars,
+ editingId,
+ newVar,
+ isAddingNew,
+ addVariable,
+ updateVariable,
+ deleteVariable,
+ startEditing,
+ cancelEditing,
+ startAdding,
+ setNewVar,
+ };
+}
diff --git a/apps/dashboard/app/(app)/projects/[projectId]/details/env-variables-section/index.tsx b/apps/dashboard/app/(app)/projects/[projectId]/details/env-variables-section/index.tsx
new file mode 100644
index 0000000000..7b39b23782
--- /dev/null
+++ b/apps/dashboard/app/(app)/projects/[projectId]/details/env-variables-section/index.tsx
@@ -0,0 +1,168 @@
+import { cn } from "@/lib/utils";
+import { ChevronDown, Plus } from "@unkey/icons";
+import { Button } from "@unkey/ui";
+import { type ReactNode, useState } from "react";
+import { AddEnvVarRow } from "./add-env-var-row";
+import { EnvVarRow } from "./env-var-row";
+import { useEnvVars } from "./hooks/use-env-var";
+
+type EnvironmentVariablesSectionProps = {
+ icon: ReactNode;
+ title: string;
+ projectId: string;
+ environment: "production" | "preview" | "development";
+};
+
+const ANIMATION_STYLES = {
+ expand: "transition-all duration-400 ease-in",
+ slideIn: "transition-all duration-300 ease-out",
+} as const;
+
+export function EnvironmentVariablesSection({
+ icon,
+ projectId,
+ environment,
+ title,
+}: EnvironmentVariablesSectionProps) {
+ const {
+ envVars,
+ editingId,
+ newVar,
+ isAddingNew,
+ addVariable,
+ updateVariable,
+ deleteVariable,
+ startEditing,
+ cancelEditing,
+ startAdding,
+ setNewVar,
+ } = useEnvVars({ projectId, environment });
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ const toggleExpanded = () => {
+ setIsExpanded(!isExpanded);
+ if (!isExpanded) {
+ // Cancel any ongoing editing when collapsing
+ cancelEditing();
+ }
+ };
+
+ const showPlusButton = isExpanded && !editingId && !isAddingNew;
+
+ return (
+
+ );
+};
diff --git a/apps/dashboard/app/(app)/projects/[projectId]/details/project-details-expandables/sections.tsx b/apps/dashboard/app/(app)/projects/[projectId]/details/project-details-expandables/sections.tsx
new file mode 100644
index 0000000000..f677937a53
--- /dev/null
+++ b/apps/dashboard/app/(app)/projects/[projectId]/details/project-details-expandables/sections.tsx
@@ -0,0 +1,271 @@
+import type { DeploymentDetails } from "@/lib/trpc/routers/deploy/project/active-deployment/getDetails";
+import {
+ Bolt,
+ ChartActivity,
+ CircleHalfDottedClock,
+ CodeBranch,
+ CodeCommit,
+ Connections,
+ FolderCloud,
+ Gear,
+ Github,
+ Grid,
+ Harddrive,
+ Heart,
+ Location2,
+ MessageWriting,
+ PaperClip2,
+ User,
+} from "@unkey/icons";
+import { Badge, TimestampInfo } from "@unkey/ui";
+import type { ReactNode } from "react";
+
+export type DetailItem = {
+ icon: ReactNode;
+ label: string;
+ content: ReactNode;
+ alignment?: "center" | "start";
+};
+
+export type DetailSection = {
+ title: string;
+ items: DetailItem[];
+};
+
+export const createDetailSections = (details: DeploymentDetails): DetailSection[] => [
+ {
+ title: "Active deployment",
+ items: [
+ {
+ icon:
+
+
+ {[0, 0.15, 0.3, 0.45].map((delay, index) => (
+
+ );
+}
diff --git a/apps/dashboard/app/(app)/projects/[projectId]/details/collapsible-row.tsx b/apps/dashboard/app/(app)/projects/[projectId]/details/collapsible-row.tsx
new file mode 100644
index 0000000000..fc103e6e7e
--- /dev/null
+++ b/apps/dashboard/app/(app)/projects/[projectId]/details/collapsible-row.tsx
@@ -0,0 +1,22 @@
+import { ChevronDown } from "@unkey/icons";
+import { Button } from "@unkey/ui";
+import type { ReactNode } from "react";
+
+type CollapsibleRowProps = {
+ icon: ReactNode;
+ title: string;
+ onToggle?: () => void;
+};
+export function CollapsibleRow({ icon, title, onToggle }: CollapsibleRowProps) {
+ return (
+
+ key={index}
+ className={cn(
+ "absolute inset-0 size-2 rounded-full",
+ index === 0 && "bg-successA-9 opacity-75",
+ index === 1 && "bg-successA-10 opacity-60",
+ index === 2 && "bg-successA-11 opacity-40",
+ index === 3 && "bg-successA-12 opacity-25",
+ )}
+ style={{
+ animation: "ping 2s cubic-bezier(0, 0, 0.2, 1) infinite",
+ animationDelay: `${delay}s`,
+ }}
+ />
+ ))}
+
+
+
+
+ );
+}
diff --git a/apps/dashboard/app/(app)/projects/[projectId]/details/domain-row.tsx b/apps/dashboard/app/(app)/projects/[projectId]/details/domain-row.tsx
new file mode 100644
index 0000000000..efda47f424
--- /dev/null
+++ b/apps/dashboard/app/(app)/projects/[projectId]/details/domain-row.tsx
@@ -0,0 +1,49 @@
+import { CircleCheck, CircleWarning, Link4, ShareUpRight } from "@unkey/icons";
+import { Badge } from "@unkey/ui";
+import { cn } from "@unkey/ui/src/lib/utils";
+
+type DomainRowProps = {
+ domain: string;
+ status: "success" | "error";
+ tags: string[];
+};
+
+export function DomainRow({ domain, status, tags }: DomainRowProps) {
+ const statusConfig = {
+ success: { variant: "success" as const, icon: CircleCheck },
+ error: { variant: "error" as const, icon: CircleWarning },
+ };
+
+ const { variant, icon: StatusIcon } = statusConfig[status];
+
+ return (
+
+ {icon}
+
+
+ {title}
+
+
+
+
+ );
+}
+
+function InfoTag({ label, className }: { label: string; className?: string }) {
+ return (
+
+
+ {domain}
+
+ {tags.map((tag) => (
+
+ {label}
+ );
+}
diff --git a/apps/dashboard/app/(app)/projects/[projectId]/details/env-variables-section/add-env-var-row.tsx b/apps/dashboard/app/(app)/projects/[projectId]/details/env-variables-section/add-env-var-row.tsx
new file mode 100644
index 0000000000..4a47fe1467
--- /dev/null
+++ b/apps/dashboard/app/(app)/projects/[projectId]/details/env-variables-section/add-env-var-row.tsx
@@ -0,0 +1,71 @@
+import { Switch } from "@/components/ui/switch";
+import { Button, Input } from "@unkey/ui";
+
+type AddEnvVarRowProps = {
+ value: { key: string; value: string; isSecret: boolean };
+ onChange: (value: { key: string; value: string; isSecret: boolean }) => void;
+ onSave: () => void;
+ onCancel: () => void;
+};
+
+export function AddEnvVarRow({ value, onChange, onSave, onCancel }: AddEnvVarRowProps) {
+ const handleSave = () => {
+ if (!value.key.trim() || !value.value.trim()) {
+ return;
+ }
+ onSave();
+ };
+
+ return (
+
+
+ );
+}
diff --git a/apps/dashboard/app/(app)/projects/[projectId]/details/env-variables-section/env-var-row.tsx b/apps/dashboard/app/(app)/projects/[projectId]/details/env-variables-section/env-var-row.tsx
new file mode 100644
index 0000000000..f33026ef41
--- /dev/null
+++ b/apps/dashboard/app/(app)/projects/[projectId]/details/env-variables-section/env-var-row.tsx
@@ -0,0 +1,120 @@
+import type { EnvVar } from "@/lib/trpc/routers/deploy/project/envs/list";
+import { Eye, EyeSlash, PenWriting3, Trash } from "@unkey/icons";
+import { Button, Input } from "@unkey/ui";
+import { useEffect, useState } from "react";
+
+type EnvVarRowProps = {
+ envVar: EnvVar;
+ isEditing: boolean;
+ onEdit: () => void;
+ onSave: (updates: Partial
+ onChange({ ...value, key: e.target.value })}
+ placeholder="Variable name"
+ className="min-h-[32px] text-xs w-48"
+ autoFocus
+ />
+ =
+ onChange({ ...value, value: e.target.value })}
+ placeholder="Variable value"
+ className="min-h-[32px] text-xs flex-1"
+ type={value.isSecret ? "password" : "text"}
+ />
+
+
+
+
+ Secret
+ onChange({ ...value, isSecret: checked })}
+ />
+
+
+
+
+
+ );
+ }
+
+ return (
+
+ setEditKey(e.target.value)}
+ placeholder="Variable name"
+ className="min-h-[32px] text-xs w-48 "
+ autoFocus
+ />
+ =
+ setEditValue(e.target.value)}
+ placeholder="Variable value"
+ className="min-h-[32px] text-xs flex-1"
+ type="text"
+ />
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/dashboard/app/(app)/projects/[projectId]/details/env-variables-section/hooks/use-env-var.tsx b/apps/dashboard/app/(app)/projects/[projectId]/details/env-variables-section/hooks/use-env-var.tsx
new file mode 100644
index 0000000000..bf3a94863f
--- /dev/null
+++ b/apps/dashboard/app/(app)/projects/[projectId]/details/env-variables-section/hooks/use-env-var.tsx
@@ -0,0 +1,91 @@
+import { trpc } from "@/lib/trpc/client";
+import type { EnvVar } from "@/lib/trpc/routers/deploy/project/envs/list";
+import { useCallback, useEffect, useState } from "react";
+
+type UseEnvVarsProps = {
+ projectId: string;
+ environment: "production" | "preview" | "development";
+};
+
+export function useEnvVars({ environment, projectId }: UseEnvVarsProps) {
+ const [editingId, setEditingId] = useState
+
+ {envVar.key}
+ =
+
+
+
+ {envVar.isSecret && !isValueVisible ? "••••••••••••••••" : envVar.value}
+
+ {envVar.isSecret && (
+
+ )}
+
+
+
+
+
+ {/* Header */}
+
+
+ );
+}
diff --git a/apps/dashboard/app/(app)/projects/[projectId]/details/project-details-expandables/detail-section.tsx b/apps/dashboard/app/(app)/projects/[projectId]/details/project-details-expandables/detail-section.tsx
new file mode 100644
index 0000000000..a358894a2e
--- /dev/null
+++ b/apps/dashboard/app/(app)/projects/[projectId]/details/project-details-expandables/detail-section.tsx
@@ -0,0 +1,55 @@
+import type { ReactNode } from "react";
+import type { DetailItem } from "./sections";
+
+type DetailRowProps = {
+ icon: ReactNode;
+ label: string;
+ children: ReactNode;
+ alignment?: "center" | "start";
+};
+
+function DetailRow({ icon, label, children, alignment = "center" }: DetailRowProps) {
+ const alignmentClass = alignment === "start" ? "items-start" : "items-center";
+
+ return (
+
+
+
+ {/* Concave Separator - render with animation */}
+
+ {icon}
+
+
+ {title} {envVars.length > 0 ? `(${envVars.length})` : null}{" "}
+
+
+
+
+
+
+
+
+
+
+
+ {/* Expandable Content */}
+
+
+
+
+
+ {envVars.length === 0 && !isAddingNew ? (
+
+
+ No environment variables configured
+
+ ) : (
+
+ {envVars.map((envVar, index) => (
+
+ )}
+
+ startEditing(envVar.id)}
+ onSave={(updates) => updateVariable(envVar.id, updates)}
+ onDelete={() => deleteVariable(envVar.id)}
+ onCancel={cancelEditing}
+ />
+
+ ))}
+ {isAddingNew && (
+
+
+ )}
+
+
+ );
+}
+
+type DetailSectionProps = {
+ title: string;
+ items: DetailItem[];
+ isFirst?: boolean;
+};
+
+export function DetailSection({ title, items, isFirst = false }: DetailSectionProps) {
+ return (
+
+
+
+ {icon}
+
+ {label}
+ {children}
+
+
+ );
+}
diff --git a/apps/dashboard/app/(app)/projects/[projectId]/details/project-details-expandables/index.tsx b/apps/dashboard/app/(app)/projects/[projectId]/details/project-details-expandables/index.tsx
new file mode 100644
index 0000000000..28c780d23c
--- /dev/null
+++ b/apps/dashboard/app/(app)/projects/[projectId]/details/project-details-expandables/index.tsx
@@ -0,0 +1,157 @@
+import { trpc } from "@/lib/trpc/client";
+import { Book2, Cube, DoubleChevronRight } from "@unkey/icons";
+import { Button, InfoTooltip } from "@unkey/ui";
+import { cn } from "@unkey/ui/src/lib/utils";
+import { DetailSection } from "./detail-section";
+import { createDetailSections } from "./sections";
+
+type ProjectDetailsExpandableProps = {
+ tableDistanceToTop: number;
+ isOpen: boolean;
+ onClose: () => void;
+ activeDeploymentId: string;
+};
+
+export const ProjectDetailsExpandable = ({
+ tableDistanceToTop,
+ isOpen,
+ onClose,
+ activeDeploymentId,
+}: ProjectDetailsExpandableProps) => {
+ const trpcUtil = trpc.useUtils();
+ const details = trpcUtil.deploy.project.activeDeployment.details.getData({
+ deploymentId: activeDeploymentId,
+ });
+
+ // Shouldn't happen, because layout handles this case
+ if (!details) {
+ return null;
+ }
+
+ const detailSections = createDetailSections(details);
+
+ return (
+
+
+
+ {title}
+
+
+ {items.map((item, index) => (
+
+ {item.content}
+
+ ))}
+
+
+
+
+ {/* Scrollable content container */}
+
+
+ {/* Details Header */}
+
+
+
+
+
+
+
+ {/* Animated content with stagger effect */}
+
+
+
+ {/* Domains Section */}
+
+
+ {detailSections.map((section, index) => (
+
+
+
+
+
+
+ dashboard
+
+
+
+ api.gateway.com
+
+
+ {["staging.gateway.com", "dev.gateway.com"].map((region) => (
+
+ }
+ >
+
+
+
+ {region}
+
+
+ ))}
+
+ +2
+
+
+
+
+ ))}
+
+ {details.repository.owner}/
+ {details.repository.name}
+
+ ),
+ },
+ {
+ icon:
+ {details.description}
+
+ ),
+ },
+ {
+ icon:
+ {details.image}
+
+ ),
+ },
+ {
+ icon:
+ 
+ {details.author.name}
+
+ ),
+ },
+ {
+ icon:
+ {details.instances}
+ vm
+
+ ),
+ },
+ {
+ icon:
+ {details.regions.map((region) => (
+
+ {region}
+
+ ))}
+
+ ),
+ },
+ {
+ icon:
+ {details.cpu}vCPUs
+
+ ),
+ },
+ {
+ icon:
+ {details.memory}mb
+
+ ),
+ },
+ {
+ icon:
+ {details.storage}
+ mb
+
+ ),
+ },
+ {
+ icon:
+
+ ),
+ },
+ {
+ icon:
+
+ {details.healthcheck.method}
+
+
+
+ /
+
+ {details.healthcheck.path.replace(/^\/+/, "")}
+
+
+
+
+ every
+
+ {details.healthcheck.interval}s
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Build Info",
+ items: [
+ {
+ icon:
+ {details.scaling.min} to{" "}
+ {details.scaling.max} instances
+
+
+ at {details.scaling.threshold}% CPU
+ threshold
+
+
+ {details.imageSize}
+ mb
+
+ ),
+ },
+ {
+ icon:
+ {details.buildTime}s
+
+ ),
+ },
+ {
+ icon:
+ {details.baseImage}
+
+ ),
+ },
+ {
+ icon:
+
+
+
+
+
+ }
+ />
+
+
+ setIsDetailsOpen(false)}
+ activeDeploymentId={FAKE_DEPLOYMENT_ID}
+ />
+
+ {children}
+ Overview
;
+}
diff --git a/apps/dashboard/app/(app)/projects/[projectId]/deployments/navigation.tsx b/apps/dashboard/app/(app)/projects/[projectId]/navigations/project-navigation.tsx
similarity index 58%
rename from apps/dashboard/app/(app)/projects/[projectId]/deployments/navigation.tsx
rename to apps/dashboard/app/(app)/projects/[projectId]/navigations/project-navigation.tsx
index be821d8cd7..e7d6f95c08 100644
--- a/apps/dashboard/app/(app)/projects/[projectId]/deployments/navigation.tsx
+++ b/apps/dashboard/app/(app)/projects/[projectId]/navigations/project-navigation.tsx
@@ -1,15 +1,17 @@
"use client";
import { QuickNavPopover } from "@/components/navbar-popover";
+import { NavbarActionButton } from "@/components/navigation/action-button";
import { Navbar } from "@/components/navigation/navbar";
import { trpc } from "@/lib/trpc/client";
-import { Cube, Refresh3 } from "@unkey/icons";
+import { ArrowDottedRotateAnticlockwise, Cube, Dots, ListRadio, Refresh3 } from "@unkey/icons";
+import { Button, Separator } from "@unkey/ui";
import { RepoDisplay } from "../../_components/list/repo-display";
-type DeploymentsNavigationProps = {
+type ProjectNavigationProps = {
projectId: string;
};
-export const DeploymentsNavigation = ({ projectId }: DeploymentsNavigationProps) => {
+export const ProjectNavigation = ({ projectId }: ProjectNavigationProps) => {
const { data: projectData, isLoading } = trpc.deploy.project.list.useInfiniteQuery(
{}, // No filters needed
{
@@ -64,16 +66,31 @@ export const DeploymentsNavigation = ({ projectId }: DeploymentsNavigationProps)
- {activeProject.gitRepositoryUrl && (
-
- ;
+ path: string;
+};
+
+export const ProjectSubNavigation = ({
+ onMount,
+ detailsExpandableTrigger,
+}: {
+ onMount: (distanceToTop: number) => void;
+ detailsExpandableTrigger: React.ReactNode;
+}) => {
+ const router = useRouter();
+ const params = useParams();
+ const pathname = usePathname();
+ const projectId = params?.projectId as string;
+
+ const anchorRef = useRef(null);
+
+ useEffect(() => {
+ if (onMount) {
+ const distanceToTop = anchorRef.current?.getBoundingClientRect().top ?? 0;
+ onMount(distanceToTop);
+ }
+ }, [onMount]);
+
+ // Detect current route and set active tab
+ const getCurrentTab = (): string => {
+ const segments = pathname?.split("/");
+
+ if (!segments) {
+ throw new Error("URL Segments are empty.");
+ }
+
+ const tabIndex = segments.findIndex((segment) => segment === projectId) + 1;
+ const currentTab = segments[tabIndex];
+
+ const validTabs = ["overview", "deployments", "logs", "settings"];
+ return validTabs.includes(currentTab) ? currentTab : "overview";
+ };
+
+ const activeTab = getCurrentTab();
+
+ const tabs: TabItem[] = [
+ {
+ id: "overview",
+ label: "Overview",
+ icon: GridCircle,
+ path: `/projects/${projectId}`,
+ },
+ {
+ id: "deployments",
+ label: "Deployments",
+ icon: Cloud,
+ path: `/projects/${projectId}/deployments`,
+ },
+ {
+ id: "logs",
+ label: "Logs",
+ icon: Layers3,
+ path: `/projects/${projectId}/logs`,
+ },
+ ];
+
+ const handleTabChange = (path: string) => {
+ router.push(path);
+ };
+
+ if (!projectId) {
+ throw new Error("ProjectSubNavigation requires a valid project ID");
+ }
+
+ return (
+
+ {activeProject.gitRepositoryUrl && (
+
);
};
diff --git a/apps/dashboard/app/(app)/projects/[projectId]/navigations/project-sub-navigation.tsx b/apps/dashboard/app/(app)/projects/[projectId]/navigations/project-sub-navigation.tsx
new file mode 100644
index 0000000000..a3cd400f0e
--- /dev/null
+++ b/apps/dashboard/app/(app)/projects/[projectId]/navigations/project-sub-navigation.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Cloud, GridCircle, Layers3 } from "@unkey/icons";
+import type { IconProps } from "@unkey/icons/src/props";
+import { useParams, usePathname, useRouter } from "next/navigation";
+import { useEffect, useRef } from "react";
+
+type TabItem = {
+ id: string;
+ label: string;
+ icon?: React.ComponentType
+
+ )}
+
+ Visit Project URL
+
+
+
- )}
+
+
+ );
+};
diff --git a/apps/dashboard/app/(app)/projects/[projectId]/page.tsx b/apps/dashboard/app/(app)/projects/[projectId]/page.tsx
index 1d302611f0..0cabc2d6f0 100644
--- a/apps/dashboard/app/(app)/projects/[projectId]/page.tsx
+++ b/apps/dashboard/app/(app)/projects/[projectId]/page.tsx
@@ -1,23 +1,95 @@
"use client";
+import { Cloud, Earth, FolderCloud, Page2 } from "@unkey/icons";
+import { cn } from "@unkey/ui/src/lib/utils";
+import type { ReactNode } from "react";
+import { ActiveDeploymentCard } from "./details/active-deployment-card";
+import { DomainRow } from "./details/domain-row";
+import { EnvironmentVariablesSection } from "./details/env-variables-section";
+import { useProjectLayout } from "./layout-provider";
-import { DeploymentsListControlCloud } from "./deployments/components/control-cloud";
-import { DeploymentsListControls } from "./deployments/components/controls";
-import { DeploymentsList } from "./deployments/components/table/deployments-list";
-import { DeploymentsNavigation } from "./deployments/navigation";
+const DOMAINS = [
+ {
+ domain: "api.gateway.com",
+ status: "success" as const,
+ tags: ["https", "primary"],
+ },
+ {
+ domain: "dev.gateway.com",
+ status: "error" as const,
+ tags: ["https", "primary"],
+ },
+ {
+ domain: "staging.gateway.com",
+ status: "success" as const,
+ tags: ["https", "primary"],
+ },
+];
+
+export default function ProjectDetails() {
+ const { isDetailsOpen, projectId } = useProjectLayout();
-export default function Deployments({
- params: { projectId },
-}: {
- params: { projectId: string };
-}) {
return (
-
+ {tabs.map((tab) => {
+ const IconComponent = tab.icon || GridCircle;
+ const isActive = tab.id === activeTab;
+ return (
+ // Our component has too many default options using a native button easier to use in this case.
+
+ );
+ })}
+
+ {detailsExpandableTrigger}
+
-
- ;
+export type DeploymentLogsInput = z.infer;
+
+export const getDeploymentBuildLogs = t.procedure
+ .use(requireUser)
+ .use(requireWorkspace)
+ .use(withRatelimit(ratelimit.read))
+ .input(deploymentLogsInputSchema)
+ .output(deploymentLogsOutputSchema)
+ .query(async () => {
+ // In real implementation: fetch from database/logging service by deploymentId
+ // If not sorted, sort by timestamp asc for chronological build order
+ const sortedLogs = MOCK_LOGS.sort((a, b) => a.timestamp - b.timestamp);
+ return {
+ logs: sortedLogs,
+ };
+ });
diff --git a/apps/dashboard/lib/trpc/routers/deploy/project/active-deployment/getDetails.ts b/apps/dashboard/lib/trpc/routers/deploy/project/active-deployment/getDetails.ts
new file mode 100644
index 0000000000..970c1cc7ac
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/deploy/project/active-deployment/getDetails.ts
@@ -0,0 +1,99 @@
+import { ratelimit, requireUser, requireWorkspace, t, withRatelimit } from "@/lib/trpc/trpc";
+import { z } from "zod";
+
+const deploymentDetailsOutputSchema = z.object({
+ // Active deployment
+ repository: z.object({
+ owner: z.string(),
+ name: z.string(),
+ }),
+ branch: z.string(),
+ commit: z.string(),
+ description: z.string(),
+ image: z.string(),
+ author: z.object({
+ name: z.string(),
+ avatar: z.string(),
+ }),
+ createdAt: z.number(),
+
+ // Runtime settings
+ instances: z.number(),
+ regions: z.array(z.string()),
+ cpu: z.number(),
+ memory: z.number(),
+ storage: z.number(),
+ healthcheck: z.object({
+ method: z.string(),
+ path: z.string(),
+ interval: z.number(),
+ }),
+ scaling: z.object({
+ min: z.number(),
+ max: z.number(),
+ threshold: z.number(),
+ }),
+
+ // Build info
+ imageSize: z.number(),
+ buildTime: z.number(),
+ buildStatus: z.enum(["success", "failed", "pending"]),
+ baseImage: z.string(),
+ builtAt: z.number(),
+});
+
+type DeploymentDetailsOutputSchema = z.infer;
+export type DeploymentDetails = z.infer;
+
+export const getDeploymentDetails = t.procedure
+ .use(requireUser)
+ .use(requireWorkspace)
+ .use(withRatelimit(ratelimit.read))
+ .input(
+ z.object({
+ deploymentId: z.string(),
+ }),
+ )
+ .output(deploymentDetailsOutputSchema)
+ .query(() => {
+ //TODO: This should make a db look-up find the "active" and "latest" and "prod" deployment
+ const details: DeploymentDetailsOutputSchema = {
+ repository: {
+ owner: "acme",
+ name: "acme",
+ },
+ branch: "main",
+ commit: "e5f6a7b",
+ description: "Add auth routes + logging",
+ image: "unkey:latest",
+ author: {
+ name: "Oz",
+ avatar: "https://avatars.githubusercontent.com/u/138932600?s=48&v=4",
+ },
+ createdAt: Date.now(),
+
+ instances: 4,
+ regions: ["eu-west-2", "us-east-1", "ap-southeast-1"],
+ cpu: 32,
+ memory: 512,
+ storage: 1024,
+ healthcheck: {
+ method: "GET",
+ path: "/health",
+ interval: 30,
+ },
+ scaling: {
+ min: 0,
+ max: 5,
+ threshold: 80,
+ },
+
+ imageSize: 210,
+ buildTime: 45,
+ buildStatus: "success",
+ baseImage: "node:18-alpine",
+ builtAt: Date.now() - 300000,
+ };
+
+ return details;
+ });
diff --git a/apps/dashboard/lib/trpc/routers/deploy/project/envs/list.ts b/apps/dashboard/lib/trpc/routers/deploy/project/envs/list.ts
new file mode 100644
index 0000000000..d5fda50ad1
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/deploy/project/envs/list.ts
@@ -0,0 +1,87 @@
+import { ratelimit, requireUser, requireWorkspace, t, withRatelimit } from "@/lib/trpc/trpc";
+import { z } from "zod";
+
+const envVarSchema = z.object({
+ id: z.string(),
+ key: z.string(),
+ value: z.string(),
+ isSecret: z.boolean(),
+});
+
+const environmentVariablesOutputSchema = z.object({
+ production: z.array(envVarSchema),
+ preview: z.array(envVarSchema),
+ development: z.array(envVarSchema).optional(),
+});
+
+export type EnvironmentVariables = z.infer;
+export type EnvVar = z.infer;
+
+export const VARIABLES: EnvironmentVariables = {
+ production: [
+ {
+ id: "1",
+ key: "DATABASE_URL",
+ value: "postgresql://user:pass@prod.db.com:5432/app",
+ isSecret: true,
+ },
+ {
+ id: "2",
+ key: "API_KEY",
+ value: "sk_prod_1234567890abcdef",
+ isSecret: true,
+ },
+ {
+ id: "3",
+ key: "NODE_ENV",
+ value: "production",
+ isSecret: false,
+ },
+ {
+ id: "4",
+ key: "REDIS_URL",
+ value: "redis://prod.redis.com:6379",
+ isSecret: true,
+ },
+ {
+ id: "5",
+ key: "LOG_LEVEL",
+ value: "info",
+ isSecret: false,
+ },
+ ],
+ preview: [
+ {
+ id: "6",
+ key: "DATABASE_URL",
+ value: "postgresql://user:pass@staging.db.com:5432/app",
+ isSecret: true,
+ },
+ {
+ id: "7",
+ key: "API_KEY",
+ value: "sk_test_abcdef1234567890",
+ isSecret: true,
+ },
+ {
+ id: "8",
+ key: "NODE_ENV",
+ value: "development",
+ isSecret: false,
+ },
+ ],
+};
+
+export const getEnvs = t.procedure
+ .use(requireUser)
+ .use(requireWorkspace)
+ .use(withRatelimit(ratelimit.read))
+ .input(
+ z.object({
+ projectId: z.string(),
+ }),
+ )
+ .output(environmentVariablesOutputSchema)
+ .query(() => {
+ return VARIABLES;
+ });
diff --git a/apps/dashboard/lib/trpc/routers/index.ts b/apps/dashboard/lib/trpc/routers/index.ts
index 242718239c..c6e8f0e7f3 100644
--- a/apps/dashboard/lib/trpc/routers/index.ts
+++ b/apps/dashboard/lib/trpc/routers/index.ts
@@ -37,9 +37,12 @@ import { searchRolesPermissions } from "./authorization/roles/permissions/search
import { queryRoles } from "./authorization/roles/query";
import { upsertRole } from "./authorization/roles/upsert";
import { queryUsage } from "./billing/query-usage";
+import { getDeploymentBuildLogs } from "./deploy/project/active-deployment/getBuildLogs";
+import { getDeploymentDetails } from "./deploy/project/active-deployment/getDetails";
import { createProject } from "./deploy/project/create";
import { queryDeployments } from "./deploy/project/deployment/list";
import { deploymentListLlmSearch } from "./deploy/project/deployment/llm-search";
+import { getEnvs } from "./deploy/project/envs/list";
import { queryProjects } from "./deploy/project/list";
import { deploymentRouter } from "./deployment";
import { createIdentity } from "./identity/create";
@@ -313,10 +316,17 @@ export const router = t.router({
project: t.router({
list: queryProjects,
create: createProject,
- }),
- deployment: t.router({
- list: queryDeployments,
- search: deploymentListLlmSearch,
+ activeDeployment: t.router({
+ details: getDeploymentDetails,
+ buildLogs: getDeploymentBuildLogs,
+ }),
+ envs: t.router({
+ getEnvs,
+ }),
+ deployment: t.router({
+ list: queryDeployments,
+ search: deploymentListLlmSearch,
+ }),
}),
}),
deployment: deploymentRouter,
diff --git a/internal/icons/src/icons/bolt.tsx b/internal/icons/src/icons/bolt.tsx
index 2dc0e8ede1..38c3690e0f 100644
--- a/internal/icons/src/icons/bolt.tsx
+++ b/internal/icons/src/icons/bolt.tsx
@@ -10,11 +10,18 @@
* https://nucleoapp.com/license
*/
import type React from "react";
-import type { IconProps } from "../props";
+import { type IconProps, sizeMap } from "../props";
-export const Bolt: React.FC = (props) => {
+export const Bolt: React.FC = ({ size = "xl-thin", filled, ...props }) => {
+ const { size: pixelSize, strokeWidth } = sizeMap[size];
return (
-
+
);
}
+
+function SectionHeader({ icon, title }: { icon: ReactNode; title: string }) {
+ return (
+
+
+
+
+
+
+
+
+
+ {DOMAINS.map((domain) => (
+
+
+
+
+ {icon}
+
+ );
+}
+
+function Section({ children }: { children: ReactNode }) {
+ return {title}
+ {children}
;
+}
diff --git a/apps/dashboard/lib/trpc/routers/deploy/project/active-deployment/getBuildLogs.ts b/apps/dashboard/lib/trpc/routers/deploy/project/active-deployment/getBuildLogs.ts
new file mode 100644
index 0000000000..3df647abaa
--- /dev/null
+++ b/apps/dashboard/lib/trpc/routers/deploy/project/active-deployment/getBuildLogs.ts
@@ -0,0 +1,230 @@
+import { ratelimit, requireUser, requireWorkspace, t, withRatelimit } from "@/lib/trpc/trpc";
+import { z } from "zod";
+
+const LogLevel = z.enum(["info", "warning", "error"]);
+
+const LogEntry = z.object({
+ id: z.string(),
+ timestamp: z.number(),
+ level: LogLevel.optional(),
+ message: z.string(),
+});
+
+const deploymentLogsInputSchema = z.object({
+ deploymentId: z.string(),
+});
+
+const deploymentLogsOutputSchema = z.object({
+ logs: z.array(LogEntry),
+});
+
+const MOCK_LOGS: DeploymentLog[] = [
+ {
+ id: "log_1",
+ timestamp: Date.now() - 360000,
+ message: "Running build in us-east-1 (Washington, D.C.) — iad1",
+ },
+ {
+ id: "log_2",
+ timestamp: Date.now() - 359000,
+ message: "Cloning github.com/acme/api (Branch: main, Commit: e5f6a7b)",
+ level: "error",
+ },
+ {
+ id: "log_3",
+ timestamp: Date.now() - 358000,
+ message: "Build cache not found for this project",
+ },
+ {
+ id: "log_4",
+ timestamp: Date.now() - 357000,
+ message: "Clone completed in 307ms",
+ level: "warning",
+ },
+ {
+ id: "log_5",
+ timestamp: Date.now() - 356000,
+ message: "Running `unkey build`",
+ },
+ {
+ id: "log_6",
+ timestamp: Date.now() - 355000,
+ message: "Unkey CLI 0.42.1",
+ },
+ {
+ id: "log_7",
+ timestamp: Date.now() - 354000,
+ message: "Validating config files...",
+ },
+ {
+ id: "log_8",
+ timestamp: Date.now() - 353000,
+ message: "✓ env-vars.json validated",
+ },
+ {
+ id: "log_9",
+ timestamp: Date.now() - 352000,
+ message: "✓ runtime.json validated",
+ },
+ {
+ id: "log_10",
+ timestamp: Date.now() - 351000,
+ message: "✓ secrets.json decrypted successfully",
+ },
+ {
+ id: "log_11",
+ timestamp: Date.now() - 350000,
+ message: "✓ openapi.yaml parsed — 13 endpoints detected",
+ },
+ {
+ id: "log_12",
+ timestamp: Date.now() - 349000,
+ message: '⚠️ Warning: Environment variable "STRIPE_SECRET" is not set. Using fallback value',
+ level: "warning",
+ },
+ {
+ id: "log_13",
+ timestamp: Date.now() - 348000,
+ message: "Setting up runtime environment",
+ },
+ {
+ id: "log_14",
+ timestamp: Date.now() - 347000,
+ message: "Target image: unkey:latest",
+ },
+ {
+ id: "log_15",
+ timestamp: Date.now() - 346000,
+ message: "Build environment: nodejs18.x | Linux (x64)",
+ },
+ {
+ id: "log_16",
+ timestamp: Date.now() - 345000,
+ message: "Installing dependencies...",
+ },
+ {
+ id: "log_17",
+ timestamp: Date.now() - 344000,
+ message: "✓ Dependencies installed in 1.3s",
+ },
+ {
+ id: "log_18",
+ timestamp: Date.now() - 343000,
+ message: "Compiling project...",
+ },
+ {
+ id: "log_19",
+ timestamp: Date.now() - 342000,
+ message: "✓ Build successful in 331ms",
+ },
+ {
+ id: "log_20",
+ timestamp: Date.now() - 341000,
+ message: "Registering healthcheck: GET /health every 30s",
+ },
+ {
+ id: "log_21",
+ timestamp: Date.now() - 340000,
+ message: "Checking availability in selected regions...",
+ },
+ {
+ id: "log_22",
+ timestamp: Date.now() - 339000,
+ message: "✓ us-east-1 available (2 slots)",
+ },
+ {
+ id: "log_23",
+ timestamp: Date.now() - 338000,
+ message: "✓ eu-west-1 available (1 slot)",
+ },
+ {
+ id: "log_24",
+ timestamp: Date.now() - 337000,
+ message: "✓ ap-south-1 available (1 slot)",
+ },
+ {
+ id: "log_25",
+ timestamp: Date.now() - 336000,
+ message: "Creating deployment image...",
+ },
+ {
+ id: "log_26",
+ timestamp: Date.now() - 335000,
+ message:
+ "❌ Error: Failed to optimize image layer for region eu-west-1. Using fallback strategy",
+ level: "error",
+ },
+ {
+ id: "log_27",
+ timestamp: Date.now() - 334000,
+ message: "✓ Image built: 210mb",
+ },
+ {
+ id: "log_28",
+ timestamp: Date.now() - 333000,
+ message: "Launching 4 VM instances",
+ },
+ {
+ id: "log_29",
+ timestamp: Date.now() - 332000,
+ message: "✓ Scaling enabled: 0–5 instances at 80% CPU",
+ },
+ {
+ id: "log_30",
+ timestamp: Date.now() - 331000,
+ message: "Deploying to:",
+ },
+ {
+ id: "log_31",
+ timestamp: Date.now() - 330000,
+ message: " - api.gateway.com (https)",
+ },
+ {
+ id: "log_32",
+ timestamp: Date.now() - 329000,
+ message: " - internal.api.gateway.com (http)",
+ },
+ {
+ id: "log_33",
+ timestamp: Date.now() - 328000,
+ message: " - dashboard:3000, 8080, 5792",
+ },
+ {
+ id: "log_34",
+ timestamp: Date.now() - 327000,
+ message: "Activating deployment: v_alpha001",
+ },
+ {
+ id: "log_35",
+ timestamp: Date.now() - 326000,
+ message: "✓ Deployment active",
+ },
+ {
+ id: "log_36",
+ timestamp: Date.now() - 325000,
+ message: "View logs at /dashboard/logs/alpha001",
+ },
+ {
+ id: "log_37",
+ timestamp: Date.now() - 324000,
+ message: "Deployment completed in 5.7s",
+ },
+];
+
+export type DeploymentLog = z.infer