openship 0.1.1 → 0.1.7

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

@@ -1,162 +0,0 @@
-"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

@@ -1,166 +0,0 @@
-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

@@ -1,119 +0,0 @@
-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;