openship 0.1.0 → 0.1.1

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

@@ -0,0 +1,291 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Globe, Shield, Server, X, Copy, Check, ChevronDown, Info } from "lucide-react";
+import { domainsApi } from "@/lib/api";
+
+interface DnsRecord {
+  type: "CNAME" | "A" | "TXT";
+  host: string;
+  value: string;
+}
+
+interface DomainSettingsProps {
+  projectName: string;
+  domain: string;
+  setDomain: (domain: string) => void;
+  customDomain: string;
+  setCustomDomain: (domain: string) => void;
+  domainType: "free" | "custom";
+  setDomainType: (type: "free" | "custom") => void;
+}
+
+const RECORD_LABELS: Record<string, string> = {
+  CNAME: "Routes traffic through the edge network",
+  A: "Points to your server IP",
+  TXT: "Verifies domain ownership",
+};
+
+const DomainSettings: React.FC<DomainSettingsProps> = ({
+  projectName,
+  domain,
+  setDomain,
+  customDomain,
+  setCustomDomain,
+  domainType,
+  setDomainType,
+}) => {
+  const [showDnsModal, setShowDnsModal] = useState(false);
+  const [dnsRecords, setDnsRecords] = useState<DnsRecord[]>([]);
+  const [dnsMode, setDnsMode] = useState<"cloud" | "selfhosted">("cloud");
+  const [loading, setLoading] = useState(false);
+  const [copied, setCopied] = useState<string | null>(null);
+
+  const copy = (text: string, id: string) => {
+    navigator.clipboard.writeText(text);
+    setCopied(id);
+    setTimeout(() => setCopied(null), 2000);
+  };
+
+  // Fetch preview records when custom domain changes (debounced)
+  const fetchRecords = useCallback(async (hostname: string) => {
+    if (!hostname || hostname.length < 3 || !hostname.includes(".")) return;
+    setLoading(true);
+    try {
+      const res = await domainsApi.previewRecords(hostname);
+      setDnsRecords(res.data.records);
+      setDnsMode(res.data.mode);
+    } catch {
+      // Silently fail — user can still deploy
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (domainType !== "custom" || !customDomain) {
+      setDnsRecords([]);
+      return;
+    }
+    const timer = setTimeout(() => fetchRecords(customDomain), 400);
+    return () => clearTimeout(timer);
+  }, [customDomain, domainType, fetchRecords]);
+
+  const hasRecords = dnsRecords.length > 0 && dnsRecords.every((r) => r.value);
+  const routeRecord = dnsRecords.find((r) => r.type !== "TXT");
+
+  return (
+    <div className="bg-card rounded-xl border border-border/50 overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center gap-2.5 px-4 py-3 border-b border-border/40">
+        <div className="w-7 h-7 rounded-lg bg-primary/10 flex items-center justify-center">
+          <Globe className="size-3.5 text-primary" />
+        </div>
+        <div>
+          <h3 className="text-sm font-semibold text-foreground leading-tight">Domain</h3>
+          <p className="text-[11px] text-muted-foreground">Where your site will be accessible</p>
+        </div>
+      </div>
+
+      <div className="p-4 space-y-3">
+        {/* Toggle */}
+        <div className="flex items-center bg-border/50 rounded-lg p-0.5">
+          <button
+            type="button"
+            onClick={() => setDomainType("free")}
+            className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-all ${
+              domainType === "free"
+                ? "bg-card text-foreground shadow-sm border border-border/50"
+                : "text-muted-foreground hover:text-foreground border border-transparent"
+            }`}
+          >
+            Free Subdomain
+          </button>
+          <button
+            type="button"
+            onClick={() => setDomainType("custom")}
+            className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-all ${
+              domainType === "custom"
+                ? "bg-card text-foreground shadow-sm border border-border/50"
+                : "text-muted-foreground hover:text-foreground border border-transparent"
+            }`}
+          >
+            Custom Domain
+          </button>
+        </div>
+
+        {/* Input */}
+        {domainType === "free" ? (
+          <div>
+            <div className="flex items-center bg-muted/30 border border-border rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-primary/20 transition-all">
+              <input
+                type="text"
+                value={domain}
+                onChange={(e) => setDomain(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ""))}
+                placeholder={projectName || "my-project"}
+                className="flex-1 px-3 py-2 bg-transparent text-sm text-foreground placeholder:text-muted-foreground/50 focus:outline-none"
+              />
+              <div className="px-3 py-2 bg-muted/60 border-l border-border">
+                <span className="text-sm font-semibold text-foreground">.opsh.io</span>
+              </div>
+            </div>
+            <p className="text-[11px] text-muted-foreground mt-1.5 flex items-center gap-1">
+              <Shield className="size-3 text-emerald-500 shrink-0" />
+              SSL included &mdash; live at{" "}
+              <span className="font-medium text-foreground ml-0.5">
+                {domain || projectName || "my-project"}.opsh.io
+              </span>
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            <input
+              type="text"
+              value={customDomain}
+              onChange={(e) => setCustomDomain(e.target.value.toLowerCase())}
+              placeholder="example.com"
+              className="w-full px-3 py-2 bg-muted/30 border border-border rounded-lg text-sm text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all"
+            />
+
+            {/* Inline DNS hint */}
+            {customDomain && (
+              <div className="rounded-lg border border-border/50 bg-muted/20 overflow-hidden">
+                <div className="flex items-center gap-2 px-3 py-2">
+                  <Server className="size-3 text-muted-foreground shrink-0" />
+                  {loading ? (
+                    <p className="text-[11px] text-muted-foreground flex-1">Fetching DNS records...</p>
+                  ) : hasRecords ? (
+                    <p className="text-[11px] text-muted-foreground flex-1">
+                      Add a <span className="font-medium text-foreground">{routeRecord?.type}</span> and{" "}
+                      <span className="font-medium text-foreground">TXT</span> record at your DNS provider
+                    </p>
+                  ) : (
+                    <p className="text-[11px] text-muted-foreground flex-1">
+                      Enter a valid domain to see required DNS records
+                    </p>
+                  )}
+                  {hasRecords && (
+                    <button
+                      type="button"
+                      onClick={() => setShowDnsModal(true)}
+                      className="text-[11px] text-primary hover:text-primary/80 font-medium shrink-0 transition-colors"
+                    >
+                      View records
+                    </button>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* DNS Modal */}
+      {showDnsModal && hasRecords && (
+        <div
+          className="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-50 p-4"
+          onClick={() => setShowDnsModal(false)}
+        >
+          <div className="max-w-xl w-full" onClick={(e) => e.stopPropagation()}>
+            <div className="relative bg-card rounded-xl border border-border/50 shadow-lg overflow-hidden animate-in fade-in zoom-in-95 duration-200">
+              <button
+                onClick={() => setShowDnsModal(false)}
+                className="absolute top-3 right-3 w-8 h-8 bg-muted/50 rounded-lg flex items-center justify-center hover:bg-muted transition-colors z-10"
+              >
+                <X className="size-4 text-muted-foreground" />
+              </button>
+
+              {/* 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 for{" "}
+                    <span className="font-medium text-foreground">{customDomain}</span>
+                  </p>
+                </div>
+              </div>
+
+              {/* Records */}
+              <div className="p-5 space-y-3">
+                {dnsRecords.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_LABELS[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={() => copy(record.host, `${i}-h`)}
+                            className="p-1 hover:bg-muted rounded-md transition-colors shrink-0"
+                          >
+                            {copied === `${i}-h` ? (
+                              <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={() => copy(record.value, `${i}-v`)}
+                            className="p-1 hover:bg-muted rounded-md transition-colors shrink-0"
+                          >
+                            {copied === `${i}-v` ? (
+                              <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" />
+                  <p className="text-xs text-muted-foreground leading-relaxed">
+                    {dnsMode === "selfhosted" ? (
+                      <>
+                        Add the <span className="font-medium text-foreground">A record</span> pointing to your server IP,
+                        then the <span className="font-medium text-foreground">TXT record</span> for verification.
+                      </>
+                    ) : (
+                      <>
+                        Add the <span className="font-medium text-foreground">CNAME record</span> for routing,
+                        then the <span className="font-medium text-foreground">TXT record</span> for verification.
+                      </>
+                    )}{" "}
+                    DNS changes can take up to 48 hours.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DomainSettings;

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

@@ -0,0 +1,71 @@
+import React from "react";
+import { ArrowLeft, GitBranch, Globe, Lock } from "lucide-react";
+import { HeaderProps } from "@/components/import-project/types";
+import Link from "next/link";
+import { generateIcon } from "@/utils/icons";
+
+const Header: React.FC<HeaderProps> = ({ repoData }) => {
+  return (
+    <div className="mb-6 relative mt-10">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          {/* <Link
+            href="/deployments"
+            className="inline-flex items-center justify-center w-10 h-10 rounded-xl hover:bg-gray-100 text-gray-600 hover:text-black transition-all"
+          >
+            <ArrowLeft className="w-5 h-5" />
+          </Link>
+           */}
+          <div>
+            <h1 
+              className="font-bold text-black mb-2"
+              style={{ fontSize: '2.4rem', letterSpacing: '-0.5px' }}
+            >
+              {repoData.owner}/{repoData.repo}
+            </h1>
+            <div className="flex items-center gap-2 text-sm">
+              {repoData.private ? (
+                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-700 ring-1 ring-amber-500/20 font-semibold text-xs">
+                  <Lock className="w-3 h-3" />
+                  Private
+                </span>
+              ) : (
+                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-700 ring-1 ring-emerald-500/20 font-semibold text-xs">
+                  <Globe className="w-3 h-3" />
+                  Public
+                </span>
+              )}
+              <span className="text-gray-300">•</span>
+              <span className="inline-flex items-center gap-1 text-gray-500">
+                <GitBranch className="w-3 h-3" />
+                <span className="text-xs font-medium">{repoData.branch}</span>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <button
+          className="flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-600 hover:text-black text-sm font-medium rounded-[15px] transition-all"
+          type="button"
+        >
+          {generateIcon('help%20sign-50-1658435663.png', 16, 'currentColor')}
+          <span>Help</span>
+        </button>
+      </div>
+      
+      {/* Gradient underline */}
+      {/* <div 
+        className="absolute left-14"
+        style={{
+          bottom: '-1.5rem',
+          width: '100px',
+          height: '4px',
+          background: 'linear-gradient(90deg, #36b37e, #00c6ff)',
+          borderRadius: '30px',
+        }}
+      ></div> */}
+    </div>
+  );
+};
+
+export default React.memo(Header);

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

@@ -0,0 +1,270 @@
+import React, { useCallback } from "react";
+import { GitBranch, Rocket, Github, Loader2, Globe, Database, Container, Server, Layers, Check, AlertCircle, Key, Cloud, Monitor } from "lucide-react";
+import { CustomSelect } from "@/components/ui/CustomSelect";
+import DomainSettings from "./DomainSettings";
+import BuildSummary from "./BuildSummary";
+import { useDeployment } from "@/context/DeploymentContext";
+import { useRouter } from "next/navigation";
+import type { BuildStrategy } from "@/context/deployment/types";
+
+// ─── Deploy checklist for compose ────────────────────────────────────────────
+
+const ComposeChecklist: React.FC = () => {
+  const { config } = useDeployment();
+  const services = config.services || [];
+  if (services.length === 0) return null;
+
+  const isDb = (svc: { image?: string; name: string }) =>
+    /postgres|mysql|mariadb|mongo|redis|memcached|cassandra|clickhouse|influx|minio/i.test(
+      svc.image || svc.name,
+    );
+
+  const exposedServices = services.filter((s) => s.exposed);
+  const exposableServices = services.filter(
+    (s) => s.ports.length > 0 && !isDb(s),
+  );
+  const envConfigured = services.filter(
+    (s) => Object.keys(s.environment).length > 0,
+  ).length;
+  const totalEnvVars = services.reduce(
+    (acc, s) => acc + Object.keys(s.environment).length,
+    0,
+  );
+  const dbServices = services.filter((s) => isDb(s));
+  const buildServices = services.filter((s) => s.build);
+
+  const checks = [
+    {
+      label: "Services detected",
+      value: `${services.length} services`,
+      ok: services.length > 0,
+      icon: Layers,
+    },
+    {
+      label: "Public domains",
+      value: exposedServices.length > 0
+        ? `${exposedServices.length} of ${exposableServices.length} exposed`
+        : `${exposableServices.length} can be exposed`,
+      ok: exposedServices.length > 0,
+      warn: exposedServices.length === 0 && exposableServices.length > 0,
+      icon: Globe,
+    },
+    ...(buildServices.length > 0
+      ? [{
+          label: "Build services",
+          value: `${buildServices.length} to build`,
+          ok: true,
+          icon: Container,
+        }]
+      : []),
+    ...(dbServices.length > 0
+      ? [{
+          label: "Databases",
+          value: `${dbServices.length} ${dbServices.length === 1 ? "instance" : "instances"}`,
+          ok: true,
+          icon: Database,
+        }]
+      : []),
+    {
+      label: "Environment",
+      value: totalEnvVars > 0
+        ? `${totalEnvVars} vars across ${envConfigured} services`
+        : "No env vars set",
+      ok: totalEnvVars > 0,
+      icon: Key,
+    },
+  ];
+
+  return (
+    <div className="bg-card rounded-xl border border-border/50 p-4 space-y-3">
+      <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+        Deploy Checklist
+      </p>
+      <div className="space-y-2">
+        {checks.map((check) => {
+          const Icon = check.icon;
+          return (
+            <div key={check.label} className="flex items-start gap-2.5">
+              <div className={`mt-0.5 p-1 rounded-md ${
+                check.ok
+                  ? "bg-emerald-500/10 text-emerald-500"
+                  : (check as any).warn
+                    ? "bg-amber-500/10 text-amber-500"
+                    : "bg-muted/50 text-muted-foreground/50"
+              }`}>
+                {check.ok ? (
+                  <Check className="size-3" />
+                ) : (check as any).warn ? (
+                  <AlertCircle className="size-3" />
+                ) : (
+                  <Icon className="size-3" />
+                )}
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-foreground leading-tight">
+                  {check.label}
+                </p>
+                <p className="text-xs text-muted-foreground leading-snug">
+                  {check.value}
+                </p>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Exposed domains quick list */}
+      {exposedServices.length > 0 && (
+        <div className="pt-2 border-t border-border/30 space-y-1.5">
+          <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
+            Domains
+          </p>
+          {exposedServices.map((svc) => {
+            const domain =
+              svc.domainType === "custom" && svc.customDomain
+                ? svc.customDomain
+                : `${svc.domain || svc.name}.opsh.io`;
+            return (
+              <div key={svc.name} className="flex items-center gap-2">
+                <Globe className="size-3 text-primary" />
+                <span className="text-sm text-primary font-medium truncate">{domain}</span>
+                <span className="text-xs text-muted-foreground ml-auto">{svc.name}</span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ─── Sidebar ─────────────────────────────────────────────────────────────────
+
+const Sidebar: React.FC = () => {
+  const { config, state, updateConfig, startDeployment } = useDeployment();
+  const router = useRouter();
+  const isServices = config.projectType === "services";
+
+  const handleDeploy = useCallback(async () => {
+    const deploymentId = await startDeployment();
+    if (deploymentId) {
+      router.push(`/build/${deploymentId}`);
+    }
+  }, [startDeployment, router]);
+
+  return (
+    <div className="lg:sticky lg:top-6 h-fit space-y-4">
+      {/* Repository Info */}
+      <div className="border border-border/50 rounded-xl bg-card overflow-hidden">
+        <div className="flex items-center gap-1.5 px-4 pt-3 pb-0">
+          <span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]/60" />
+          <span className="w-2.5 h-2.5 rounded-full bg-[#eab308]/60" />
+          <span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]/60" />
+        </div>
+        <div className="p-4 pt-3">
+          <div className="flex items-center gap-3">
+            <Github className="size-4 text-muted-foreground shrink-0" />
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-foreground truncate">
+                {config.owner}/{config.repo}
+              </p>
+            </div>
+          </div>
+          {config.branches.length > 0 && (
+            <div className="mt-3">
+              <CustomSelect
+                value={config.branch}
+                onChange={(val) => updateConfig({ branch: val })}
+                options={config.branches.map(branch => ({
+                  value: branch,
+                  label: branch,
+                  icon: <GitBranch className="w-3.5 h-3.5" />
+                }))}
+                placeholder="Select branch"
+                className="w-full"
+              />
+            </div>
+          )}
+          {config.branches.length === 0 && config.branch && (
+            <div className="flex items-center gap-1 mt-2 text-xs text-muted-foreground">
+              <GitBranch className="size-3" />
+              {config.branch}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Build Location — prominent toggle for where the build runs */}
+      {config.projectType === "app" && config.options.hasBuild && (
+        <div className="border border-border/50 rounded-xl bg-card p-4 space-y-2.5">
+          <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+            Build Location
+          </p>
+          <div className="flex gap-1.5 p-1 bg-muted/30 rounded-lg border border-border/50">
+            {([
+              { value: "server" as BuildStrategy, label: "Server", desc: "Build in cloud workspace", icon: <Cloud className="w-4 h-4" /> },
+              { value: "local" as BuildStrategy, label: "Local", desc: "Build on this machine", icon: <Monitor className="w-4 h-4" /> },
+            ]).map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => updateConfig({ buildStrategy: opt.value })}
+                className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
+                  config.buildStrategy === opt.value
+                    ? "bg-background text-foreground shadow-sm border border-border/50"
+                    : "text-muted-foreground hover:text-foreground"
+                }`}
+              >
+                {opt.icon}
+                {opt.label}
+              </button>
+            ))}
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {config.buildStrategy === "local"
+              ? "Build runs on your machine, then artifacts are uploaded"
+              : "Source is sent to the server for building"}
+          </p>
+        </div>
+      )}
+
+      {/* Domain — per-service for compose, checklist for others */}
+      {isServices ? (
+        <ComposeChecklist />
+      ) : (
+        <DomainSettings
+          projectName={config.projectName}
+          domain={config.domain}
+          setDomain={(val) => updateConfig({ domain: val })}
+          customDomain={config.customDomain}
+          setCustomDomain={(val) => updateConfig({ customDomain: val })}
+          domainType={config.domainType}
+          setDomainType={(val) => updateConfig({ domainType: val })}
+        />
+      )}
+
+      {/* Deploy */}
+      <button
+        onClick={handleDeploy}
+        disabled={state.isDeploying}
+        className="w-full inline-flex items-center justify-center gap-2 px-5 py-3 bg-primary text-primary-foreground text-sm font-medium rounded-xl hover:bg-primary/90 transition-all hover:shadow-lg hover:shadow-primary/25 hover:-translate-y-0.5 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        {state.isDeploying ? (
+          <>
+            <Loader2 className="size-4 animate-spin" />
+            Deploying…
+          </>
+        ) : (
+          <>
+            <Rocket className="size-4" />
+            Deploy
+          </>
+        )}
+      </button>
+
+      {/* Build Summary */}
+      <BuildSummary />
+    </div>
+  );
+};
+
+export default React.memo(Sidebar);