openship 0.1.0 → 0.1.1

package/apps/dashboard/src/app/(dashboard)/(deployment)/deploy/[slug]/components/SkeletonLoader.tsx

@@ -0,0 +1,87 @@
+import { PageContainer } from "@/components/ui/PageContainer";
+
+const Shimmer = ({ className }: { className?: string }) => (
+  <div className={`bg-muted animate-pulse rounded-lg ${className ?? ""}`} />
+);
+
+const SkeletonLoader = () => (
+  <div className="min-h-screen bg-background">
+    <PageContainer>
+      <div className="grid lg:grid-cols-[1fr_340px] gap-6">
+        {/* Main column */}
+        <div className="space-y-5">
+          {/* Project Settings */}
+          <div className="bg-card rounded-2xl border border-border/50 p-5 space-y-4">
+            <div className="flex items-center gap-3">
+              <Shimmer className="w-8 h-8 rounded-lg" />
+              <Shimmer className="h-5 w-32" />
+            </div>
+            <Shimmer className="h-10 rounded-xl" />
+            <div className="grid grid-cols-3 gap-3">
+              {[1, 2, 3, 4, 5, 6].map((i) => (
+                <Shimmer key={i} className="h-14 rounded-lg" />
+              ))}
+            </div>
+            <Shimmer className="h-10 rounded-xl" />
+          </div>
+
+          {/* Build Settings */}
+          <div className="bg-card rounded-2xl border border-border/50 p-5 space-y-4">
+            <div className="flex items-center gap-3">
+              <Shimmer className="w-8 h-8 rounded-lg" />
+              <Shimmer className="h-5 w-28" />
+            </div>
+            {[1, 2, 3].map((i) => (
+              <div key={i}>
+                <Shimmer className="h-4 w-24 mb-2" />
+                <Shimmer className="h-10 rounded-xl" />
+              </div>
+            ))}
+          </div>
+
+          {/* Environment Variables */}
+          <div className="bg-card rounded-2xl border border-border/50 p-5 space-y-4">
+            <div className="flex items-center gap-3">
+              <Shimmer className="w-8 h-8 rounded-lg" />
+              <Shimmer className="h-5 w-40" />
+            </div>
+            {[1, 2].map((i) => (
+              <div key={i} className="flex gap-3">
+                <Shimmer className="flex-1 h-10 rounded-xl" />
+                <Shimmer className="flex-1 h-10 rounded-xl" />
+                <Shimmer className="w-10 h-10 rounded-xl" />
+              </div>
+            ))}
+          </div>
+
+          {/* Project Name */}
+          <div className="bg-card rounded-2xl border border-border/50 p-5 space-y-4">
+            <Shimmer className="h-4 w-24" />
+            <Shimmer className="h-10 rounded-xl" />
+            <Shimmer className="h-4 w-56" />
+          </div>
+        </div>
+
+        {/* Sidebar */}
+        <div className="space-y-4">
+          <div className="bg-card rounded-2xl border border-border/50 p-4">
+            <div className="flex items-center gap-3">
+              <Shimmer className="w-8 h-8 rounded-lg" />
+              <div className="flex-1 space-y-1.5">
+                <Shimmer className="h-4 w-32" />
+                <Shimmer className="h-3 w-20" />
+              </div>
+            </div>
+          </div>
+          <div className="bg-card rounded-2xl border border-border/50 p-4 space-y-3">
+            <Shimmer className="h-4 w-16" />
+            <Shimmer className="h-9 rounded-xl" />
+          </div>
+          <Shimmer className="h-10 rounded-xl" />
+        </div>
+      </div>
+    </PageContainer>
+  </div>
+);
+
+export default SkeletonLoader;

package/apps/dashboard/src/app/(dashboard)/(deployment)/deploy/[slug]/page.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { useRouter, useParams, useSearchParams } from "next/navigation";
+import ProjectSettings from "@/components/import-project/ProjectSettings";
+import BuildSettings from "@/components/import-project/BuildSettings";
+import DockerSettings from "@/components/import-project/DockerSettings";
+import ComposeServices from "@/components/import-project/ComposeServices";
+import EnvironmentVariables from "@/components/import-project/EnvironmentVariables";
+import Sidebar from "./components/Sidebar";
+import { decodeSlug } from "@/utils/repoSlug";
+import { useDeployment } from "@/context/DeploymentContext";
+import SkeletonLoader from "./components/SkeletonLoader";
+import ErrorState from "@/components/shared/ErrorState";
+import { PageContainer } from "@/components/ui/PageContainer";
+
+interface DeployError {
+    type: 'invalid_url' | 'repo_not_found' | 'initialization_failed';
+    message: string;
+    details?: string;
+}
+
+const ProjectName: React.FC = () => {
+    const { config, updateConfig } = useDeployment();
+    return (
+        <div className="bg-card rounded-2xl border border-border/50">
+            <div className="px-5 py-5">
+                <label className="text-[15px] font-semibold text-foreground mb-2 block">
+                    Project Name
+                </label>
+                <input
+                    type="text"
+                    value={config.projectName}
+                    onChange={(e) => updateConfig({ projectName: e.target.value })}
+                    placeholder="my-awesome-project"
+                    className="w-full px-4 py-2.5 bg-muted/30 border border-border/50 rounded-xl text-sm text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all"
+                />
+                <p className="text-sm text-muted-foreground mt-1.5">
+                    A unique identifier for your deployment
+                </p>
+            </div>
+        </div>
+    );
+};
+
+const DeployRepository: React.FC = () => {
+    const params = useParams();
+    const router = useRouter();
+    const slug = params.slug as string;
+    const { config, initializeFromRepo, initializeFromLocal } = useDeployment();
+    const searchParams = useSearchParams();
+    const force = searchParams.get("force") || undefined;
+    
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<DeployError | null>(null);
+    const hasInitialized = useRef<boolean>(false);
+
+    useEffect(() => {
+        const initialize = async () => {
+            if (hasInitialized.current || !slug) return;
+            hasInitialized.current = true;
+
+            const decoded = decodeSlug(slug);
+
+            if (!decoded) {
+                setError({
+                    type: 'invalid_url',
+                    message: 'Invalid Repository URL',
+                    details: 'The repository URL format is not recognized. Please check the URL and try again.'
+                });
+                setLoading(false);
+                return;
+            }
+
+            let result;
+            if (decoded.kind === "local") {
+                result = await initializeFromLocal(decoded.path);
+            } else {
+                result = await initializeFromRepo(decoded.owner, decoded.repo, force);
+            }
+
+            if (!result.success) {
+                // If build is already in progress, redirect to build page (handled elsewhere)
+                if ('buildInProgress' in result && result.buildInProgress) {
+                    setLoading(false);
+                    return;
+                }
+
+                // Handle specific error cases
+                if (result.error) {
+                    setError({
+                        type: result.errorType === 'api_error' ? 'repo_not_found' : 'initialization_failed',
+                        message: decoded.kind === 'local' ? 'Failed to Load Project' : 'Failed to Load Repository',
+                        details: result.error
+                    });
+                } else {
+                    setError({
+                        type: 'initialization_failed',
+                        message: decoded.kind === 'local' ? 'Failed to Load Project' : 'Failed to Load Repository',
+                        details: decoded.kind === 'local'
+                            ? 'We couldn\'t scan this folder. Make sure the path is correct and accessible.'
+                            : 'We couldn\'t load this repository. It might be private, doesn\'t exist, or you don\'t have access to it.'
+                    });
+                }
+            }
+            
+            setLoading(false);
+        };
+
+        initialize();
+    }, [slug, initializeFromRepo, force, router]);
+
+    if (loading) {
+        return <SkeletonLoader />;
+    }
+
+    if (error) {
+        return (
+            <ErrorState 
+                type="repo-not-found" 
+                error={{
+                    message: error.message,
+                    details: error.details
+                }}
+            />
+        );
+    }
+
+    if (!config.repo || !config.owner) {
+        return null;
+    }
+
+    return (
+        <div className="min-h-screen bg-background">
+            <PageContainer>
+                <div className="grid lg:grid-cols-[1fr_340px] gap-6">
+                    <div className="space-y-5">
+                        {/* App flow: framework picker + build settings */}
+                        {config.projectType === "app" && (
+                            <>
+                                <ProjectSettings />
+                                <BuildSettings />
+                            </>
+                        )}
+
+                        {/* Docker flow: single Dockerfile, just port */}
+                        {config.projectType === "docker" && (
+                            <DockerSettings />
+                        )}
+
+                        {/* Services flow: compose parsed services (env is per-service) */}
+                        {config.projectType === "services" && (
+                            <ComposeServices />
+                        )}
+
+                        {/* Global env vars — app & docker only (compose has per-service env) */}
+                        {config.projectType !== "services" && (
+                            <EnvironmentVariables />
+                        )}
+                        <ProjectName />
+                    </div>
+                    <Sidebar />
+                </div>
+            </PageContainer>
+        </div>
+    );
+};
+
+export default DeployRepository;

package/apps/dashboard/src/app/(dashboard)/(deployment)/layout.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { DeploymentProvider } from "@/context/DeploymentContext";
+
+export default function DeploymentLayout({ children }: { children: React.ReactNode }) {
+  return <DeploymentProvider>{children}</DeploymentProvider>;
+}

package/apps/dashboard/src/app/(dashboard)/billing/page.tsx

@@ -1,10 +1,3 @@
 export default function BillingPage() {
-  return (
-    <div>
-      <h1 className="text-2xl font-bold">Billing</h1>
-      <p className="mt-2 text-gray-600">
-        Manage your subscription, usage, and payment methods.
-      </p>
-    </div>
-  );
+  return <div />;
 }

package/apps/dashboard/src/app/(dashboard)/deployments/components/CommitDetailsModal.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import React, { useState } from "react";
+import { X, Github, GitCommit, ExternalLink, User, Calendar } from "lucide-react";
+import { formatDate } from "@/utils/date";
+import FileIcon from "@/components/ui/FileIcon";
+import type { Deployment } from "../types";
+
+interface CommitDetailsModalProps {
+  deployment: Deployment;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const CommitDetailsModal: React.FC<CommitDetailsModalProps> = ({
+  deployment,
+  isOpen,
+  onClose,
+}) => {
+  const [expandedSection, setExpandedSection] = useState<'added' | 'modified' | 'removed' | null>('modified');
+
+  if (!isOpen) return null;
+
+  const hasCommitData = deployment.commit && deployment.commit.hash && deployment.commit.hash !== 'N/A';
+  const commitUrl = deployment.owner && deployment.repo && deployment.commit?.hash
+    ? `https://github.com/${deployment.owner}/${deployment.repo}/commit/${deployment.commit.hash}`
+    : null;
+
+  const changedFiles = deployment.commit?.changedFiles || [];
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 transition-opacity"
+        onClick={onClose}
+      />
+
+      {/* Modal */}
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
+        <div
+          className="bg-card rounded-2xl shadow-2xl max-w-3xl w-full max-h-[85vh] overflow-hidden pointer-events-auto animate-in zoom-in-95 duration-200 border border-border/50"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          <div className="sticky top-0 bg-card border-b border-border/50 px-6 py-5 flex items-center justify-between z-10">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
+                <GitCommit className="w-5 h-5 text-primary" />
+              </div>
+              <div>
+                <h2 className="text-xl font-bold text-foreground">Commit Details</h2>
+                {hasCommitData && (
+                  <p className="text-sm text-muted-foreground font-mono">{deployment.commit.hash}</p>
+                )}
+              </div>
+            </div>
+            <button
+              onClick={onClose}
+              className="w-10 h-10 rounded-full hover:bg-muted flex items-center justify-center transition-colors"
+            >
+              <X className="w-5 h-5 text-muted-foreground" />
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="overflow-y-auto max-h-[calc(85vh-88px)] p-6">
+            {hasCommitData ? (
+              <div className="space-y-6">
+                {/* Commit Message */}
+                <div className="bg-primary/5 rounded-2xl p-5 border border-primary/10">
+                  <div className="flex items-start gap-3">
+                    <div className="w-10 h-10 rounded-xl bg-card flex items-center justify-center flex-shrink-0 shadow-sm border border-border/50">
+                      <GitCommit className="w-5 h-5 text-primary" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-base font-semibold text-foreground mb-2">
+                        {deployment.commit.message}
+                      </p>
+                      <div className="flex items-center gap-3 text-sm text-muted-foreground">
+                        <div className="flex items-center gap-1.5">
+                          <User className="w-4 h-4" />
+                          <span>{deployment.commit.author}</span>
+                        </div>
+                        <span className="text-muted-foreground/30">•</span>
+                        <div className="flex items-center gap-1.5">
+                          <Calendar className="w-4 h-4" />
+                          <span>{formatDate(deployment.commit.timestamp, undefined, undefined, true)}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Deployment Info */}
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="bg-muted/40 border border-border/50 rounded-xl p-4">
+                    <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
+                      Project
+                    </p>
+                    <p className="text-base font-medium text-foreground">
+                      {deployment.projectName || 'Unknown Project'}
+                    </p>
+                  </div>
+                  <div className="bg-muted/40 border border-border/50 rounded-xl p-4">
+                    <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
+                      Domain
+                    </p>
+                    <p className="text-base font-medium text-foreground truncate">
+                      {deployment.domain || 'No domain'}
+                    </p>
+                  </div>
+                  <div className="bg-muted/40 border border-border/50 rounded-xl p-4">
+                    <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
+                      Status
+                    </p>
+                    <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium ${
+                      deployment.status === 'success' ? 'bg-emerald-500/10 text-emerald-600' :
+                      deployment.status === 'failed' ? 'bg-red-500/10 text-red-600' :
+                      deployment.status === 'building' ? 'bg-blue-500/10 text-blue-600' :
+                      'bg-muted text-muted-foreground'
+                    }`}>
+                      {deployment.status.charAt(0).toUpperCase() + deployment.status.slice(1)}
+                    </span>
+                  </div>
+                  <div className="bg-muted/40 border border-border/50 rounded-xl p-4">
+                    <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
+                      Environment
+                    </p>
+                    <p className="text-base font-medium text-foreground">
+                      {deployment.environment || 'production'}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Changed Files */}
+                {changedFiles && changedFiles.length > 0 && (
+                  <div>
+                    <h3 className="text-base font-bold text-foreground mb-3 flex items-center gap-2">
+                      Changed Files ({changedFiles.length})
+                    </h3>
+                    <div className="bg-muted/40 rounded-xl border border-border/50 p-4">
+                      <div className="space-y-2">
+                        {changedFiles.map((file: any, idx: number) => {
+                          const fileTypeConfig: Record<string, { bg: string; text: string; label: string }> = {
+                            added: { bg: 'bg-emerald-500/10', text: 'text-emerald-600', label: '+ Added' },
+                            modified: { bg: 'bg-blue-500/10', text: 'text-blue-600', label: '~ Modified' },
+                            removed: { bg: 'bg-red-500/10', text: 'text-red-600', label: '- Removed' },
+                          };
+                          const typeConfig = fileTypeConfig[file.type] || fileTypeConfig.modified;
+
+                          return (
+                            <div
+                              key={idx}
+                              className="flex items-center gap-3 p-3 bg-card rounded-lg border border-border/50 hover:bg-muted/60 transition-colors"
+                            >
+                              <FileIcon fileName={file.name} language={file.language} style={{}} />
+                              <span className="text-sm text-foreground flex-1 min-w-0 truncate font-mono">
+                                {file.name}
+                              </span>
+                              <span className={`px-2.5 py-1 rounded-full text-xs font-medium ${typeConfig.bg} ${typeConfig.text}`}>
+                                {typeConfig.label}
+                              </span>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* Action Buttons */}
+                <div className="flex gap-3 pt-4 border-t border-border/50">
+                  {commitUrl && (
+                    <a
+                      href={commitUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex-1 inline-flex items-center justify-center gap-2 px-5 py-3 bg-foreground text-background rounded-xl font-medium text-sm hover:opacity-90 transition-all"
+                    >
+                      <Github className="w-4 h-4" />
+                      View on GitHub
+                    </a>
+                  )}
+                  {deployment.domain && deployment.status === 'success' && (
+                    <a
+                      href={`https://${deployment.domain}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex-1 inline-flex items-center justify-center gap-2 px-5 py-3 bg-primary text-primary-foreground rounded-xl font-medium text-sm hover:opacity-90 transition-all"
+                    >
+                      <ExternalLink className="w-4 h-4" />
+                      Visit Site
+                    </a>
+                  )}
+                </div>
+              </div>
+            ) : (
+              /* Manual Deployment */
+              <div className="text-center py-12">
+                <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mx-auto mb-4">
+                  <GitCommit className="w-8 h-8 text-muted-foreground/50" />
+                </div>
+                <h3 className="text-lg font-semibold text-foreground mb-2">
+                  Manual Deployment
+                </h3>
+                <p className="text-sm text-muted-foreground max-w-md mx-auto mb-6">
+                  This deployment was triggered manually and doesn't have commit information.
+                </p>
+                <div className="bg-muted/40 rounded-xl border border-border/50 p-4 max-w-md mx-auto">
+                  <div className="space-y-3 text-left">
+                    <div>
+                      <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1">
+                        Deployment ID
+                      </p>
+                      <code className="text-sm text-foreground font-mono">{deployment.id}</code>
+                    </div>
+                    <div>
+                      <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1">
+                        Created
+                      </p>
+                      <p className="text-sm text-foreground">{formatDate(deployment.createdAt)}</p>
+                    </div>
+                    <div>
+                      <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1">
+                        Type
+                      </p>
+                      <p className="text-sm text-foreground capitalize">{deployment.type || 'Manual'}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+

package/apps/dashboard/src/app/(dashboard)/deployments/components/DeploymentCard.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import { DeploymentMenu } from "./DeploymentMenu";
+import { CommitDetailsModal } from "./CommitDetailsModal";
+import type { Deployment } from "../types";
+import { formatDistanceToNow, formatBuildTime, getStatusConfig } from "../utils";
+import { GitBranch, Clock, ExternalLink, MoreVertical } from "lucide-react";
+import { getFrameworkConfig } from "@/components/import-project/Frameworks";
+
+interface DeploymentCardProps {
+  deployment: Deployment;
+  onStatusChange?: () => void;
+}
+
+export const DeploymentCard: React.FC<DeploymentCardProps> = ({ deployment, onStatusChange }) => {
+  const router = useRouter();
+  const [isCommitModalOpen, setIsCommitModalOpen] = useState(false);
+  const statusConfig = getStatusConfig(deployment.status);
+  const frameworkConfig = getFrameworkConfig(deployment.framework);
+
+  const hasCommitData = deployment.commit?.hash && deployment.commit.hash !== "N/A";
+  const hasCommitMessage = deployment.commit?.message && deployment.commit.message !== "Manual deployment";
+
+  return (
+    <div
+      className="px-4 py-3.5 flex items-center gap-4 hover:bg-muted/40 transition-colors cursor-pointer group"
+      onClick={() => router.push(`/build/${deployment.id}`)}
+    >
+      {/* Framework icon */}
+      <div className="w-10 h-10 rounded-xl bg-muted/60 flex items-center justify-center shrink-0 group-hover:bg-muted transition-colors">
+        {frameworkConfig.icon ? (
+          frameworkConfig.icon("hsl(var(--foreground))")
+        ) : (
+          <span className="text-xs font-mono font-bold text-muted-foreground">
+            {(deployment.framework || "?").slice(0, 2).toUpperCase()}
+          </span>
+        )}
+      </div>
+
+      {/* Main info */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-0.5">
+          <p className="text-sm font-medium text-foreground truncate">
+            {deployment.projectName || "Unknown Project"}
+          </p>
+          <span
+            className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium shrink-0 ${statusConfig.bgColor}`}
+            style={{ color: statusConfig.color }}
+          >
+            <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: statusConfig.color }} />
+            {statusConfig.label}
+          </span>
+        </div>
+        <div className="flex items-center gap-2 mt-0.5">
+          <p className="text-xs text-muted-foreground truncate max-w-[280px]">
+            {hasCommitMessage ? deployment.commit.message : "Manual deploy"}
+          </p>
+          <span className="text-muted-foreground/40">·</span>
+          <span className="text-xs text-muted-foreground shrink-0">
+            {formatDistanceToNow(new Date(deployment.createdAt))}
+          </span>
+          {deployment.buildTime ? (
+            <>
+              <span className="text-muted-foreground/40">·</span>
+              <span className="text-xs text-muted-foreground shrink-0 flex items-center gap-1">
+                <Clock className="size-3" />
+                {formatBuildTime(deployment.buildTime)}
+              </span>
+            </>
+          ) : null}
+          {deployment.branch && (
+            <>
+              <span className="text-muted-foreground/40 hidden sm:inline">·</span>
+              <span className="text-xs text-muted-foreground shrink-0 items-center gap-1 hidden sm:flex">
+                <GitBranch className="size-3" />
+                {deployment.branch}
+              </span>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Right side — commit hash + actions */}
+      <div className="flex items-center gap-2 shrink-0">
+        {hasCommitData && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              if (deployment.owner && deployment.repo) {
+                window.open(
+                  `https://github.com/${deployment.owner}/${deployment.repo}/commit/${deployment.commit.fullHash || deployment.commit.hash}`,
+                  "_blank",
+                );
+              } else {
+                setIsCommitModalOpen(true);
+              }
+            }}
+            className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors font-mono"
+          >
+            {deployment.commit.hash.slice(0, 7)}
+            {deployment.owner && deployment.repo && <ExternalLink className="size-3" />}
+          </button>
+        )}
+
+        <DeploymentMenu
+          deployment={deployment}
+          triggerClassName="w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground/50 hover:text-foreground hover:bg-muted transition-colors"
+          onStatusChange={onStatusChange}
+        />
+      </div>
+
+      <CommitDetailsModal
+        deployment={deployment}
+        isOpen={isCommitModalOpen}
+        onClose={() => setIsCommitModalOpen(false)}
+      />
+    </div>
+  );
+};