openship 0.1.0 → 0.1.1

package/apps/dashboard/src/app/(dashboard)/(deployment)/build/[id]/page.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import React, { useEffect, useRef, useCallback, useState } from "react";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { useDeployment } from "@/context/DeploymentContext";
+import DeploymentProcessing from "@/components/import-project/DeploymentProcessing";
+import BuildSkeleton from "@/components/import-project/BuildSkeleton";
+import { useAuth } from "@/context/AuthContext";
+import { Rocket, ArrowLeft, Home } from "lucide-react";
+
+const BuildPage: React.FC = () => {
+  const params = useParams();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const { isLoggedIn } = useAuth();
+  const deploymentId = params.id as string;
+  const { state, connectToBuild, loadBuildSession, redeploy } = useDeployment();
+  const hasInitialized = useRef(false);
+  const [notFound, setNotFound] = useState(false);
+
+  const loggedInRef = useRef(false);
+  useEffect(() => {
+    loggedInRef.current = isLoggedIn;
+  }, [isLoggedIn]);
+  // Initialize build session
+  useEffect(() => {
+    if (!deploymentId) {
+      router.push("/deployments");
+      return;
+    }
+
+    if (hasInitialized.current) return;
+    hasInitialized.current = true;
+
+    const initialize = async () => {
+      // Coming from deploy page with fresh deployment
+      if (state.deploymentId === deploymentId && state.isDeploying) {
+        await connectToBuild();
+        return;
+      }
+      const result = await loadBuildSession(deploymentId);
+      if (!result.success) {
+        setNotFound(true);
+      }
+    };
+
+    if (!searchParams.get('redeploy')) {
+      initialize();
+    }
+
+  }, [deploymentId, state.deploymentId, state.isDeploying, connectToBuild, loadBuildSession, router]);
+
+  // Handle redeploy with URL update.
+  // After router.replace the page remounts — the init effect sees
+  // state.isDeploying === true and calls connectToBuild() once.
+  // We must NOT call connectToBuild here too, or it fires twice.
+  const handleRedeploy = useCallback(async () => {
+    const newDeploymentId = await redeploy(deploymentId);
+
+    if (newDeploymentId) {
+      if (newDeploymentId !== deploymentId) {
+        router.replace(`/build/${newDeploymentId}`, { scroll: false });
+      } else {
+        // Same ID (shouldn't happen normally) — start build directly
+        await connectToBuild(newDeploymentId);
+      }
+    }
+  }, [redeploy, deploymentId, router, connectToBuild]);
+
+  const redeployTriggeredRef = useRef(false);
+
+  useEffect(() => {
+    if (searchParams.get('redeploy') && !redeployTriggeredRef.current) {
+      redeployTriggeredRef.current = true;
+      handleRedeploy();
+    }
+  }, [searchParams, handleRedeploy]);
+
+  if (notFound) {
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center p-6">
+        <div className="max-w-md w-full text-center">
+          <div className="bg-card rounded-2xl border border-border/50 px-8 py-12">
+            {/* SVG Illustration */}
+            <div className="relative mx-auto w-56 h-40 mb-6">
+              <svg className="absolute inset-0 w-full h-full" viewBox="0 0 224 160" fill="none">
+                {/* Background broken card */}
+                <rect x="52" y="30" width="120" height="90" rx="14" fill="var(--th-sf-04)" />
+                <rect x="42" y="20" width="120" height="90" rx="14" fill="var(--th-card-bg)" stroke="var(--th-bd-default)" strokeWidth="1" />
+
+                {/* Card header bar */}
+                <rect x="42" y="20" width="120" height="26" rx="14" fill="var(--th-sf-05)" />
+                <circle cx="58" cy="33" r="3.5" fill="#ef4444" fillOpacity="0.6" />
+                <circle cx="69" cy="33" r="3.5" fill="#eab308" fillOpacity="0.6" />
+                <circle cx="80" cy="33" r="3.5" fill="#22c55e" fillOpacity="0.6" />
+
+                {/* Broken content lines */}
+                <rect x="56" y="56" width="40" height="4" rx="2" fill="var(--th-on-12)" />
+                <rect x="56" y="66" width="70" height="3.5" rx="1.75" fill="var(--th-on-08)" />
+                <rect x="56" y="75" width="25" height="3.5" rx="1.75" fill="var(--th-on-08)" />
+                <rect x="88" y="75" width="30" height="3.5" rx="1.75" fill="var(--th-on-08)" />
+
+                {/* X mark in circle */}
+                <circle cx="102" cy="95" r="10" fill="var(--th-on-05)" stroke="var(--th-on-15)" strokeWidth="1" />
+                <path d="M97 90l10 10M107 90l-10 10" stroke="var(--th-on-30)" strokeWidth="2" strokeLinecap="round" />
+
+                {/* Question mark */}
+                <circle cx="188" cy="60" r="20" fill="var(--th-on-05)" />
+                <circle cx="188" cy="60" r="14" fill="var(--th-card-bg)" stroke="var(--th-on-20)" strokeWidth="1.5" strokeDasharray="4 3" />
+                <text x="188" y="66" textAnchor="middle" fill="var(--th-on-40)" fontSize="16" fontWeight="600">?</text>
+
+                {/* Decorative dots */}
+                <circle cx="20" cy="50" r="4" fill="var(--th-on-10)" />
+                <circle cx="30" cy="130" r="5" fill="var(--th-on-08)" />
+                <circle cx="200" cy="30" r="3" fill="var(--th-on-12)" />
+                <circle cx="210" cy="120" r="4" fill="var(--th-on-06)" />
+
+                {/* Sparkles */}
+                <path d="M16 95l2-4 2 4-4-2 4 0-4 2z" fill="var(--th-on-16)" />
+                <path d="M195 140l1.5-3 1.5 3-3-1.5 3 0-3 1.5z" fill="var(--th-on-12)" />
+              </svg>
+            </div>
+
+            <h2 className="text-xl font-semibold text-foreground/80 mb-2">
+              Deployment not found
+            </h2>
+            <p className="text-sm text-muted-foreground leading-relaxed mb-8 max-w-xs mx-auto">
+              This deployment doesn't exist or you don't have access to it.
+              It may have been removed or the link is incorrect.
+            </p>
+
+            <div className="flex flex-col gap-3">
+              <Link
+                href="/deployments"
+                className="inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-primary text-primary-foreground rounded-xl text-sm font-medium hover:bg-primary/90 transition-colors"
+              >
+                <Rocket className="w-4 h-4" />
+                View Deployments
+              </Link>
+              <Link
+                href="/"
+                className="inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-muted/50 text-foreground rounded-xl text-sm font-medium hover:bg-muted transition-colors"
+              >
+                <Home className="w-4 h-4" />
+                Go Home
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!state.deploymentId) {
+    return <BuildSkeleton />;
+  }
+
+  return <DeploymentProcessing onRedeploy={handleRedeploy} />;
+};
+
+export default BuildPage;

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

@@ -0,0 +1,166 @@
+import React from "react";
+import { Terminal, FolderOutput, Server, Globe, Container, Layers, Hash, ExternalLink, Cloud, Monitor } from "lucide-react";
+import { useDeployment } from "@/context/DeploymentContext";
+import { getFrameworkConfig } from "@/components/import-project/Frameworks";
+import { STACKS, STACK_ICONS } from "@repo/core";
+
+const BuildSummary: React.FC = () => {
+  const { config } = useDeployment();
+  const isApp = config.projectType === "app";
+  const isDocker = config.projectType === "docker";
+  const isServices = config.projectType === "services";
+
+  const fw = isApp ? getFrameworkConfig(config.framework) : null;
+  const stackDef = STACKS[config.framework as keyof typeof STACKS];
+  const dockerIcon = STACK_ICONS["docker"];
+
+  const services = config.services || [];
+  const exposedServices = services.filter((s) => s.exposed);
+
+  // For app/docker: single domain display
+  const domainDisplay =
+    !isServices && (config.domainType === "custom" && config.customDomain
+      ? config.customDomain
+      : config.domain
+        ? `${config.domain}.opsh.io`
+        : null);
+
+  return (
+    <div className="p-4 rounded-xl bg-gradient-to-br from-primary/5 via-primary/3 to-transparent border border-primary/10 space-y-3">
+      <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+        Deploy Summary
+      </p>
+      <div className="space-y-2.5">
+        {/* Domain — for app/docker */}
+        {domainDisplay && (
+          <div className="flex items-center gap-2.5">
+            <div className="w-7 h-7 rounded-md bg-primary/10 flex items-center justify-center">
+              <Globe className="size-3.5 text-primary" />
+            </div>
+            <div className="min-w-0">
+              <p className="text-xs text-muted-foreground">Domain</p>
+              <p className="text-sm font-medium text-foreground truncate">
+                {domainDisplay}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Services summary — for compose */}
+        {isServices && (
+          <div className="flex items-center gap-2.5">
+            <div className="w-7 h-7 rounded-md bg-primary/10 flex items-center justify-center">
+              <Layers className="size-3.5 text-primary" />
+            </div>
+            <div>
+              <p className="text-xs text-muted-foreground">Services</p>
+              <p className="text-sm font-medium text-foreground">
+                {services.length} total · {exposedServices.length} exposed
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Stack identity */}
+        <div className="flex items-center gap-2.5">
+          <div className="w-7 h-7 rounded-md bg-muted/60 flex items-center justify-center overflow-hidden">
+            {isApp && fw ? (
+              fw.icon("hsl(var(--foreground))")
+            ) : dockerIcon ? (
+              <img src={dockerIcon} alt="Docker" className="w-4 h-4" />
+            ) : isServices ? (
+              <Layers className="size-3.5 text-muted-foreground" />
+            ) : (
+              <Container className="size-3.5 text-muted-foreground" />
+            )}
+          </div>
+          <div>
+            <p className="text-xs text-muted-foreground">
+              {isApp ? "Framework" : isServices ? "Stack" : "Runtime"}
+            </p>
+            <p className="text-sm font-medium text-foreground">
+              {isApp && fw ? fw.name : stackDef?.name || "Docker"}
+            </p>
+          </div>
+        </div>
+
+        {/* Build location — for apps with build step */}
+        {isApp && config.options.hasBuild && (
+          <div className="flex items-center gap-2.5">
+            <div className="w-7 h-7 rounded-md bg-muted/60 flex items-center justify-center">
+              {config.buildStrategy === "local" ? (
+                <Monitor className="size-3.5 text-muted-foreground" />
+              ) : (
+                <Cloud className="size-3.5 text-muted-foreground" />
+              )}
+            </div>
+            <div>
+              <p className="text-xs text-muted-foreground">Build Location</p>
+              <p className="text-sm font-medium text-foreground">
+                {config.buildStrategy === "local" ? "Local Machine" : "Server"}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* App-specific: build/install/output */}
+        {isApp && config.options.buildCommand && (
+          <div className="flex items-center gap-2.5">
+            <div className="w-7 h-7 rounded-md bg-muted/60 flex items-center justify-center">
+              <Terminal className="size-3.5 text-muted-foreground" />
+            </div>
+            <div className="min-w-0">
+              <p className="text-xs text-muted-foreground">Build</p>
+              <p className="text-sm font-medium text-foreground truncate">
+                {config.options.buildCommand}
+              </p>
+            </div>
+          </div>
+        )}
+        {isApp && config.options.installCommand && (
+          <div className="flex items-center gap-2.5">
+            <div className="w-7 h-7 rounded-md bg-muted/60 flex items-center justify-center">
+              <Server className="size-3.5 text-muted-foreground" />
+            </div>
+            <div className="min-w-0">
+              <p className="text-xs text-muted-foreground">Install</p>
+              <p className="text-sm font-medium text-foreground truncate">
+                {config.options.installCommand}
+              </p>
+            </div>
+          </div>
+        )}
+        {isApp && config.options.outputDirectory && (
+          <div className="flex items-center gap-2.5">
+            <div className="w-7 h-7 rounded-md bg-muted/60 flex items-center justify-center">
+              <FolderOutput className="size-3.5 text-muted-foreground" />
+            </div>
+            <div className="min-w-0">
+              <p className="text-xs text-muted-foreground">Output</p>
+              <p className="text-sm font-medium text-foreground truncate">
+                {config.options.outputDirectory}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Docker-specific: port */}
+        {isDocker && config.options.productionPort && (
+          <div className="flex items-center gap-2.5">
+            <div className="w-7 h-7 rounded-md bg-muted/60 flex items-center justify-center">
+              <Hash className="size-3.5 text-muted-foreground" />
+            </div>
+            <div className="min-w-0">
+              <p className="text-xs text-muted-foreground">Port</p>
+              <p className="text-sm font-medium text-foreground">
+                {config.options.productionPort}
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(BuildSummary);

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

@@ -0,0 +1,119 @@
+import React, { useState } from "react";
+import { Copy, Check, Server, Info } from "lucide-react";
+
+interface DnsRecord {
+  type: "CNAME" | "A" | "TXT";
+  host: string;
+  value: string;
+}
+
+interface DnsConfigurationProps {
+  domain: string;
+  records?: DnsRecord[];
+  mode?: "cloud" | "selfhosted";
+}
+
+const RECORD_DESCRIPTIONS: Record<string, string> = {
+  CNAME: "Routes your domain through the edge network",
+  A: "Points your domain to the server",
+  TXT: "Verifies domain ownership",
+};
+
+const DnsConfiguration: React.FC<DnsConfigurationProps> = ({ domain, records, mode }) => {
+  const [copied, setCopied] = useState<string | null>(null);
+
+  const copyToClipboard = (text: string, id: string) => {
+    navigator.clipboard.writeText(text);
+    setCopied(id);
+    setTimeout(() => setCopied(null), 2000);
+  };
+
+  const displayRecords = records ?? [];
+
+  if (!displayRecords.length) return null;
+
+  return (
+    <div className="bg-card rounded-xl border border-border/50 shadow-lg overflow-hidden animate-in fade-in duration-300">
+      {/* Header */}
+      <div className="flex items-center gap-3 px-5 py-4 border-b border-border/40">
+        <div className="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center">
+          <Server className="size-4 text-primary" />
+        </div>
+        <div>
+          <h3 className="text-sm font-semibold text-foreground">DNS Configuration</h3>
+          <p className="text-xs text-muted-foreground">
+            Add these records at your DNS provider for <span className="font-medium text-foreground">{domain}</span>
+          </p>
+        </div>
+      </div>
+
+      <div className="p-5 space-y-3">
+        {displayRecords.map((record, i) => (
+            <div key={i} className="bg-muted/30 rounded-xl border border-border/50 p-4">
+              <div className="flex items-center gap-3 mb-3">
+                <span className="px-2.5 py-1 bg-foreground text-background text-xs font-bold rounded-lg">
+                  {record.type}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {RECORD_DESCRIPTIONS[record.type] ?? ""}
+                </span>
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-1.5">Name / Host</p>
+                  <div className="flex items-center gap-2 bg-background rounded-lg border border-border/50 px-3 py-2">
+                    <code className="flex-1 text-sm font-medium text-foreground">{record.host}</code>
+                    <button
+                      onClick={() => copyToClipboard(record.host, `${i}-host`)}
+                      className="p-1 hover:bg-muted rounded-md transition-colors shrink-0"
+                    >
+                      {copied === `${i}-host` ? (
+                        <Check className="size-3.5 text-emerald-500" />
+                      ) : (
+                        <Copy className="size-3.5 text-muted-foreground" />
+                      )}
+                    </button>
+                  </div>
+                </div>
+                <div>
+                  <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-1.5">Value / Target</p>
+                  <div className="flex items-center gap-2 bg-background rounded-lg border border-border/50 px-3 py-2">
+                    <code className="flex-1 text-sm font-medium text-foreground truncate">{record.value}</code>
+                    <button
+                      onClick={() => copyToClipboard(record.value, `${i}-value`)}
+                      className="p-1 hover:bg-muted rounded-md transition-colors shrink-0"
+                    >
+                      {copied === `${i}-value` ? (
+                        <Check className="size-3.5 text-emerald-500" />
+                      ) : (
+                        <Copy className="size-3.5 text-muted-foreground" />
+                      )}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+
+        <div className="flex items-start gap-2 p-3 bg-primary/5 rounded-xl border border-primary/10">
+            <Info className="size-3.5 text-primary shrink-0 mt-0.5" />
+            <div className="text-xs text-muted-foreground leading-relaxed">
+              {mode === "selfhosted" ? (
+                <p>
+                  Add the <span className="font-medium text-foreground">A record</span> pointing to your server IP,
+                  then add the <span className="font-medium text-foreground">TXT record</span> for ownership verification.
+                </p>
+              ) : (
+                <p>
+                  Add the <span className="font-medium text-foreground">CNAME record</span> for routing,
+                  then add the <span className="font-medium text-foreground">TXT record</span> for ownership verification.
+                </p>
+              )}
+            </div>
+          </div>
+      </div>
+    </div>
+  );
+};
+
+export default DnsConfiguration;