openship 0.1.1 → 0.1.7

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

@@ -1,283 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback } from "react";
-import { useRouter } from "next/navigation";
-import {
-  Server,
-  Plus,
-  CheckCircle2,
-  XCircle,
-  Loader2,
-  ExternalLink,
-  Wifi,
-  Shield,
-} from "lucide-react";
-import { systemApi } from "@/lib/api";
-
-interface ServerEntry {
-  id: string;
-  name: string;
-  host: string;
-  port: number;
-  user: string;
-  status: "connected" | "error" | "unknown";
-  tunnelProvider?: string | null;
-}
-
-export default function ServersPage() {
-  const router = useRouter();
-  const [servers, setServers] = useState<ServerEntry[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  const fetchServers = useCallback(async () => {
-    try {
-      setLoading(true);
-      const settings = await systemApi.getSettings();
-      if (settings?.configured && settings.sshHost) {
-        setServers([
-          {
-            id: "primary",
-            name: settings.serverName || settings.sshHost,
-            host: settings.sshHost,
-            port: settings.sshPort ?? 22,
-            user: settings.sshUser ?? "root",
-            status: "connected",
-            tunnelProvider: settings.tunnelProvider,
-          },
-        ]);
-      } else {
-        setServers([]);
-      }
-    } catch {
-      setServers([]);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchServers();
-  }, [fetchServers]);
-
-  return (
-    <div className="min-h-screen bg-background">
-      <div className="max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        {/* Header */}
-        <div className="flex items-center justify-between mb-6">
-          <div>
-            <h1
-              className="text-2xl font-medium text-foreground/80"
-              style={{ letterSpacing: "-0.2px" }}
-            >
-              Servers
-            </h1>
-            <p className="text-sm text-muted-foreground/70 mt-1">
-              Manage your deployment servers and infrastructure
-            </p>
-          </div>
-          <button
-            onClick={() => router.push("/servers/new")}
-            className="inline-flex items-center gap-2 px-4 py-2.5 bg-primary text-primary-foreground text-sm font-medium rounded-xl hover:bg-primary/90 transition-all hover:shadow-lg hover:shadow-primary/25"
-          >
-            <Plus className="size-4" />
-            Add Server
-          </button>
-        </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-6">
-          {/* ── LEFT COLUMN ── */}
-          <div className="space-y-6 min-w-0">
-            {loading ? (
-              <div className="flex items-center justify-center py-20">
-                <Loader2 className="size-5 animate-spin text-muted-foreground" />
-              </div>
-            ) : servers.length === 0 ? (
-              <div className="py-16 text-center">
-                {/* SVG Illustration — server themed */}
-                <div className="relative mx-auto w-64 h-44 mb-8">
-                  <svg className="absolute inset-0 w-full h-full" viewBox="0 0 260 180" fill="none">
-                    {/* Server rack stack */}
-                    <rect x="60" y="50" width="120" height="90" rx="14" fill="var(--th-sf-04)" />
-                    <rect x="50" y="40" width="120" height="90" rx="14" fill="var(--th-sf-03)" stroke="var(--th-bd-subtle)" strokeWidth="1" />
-                    <rect x="40" y="30" width="120" height="90" rx="14" fill="var(--th-card-bg)" stroke="var(--th-bd-default)" strokeWidth="1" />
-
-                    {/* Server unit lines */}
-                    <rect x="55" y="46" width="90" height="6" rx="3" fill="var(--th-on-08)" />
-                    <circle cx="152" cy="49" r="3" fill="#22c55e" fillOpacity="0.6" />
-                    <rect x="55" y="60" width="90" height="6" rx="3" fill="var(--th-on-08)" />
-                    <circle cx="152" cy="63" r="3" fill="#22c55e" fillOpacity="0.6" />
-                    <rect x="55" y="74" width="90" height="6" rx="3" fill="var(--th-on-08)" />
-                    <circle cx="152" cy="77" r="3" fill="var(--th-on-12)" />
-
-                    {/* Terminal icon */}
-                    <rect x="55" y="92" width="42" height="22" rx="5" fill="var(--th-on-05)" stroke="var(--th-on-10)" strokeWidth="1" />
-                    <path d="M63 98l5 4-5 4" stroke="var(--th-on-30)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-                    <rect x="72" y="105" width="16" height="2" rx="1" fill="var(--th-on-16)" />
-
-                    {/* Plus circle */}
-                    <circle cx="210" cy="85" r="22" fill="var(--th-on-05)" />
-                    <circle cx="210" cy="85" r="16" fill="var(--th-card-bg)" stroke="var(--th-on-20)" strokeWidth="2" strokeDasharray="4 3" />
-                    <path d="M210 77v16M202 85h16" stroke="var(--th-on-40)" strokeWidth="2" strokeLinecap="round" />
-
-                    {/* Decorative dots */}
-                    <circle cx="25" cy="55" r="4" fill="var(--th-on-10)" />
-                    <circle cx="35" cy="145" r="6" fill="var(--th-on-08)" />
-                    <circle cx="235" cy="38" r="3" fill="var(--th-on-12)" />
-                    <circle cx="248" cy="130" r="5" fill="var(--th-on-06)" />
-
-                    {/* Sparkle accents */}
-                    <path d="M20 105l2-4 2 4-4-2 4 0-4 2z" fill="var(--th-on-16)" />
-                    <path d="M225 150l1.5-3 1.5 3-3-1.5 3 0-3 1.5z" fill="var(--th-on-12)" />
-
-                    {/* Connecting dashed line */}
-                    <path d="M170 85 Q 185 82 195 85" stroke="var(--th-on-12)" strokeWidth="1.5" strokeDasharray="3 3" fill="none" />
-                  </svg>
-                </div>
-
-                <h3 className="text-2xl font-medium text-foreground/80 mb-2" style={{ letterSpacing: "-0.2px" }}>
-                  No servers yet
-                </h3>
-                <p className="text-sm text-muted-foreground/70 max-w-sm mx-auto mb-8 leading-relaxed">
-                  Connect a server via SSH and Openship will handle the rest —
-                  Docker, Traefik, SSL, and deployments all set up automatically.
-                </p>
-
-                <div className="flex flex-col sm:flex-row items-center justify-center gap-3 mb-10">
-                  <button
-                    onClick={() => router.push("/servers/new")}
-                    className="inline-flex items-center gap-2 px-6 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"
-                  >
-                    <Plus className="size-4" />
-                    Add Your First Server
-                  </button>
-                </div>
-
-                {/* Feature highlight cards */}
-                <div className="max-w-2xl mx-auto">
-                  <p className="text-xs text-muted-foreground/60 uppercase tracking-wider mb-4">
-                    What gets configured
-                  </p>
-                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-                    <div className="bg-card border border-border/50 rounded-xl p-4 text-left">
-                      <div className="w-8 h-8 rounded-lg bg-muted flex items-center justify-center mb-3">
-                        <Server className="size-4 text-muted-foreground" />
-                      </div>
-                      <p className="text-sm font-medium text-foreground">Docker</p>
-                      <p className="text-xs text-muted-foreground mt-0.5">Container runtime</p>
-                    </div>
-                    <div className="bg-card border border-border/50 rounded-xl p-4 text-left">
-                      <div className="w-8 h-8 rounded-lg bg-muted flex items-center justify-center mb-3">
-                        <Shield className="size-4 text-muted-foreground" />
-                      </div>
-                      <p className="text-sm font-medium text-foreground">Traefik</p>
-                      <p className="text-xs text-muted-foreground mt-0.5">Reverse proxy & SSL</p>
-                    </div>
-                    <div className="bg-card border border-border/50 rounded-xl p-4 text-left">
-                      <div className="w-8 h-8 rounded-lg bg-muted flex items-center justify-center mb-3">
-                        <Wifi className="size-4 text-muted-foreground" />
-                      </div>
-                      <p className="text-sm font-medium text-foreground">Monitoring</p>
-                      <p className="text-xs text-muted-foreground mt-0.5">Health checks</p>
-                    </div>
-                    <div className="bg-card border border-border/50 rounded-xl p-4 text-left">
-                      <div className="w-8 h-8 rounded-lg bg-muted flex items-center justify-center mb-3">
-                        <ExternalLink className="size-4 text-muted-foreground" />
-                      </div>
-                      <p className="text-sm font-medium text-foreground">Git</p>
-                      <p className="text-xs text-muted-foreground mt-0.5">Source deployments</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <div className="space-y-3">
-                {servers.map((server) => (
-                  <button
-                    key={server.id}
-                    onClick={() => router.push(`/servers/${server.id}`)}
-                    className="w-full text-left bg-card rounded-2xl border border-border/50 p-5 hover:border-border transition-colors group"
-                  >
-                    <div className="flex items-center gap-4">
-                      <div className="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center shrink-0">
-                        <Server className="size-5 text-blue-500" />
-                      </div>
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2">
-                          <p className="text-sm font-medium text-foreground truncate">
-                            {server.name}
-                          </p>
-                          {server.status === "connected" ? (
-                            <div className="inline-flex items-center gap-1 px-2 py-0.5 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 text-xs font-medium rounded-full">
-                              <CheckCircle2 className="size-3" />
-                              Connected
-                            </div>
-                          ) : (
-                            <div className="inline-flex items-center gap-1 px-2 py-0.5 bg-red-500/10 text-red-600 dark:text-red-400 text-xs font-medium rounded-full">
-                              <XCircle className="size-3" />
-                              Error
-                            </div>
-                          )}
-                        </div>
-                        <p className="text-xs text-muted-foreground mt-0.5">
-                          {server.user}@{server.host}:{server.port}
-                          {server.tunnelProvider && (
-                            <span className="ml-2 inline-flex items-center gap-1">
-                              <Wifi className="size-3" />
-                              {server.tunnelProvider === "edge"
-                                ? "Openship Edge"
-                                : server.tunnelProvider === "cloudflare"
-                                  ? "Cloudflare Tunnel"
-                                  : server.tunnelProvider}
-                            </span>
-                          )}
-                        </p>
-                      </div>
-                      <ExternalLink className="size-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
-                    </div>
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* ── RIGHT COLUMN (Sticky) ── */}
-          <div className="space-y-4 lg:sticky lg:top-6 lg:self-start">
-            <div className="bg-card rounded-2xl border border-border/50">
-              <div className="flex items-center gap-3 px-5 py-4 border-b border-border/50">
-                <div className="w-9 h-9 bg-emerald-500/10 rounded-xl flex items-center justify-center">
-                  <Shield className="size-[18px] text-emerald-500" />
-                </div>
-                <div>
-                  <h2 className="font-semibold text-foreground text-[15px]">Quick Info</h2>
-                  <p className="text-xs text-muted-foreground">Server overview</p>
-                </div>
-              </div>
-              <div className="p-5">
-                <div className="space-y-3">
-                  <div className="flex items-center justify-between">
-                    <span className="text-sm text-muted-foreground">Total Servers</span>
-                    <span className="text-sm font-medium text-foreground">
-                      {loading ? "…" : servers.length}
-                    </span>
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <span className="text-sm text-muted-foreground">Connected</span>
-                    <span className="text-sm font-medium text-emerald-600 dark:text-emerald-400">
-                      {loading ? "…" : servers.filter((s) => s.status === "connected").length}
-                    </span>
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <span className="text-sm text-muted-foreground">Errors</span>
-                    <span className="text-sm font-medium text-red-600 dark:text-red-400">
-                      {loading ? "…" : servers.filter((s) => s.status === "error").length}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/apps/dashboard/src/app/(dashboard)/settings/_components/BuildPreferences.tsx

@@ -1,110 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback } from "react";
-import { Check, Loader2, Zap, Server, Laptop, Settings2 } from "lucide-react";
-import { settingsApi } from "@/lib/api";
-import type { BuildMode } from "@/lib/api/settings";
-import { useToast } from "@/context/ToastContext";
-import { SettingsSection } from "./SettingsSection";
-
-const BUILD_MODES: {
-  value: BuildMode;
-  label: string;
-  desc: string;
-  icon: React.ElementType;
-}[] = [
-  { value: "auto", label: "Auto", desc: "Smart per-framework", icon: Zap },
-  { value: "server", label: "Server", desc: "Build on remote", icon: Server },
-  { value: "local", label: "Local", desc: "Build on machine", icon: Laptop },
-];
-
-export function BuildPreferences() {
-  const { showToast } = useToast();
-  const [buildMode, setBuildMode] = useState<BuildMode>("auto");
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-
-  const fetchSettings = useCallback(async () => {
-    try {
-      setLoading(true);
-      const res = await settingsApi.get();
-      if (res?.buildMode) setBuildMode(res.buildMode);
-    } catch {
-      /* silent */
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchSettings();
-  }, [fetchSettings]);
-
-  async function handleChange(mode: BuildMode) {
-    if (mode === buildMode) return;
-    const prev = buildMode;
-    setBuildMode(mode);
-    setSaving(true);
-    try {
-      await settingsApi.updateBuildMode(mode);
-      showToast(`Build mode set to ${mode}`, "success", "Settings");
-    } catch {
-      setBuildMode(prev);
-      showToast("Failed to update build mode", "error", "Settings");
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  return (
-    <SettingsSection
-      icon={Settings2}
-      title="Build Preferences"
-      description="Control how your projects are built and deployed"
-      iconBg="bg-orange-500/10"
-      iconColor="text-orange-500"
-    >
-      {loading ? (
-        <div className="flex items-center gap-2 text-sm text-muted-foreground py-2">
-          <Loader2 className="size-4 animate-spin" />
-          Loading preferences…
-        </div>
-      ) : (
-        <>
-          <p className="text-sm text-muted-foreground mb-4">
-            Choose the default build strategy for new deployments. Per-project
-            overrides are available in project settings.
-          </p>
-          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-            {BUILD_MODES.map(({ value, label, desc, icon: ModeIcon }) => {
-              const active = buildMode === value;
-              return (
-                <button
-                  key={value}
-                  onClick={() => handleChange(value)}
-                  disabled={saving}
-                  className={`relative text-left rounded-xl border p-4 transition-all ${
-                    active
-                      ? "border-primary/50 bg-primary/5 ring-1 ring-primary/20"
-                      : "border-border/50 bg-card hover:bg-muted/40 hover:border-border"
-                  } disabled:opacity-50`}
-                >
-                  <div className="w-8 h-8 rounded-lg bg-muted flex items-center justify-center mb-3">
-                    <ModeIcon className="size-4 text-muted-foreground" />
-                  </div>
-                  <p className="text-sm font-medium text-foreground">{label}</p>
-                  <p className="text-xs text-muted-foreground mt-0.5">{desc}</p>
-                  {active && (
-                    <div className="absolute top-3 right-3">
-                      <Check className="size-4 text-primary" />
-                    </div>
-                  )}
-                </button>
-              );
-            })}
-          </div>
-        </>
-      )}
-    </SettingsSection>
-  );
-}

package/apps/dashboard/src/app/(dashboard)/settings/_components/CloudConnection.tsx

@@ -1,147 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import {
-  Check,
-  LogOut,
-  Loader2,
-  ExternalLink,
-  Globe,
-} from "lucide-react";
-import { cloudApi } from "@/lib/api";
-import { useToast } from "@/context/ToastContext";
-import { useGitHub } from "@/context/GitHubContext";
-import { useCloud } from "@/context/CloudContext";
-
-/* ── Component ──────────────────────────────────────────────────── */
-
-export function CloudConnection() {
-  const { authMode, deployMode } = useGitHub();
-  const {
-    connected: cloudConnected,
-    cloudUser,
-    loading: cloudLoading,
-    connecting,
-    startConnect,
-    refresh,
-  } = useCloud();
-  const { showToast } = useToast();
-  const isDesktop = deployMode === "desktop";
-  const [disconnecting, setDisconnecting] = useState(false);
-
-  async function handleDisconnect() {
-    if (
-      !confirm(
-        "Disconnect from Openship Cloud? Cloud deployments will stop working until you reconnect.",
-      )
-    )
-      return;
-    try {
-      setDisconnecting(true);
-      await cloudApi.disconnect();
-      await refresh();
-      showToast("Disconnected from Openship Cloud", "success", "Cloud");
-    } catch {
-      showToast("Failed to disconnect", "error", "Cloud");
-    } finally {
-      setDisconnecting(false);
-    }
-  }
-
-  return (
-    <div className="bg-card rounded-2xl border border-border/50 p-5">
-      {cloudLoading ? (
-        <div className="py-4 flex items-center justify-center gap-2">
-          <Loader2 className="size-4 animate-spin text-muted-foreground" />
-          <p className="text-xs text-muted-foreground">Checking…</p>
-        </div>
-      ) : cloudConnected ? (
-        <div className="space-y-4">
-          {/* Header + user info */}
-          <div className="flex items-center gap-3">
-            {cloudUser?.image ? (
-              <img
-                src={cloudUser.image}
-                alt=""
-                className="size-9 rounded-full ring-1 ring-border shrink-0"
-              />
-            ) : (
-              <div className="size-9 rounded-full bg-muted flex items-center justify-center ring-1 ring-border shrink-0">
-                <span className="text-xs font-medium text-muted-foreground">
-                  {cloudUser?.name?.charAt(0)?.toUpperCase() || cloudUser?.email?.charAt(0)?.toUpperCase() || "?"}
-                </span>
-              </div>
-            )}
-            <div className="flex-1 min-w-0">
-              {cloudUser?.name && (
-                <p className="text-sm font-medium text-foreground truncate">{cloudUser.name}</p>
-              )}
-              {cloudUser?.email && (
-                <p className="text-xs text-muted-foreground truncate">{cloudUser.email}</p>
-              )}
-            </div>
-          </div>
-
-          {/* Status badge */}
-          <div className="flex items-center justify-between">
-            <div className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 text-xs font-semibold rounded-full ring-1 ring-emerald-500/20">
-              <Check className="size-3" />
-              Connected
-            </div>
-            <button
-              onClick={handleDisconnect}
-              disabled={disconnecting}
-              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors disabled:opacity-50"
-            >
-              {disconnecting ? (
-                <Loader2 className="size-3 animate-spin" />
-              ) : (
-                <LogOut className="size-3" />
-              )}
-              Disconnect
-            </button>
-          </div>
-
-          <div className="h-px bg-border/60" />
-
-          {/* Cloud features summary */}
-          <p className="text-xs text-muted-foreground leading-relaxed">
-            Cloud deployments, managed SSL, and global CDN are active for your instance.
-          </p>
-        </div>
-      ) : (
-        <div className="text-center">
-          {/* Cloud icon */}
-          <div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-4">
-            <Globe className="size-6 text-primary" />
-          </div>
-
-          <h4 className="text-sm font-medium text-foreground mb-1">Connect to Cloud</h4>
-          <p className="text-xs text-muted-foreground leading-relaxed mb-4">
-            {isDesktop
-              ? "Unlock cloud deployments, managed SSL, and global CDN."
-              : "Deploy to cloud directly from your local instance."}
-          </p>
-
-          <button
-            onClick={startConnect}
-            disabled={connecting}
-            className="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-primary text-primary-foreground text-sm font-medium rounded-xl hover:bg-primary/90 transition-all hover:shadow-lg hover:shadow-primary/25 disabled:opacity-50"
-          >
-            {connecting ? (
-              <>
-                <Loader2 className="size-3.5 animate-spin" />
-                Waiting for sign in…
-              </>
-            ) : (
-              <>
-                <ExternalLink className="size-3.5" />
-                Connect to Openship Cloud
-              </>
-            )}
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}

package/apps/dashboard/src/app/(dashboard)/settings/_components/InstanceInfo.tsx

@@ -1,54 +0,0 @@
-"use client";
-
-import { Info, MonitorSmartphone, Shield } from "lucide-react";
-import { useGitHub } from "@/context/GitHubContext";
-import { useAuth } from "@/context/AuthContext";
-import { SettingsSection } from "./SettingsSection";
-
-export function InstanceInfo() {
-  const { user } = useAuth();
-  const { authMode, deployMode } = useGitHub();
-  const isDesktop = authMode === "none";
-  const isCloudSaas = deployMode === "cloud";
-
-  return (
-    <SettingsSection
-      icon={Info}
-      title="Instance"
-      description={isDesktop ? "Desktop app" : isCloudSaas ? "Cloud" : "Self-hosted"}
-      iconBg="bg-violet-500/10"
-      iconColor="text-violet-500"
-    >
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-        <div className="flex items-center gap-3 rounded-xl border border-border/50 p-4">
-          <div className="w-8 h-8 rounded-lg bg-muted flex items-center justify-center">
-            <MonitorSmartphone className="size-4 text-muted-foreground" />
-          </div>
-          <div>
-            <p className="text-sm font-medium text-foreground">
-              {isDesktop ? "Desktop" : isCloudSaas ? "Openship Cloud" : "Self-Hosted"}
-            </p>
-            <p className="text-xs text-muted-foreground">Deploy mode: {deployMode}</p>
-          </div>
-        </div>
-        <div className="flex items-center gap-3 rounded-xl border border-border/50 p-4">
-          <div className="w-8 h-8 rounded-lg bg-muted flex items-center justify-center">
-            <Shield className="size-4 text-muted-foreground" />
-          </div>
-          <div>
-            <p className="text-sm font-medium text-foreground">
-              {authMode === "none"
-                ? "Zero Auth"
-                : authMode === "cloud"
-                  ? "Cloud Auth"
-                  : "Local Auth"}
-            </p>
-            <p className="text-xs text-muted-foreground">
-              {user?.email || (isDesktop ? "Local user" : "—")}
-            </p>
-          </div>
-        </div>
-      </div>
-    </SettingsSection>
-  );
-}