openship 0.1.1 → 0.1.8

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

@@ -1,437 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback } from "react";
-import { useRouter } from "next/navigation";
-import {
-  ArrowLeft,
-  CheckCircle2,
-  XCircle,
-  Loader2,
-  Settings2,
-  Trash2,
-  LayoutGrid,
-  Blocks,
-  Terminal,
-  MoreHorizontal,
-  Server,
-  Globe,
-  User,
-  KeyRound,
-} from "lucide-react";
-import { getApiErrorMessage, systemApi } from "@/lib/api";
-import { useToast } from "@/context/ToastContext";
-import { useModal } from "@/context/ModalContext";
-import { useSetupStream } from "@/hooks/useSetupStream";
-import { useMonitorStream } from "@/hooks/useMonitorStream";
-import type { InstanceSettings, ComponentStatus, SetupLogEvent } from "@/lib/api/system";
-import { OverviewTab } from "./_components/overview-tab";
-import { ComponentsTab } from "./_components/components-tab";
-import { TerminalTab } from "./_components/terminal-tab";
-
-type Tab = "overview" | "components" | "terminal";
-
-const TABS: { key: Tab; label: string; icon: React.ElementType }[] = [
-  { key: "overview", label: "Overview", icon: LayoutGrid },
-  { key: "components", label: "Components", icon: Blocks },
-  { key: "terminal", label: "Terminal", icon: Terminal },
-];
-
-export default function ServerDetailPage({
-  params,
-}: {
-  params: Promise<{ serverId: string }>;
-}) {
-  const router = useRouter();
-  const { showToast } = useToast();
-  const { showModal, hideModal } = useModal();
-  const [serverId, setServerId] = useState<string>("");
-  const [settings, setSettings] = useState<InstanceSettings | null>(null);
-  const [components, setComponents] = useState<ComponentStatus[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [checking, setChecking] = useState(false);
-  const [checkError, setCheckError] = useState<string | null>(null);
-  const [installLogs, setInstallLogs] = useState<SetupLogEvent[]>([]);
-  const [activeTab, setActiveTab] = useState<Tab>("overview");
-  const [showMenu, setShowMenu] = useState(false);
-
-  const setupStream = useSetupStream({
-    onComplete: (event) => {
-      // Re-run health check after install finishes
-      void (async () => {
-        try {
-          const result = await systemApi.checkServer();
-          setComponents(result.components);
-          if (event.status === "completed") {
-            showToast("Missing components installed", "success", "Server Setup");
-          } else {
-            showToast("Some components failed to install", "error", "Server Setup");
-          }
-        } catch (err) {
-          const message = getApiErrorMessage(err, "Health check failed after install");
-          setCheckError(message);
-          showToast(message, "error", "Server Setup");
-        }
-      })();
-    },
-    onLog: (entry) => {
-      setInstallLogs((prev) => [...prev, entry]);
-    },
-  });
-
-  const monitor = useMonitorStream(activeTab === "overview");
-
-  useEffect(() => {
-    params.then((p) => setServerId(p.serverId));
-  }, [params]);
-
-  const fetchData = useCallback(async () => {
-    try {
-      setLoading(true);
-      const s = await systemApi.getSettings();
-      setSettings(s);
-    } catch {
-      setSettings(null);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  const runHealthCheck = useCallback(async () => {
-    setChecking(true);
-    setCheckError(null);
-    try {
-      const result = await systemApi.checkServer();
-      setComponents(result.components);
-    } catch (err) {
-      const message = getApiErrorMessage(err, "Health check failed");
-      setComponents([]);
-      setCheckError(message);
-      showToast(message, "error", "Server Check");
-    } finally {
-      setChecking(false);
-    }
-  }, [showToast]);
-
-  const installMissingComponents = useCallback(async () => {
-    const missing = components.filter(
-      (component) =>
-        !component.healthy && component.installable,
-    );
-
-    if (missing.length === 0) {
-      showToast("No installable components are missing", "success", "Server Setup");
-      return;
-    }
-
-    setCheckError(null);
-    setInstallLogs([]);
-    setActiveTab("components");
-
-    try {
-      await setupStream.startInstall(missing.map((c) => c.name));
-    } catch (err) {
-      const message = getApiErrorMessage(err, "Failed to start installation");
-      setCheckError(message);
-      showToast(message, "error", "Server Setup");
-    }
-  }, [components, showToast, setupStream]);
-
-  useEffect(() => {
-    fetchData();
-    runHealthCheck();
-
-    // Check for active install session (page reload recovery)
-    void (async () => {
-      try {
-        const session = await systemApi.getInstallSession();
-        if (session.active && session.status === "running" && session.sessionId) {
-          setActiveTab("components");
-          void setupStream.attachToSession(session.sessionId);
-        }
-      } catch {
-        // No active session
-      }
-    })();
-  }, [fetchData, runHealthCheck]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const handleDelete = useCallback(() => {
-    const modalId = showModal({
-      title: "Remove Server",
-      message:
-        "Are you sure? This will clear all SSH credentials and connection settings.",
-      icon: "warning",
-      buttons: [
-        {
-          label: "Cancel",
-          variant: "secondary",
-          onClick: () => hideModal(modalId),
-        },
-        {
-          label: "Remove",
-          variant: "danger",
-          onClick: async () => {
-            try {
-              await systemApi.deleteServer();
-              hideModal(modalId);
-              showToast("Server removed", "success", "Server");
-              router.push("/servers");
-            } catch (err) {
-              showToast(
-                getApiErrorMessage(err, "Failed to remove server"),
-                "error",
-                "Server",
-              );
-            }
-          },
-        },
-      ],
-    });
-  }, [router, showToast, showModal, hideModal]);
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-background flex items-center justify-center">
-        <Loader2 className="size-6 animate-spin text-muted-foreground" />
-      </div>
-    );
-  }
-
-  if (!settings?.configured || !settings.sshHost) {
-    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">
-          <div className="flex items-center gap-3 mb-6">
-            <button
-              onClick={() => router.push("/servers")}
-              className="w-8 h-8 rounded-lg hover:bg-muted flex items-center justify-center transition-colors"
-            >
-              <ArrowLeft className="size-4 text-muted-foreground" />
-            </button>
-            <h1 className="text-2xl font-medium text-foreground/80">
-              Server not found
-            </h1>
-          </div>
-          <p className="text-sm text-muted-foreground">
-            No server configured with id &ldquo;{serverId}&rdquo;.
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  const allHealthy =
-    components.length > 0 && components.every((c) => c.healthy);
-
-  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 gap-3 mb-6">
-          <button
-            onClick={() => router.push("/servers")}
-            className="w-8 h-8 rounded-lg hover:bg-muted flex items-center justify-center transition-colors"
-          >
-            <ArrowLeft className="size-4 text-muted-foreground" />
-          </button>
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2">
-              <h1
-                className="text-2xl font-medium text-foreground/80 truncate"
-                style={{ letterSpacing: "-0.2px" }}
-              >
-                {settings.serverName || settings.sshHost}
-              </h1>
-              {allHealthy ? (
-                <div className="shrink-0 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" />
-                  Healthy
-                </div>
-              ) : components.length > 0 ? (
-                <div className="shrink-0 inline-flex items-center gap-1 px-2 py-0.5 bg-orange-500/10 text-orange-600 dark:text-orange-400 text-xs font-medium rounded-full">
-                  <XCircle className="size-3" />
-                  Issues
-                </div>
-              ) : null}
-            </div>
-            <p className="text-sm text-muted-foreground/70 mt-1 font-mono">
-              {settings.sshUser ?? "root"}@{settings.sshHost}:{settings.sshPort ?? 22}
-            </p>
-          </div>
-          <div className="flex items-center gap-1.5">
-            <button
-              onClick={() => router.push("/servers/new")}
-              className="inline-flex items-center gap-2 px-4 py-2 bg-muted/50 text-foreground text-sm font-medium rounded-xl hover:bg-muted transition-colors"
-            >
-              <Settings2 className="size-4" />
-              Edit
-            </button>
-            <div className="relative">
-              <button
-                onClick={() => setShowMenu((v) => !v)}
-                className="w-8 h-8 rounded-lg hover:bg-muted flex items-center justify-center transition-colors text-muted-foreground hover:text-foreground"
-              >
-                <MoreHorizontal className="size-4" />
-              </button>
-              {showMenu && (
-                <>
-                  <div
-                    className="fixed inset-0 z-40"
-                    onClick={() => setShowMenu(false)}
-                  />
-                  <div className="absolute right-0 top-full mt-1 z-50 w-48 bg-popover border border-border rounded-xl shadow-lg py-1">
-                    <button
-                      onClick={() => {
-                        setShowMenu(false);
-                        handleDelete();
-                      }}
-                      className="w-full flex items-center gap-2 px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-500/5 transition-colors"
-                    >
-                      <Trash2 className="size-3.5" />
-                      Remove Server
-                    </button>
-                  </div>
-                </>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Main Grid */}
-        <div className="grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-6">
-          {/* Left column */}
-          <div className="min-w-0">
-            {/* Tabs */}
-            <div className="flex items-center gap-1 mb-6 border-b border-border/50">
-              {TABS.map(({ key, label, icon: Icon }) => (
-                <button
-                  key={key}
-                  onClick={() => setActiveTab(key)}
-                  className={`inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors relative ${
-                    activeTab === key
-                      ? "text-foreground"
-                      : "text-muted-foreground hover:text-foreground/70"
-                  }`}
-                >
-                  <Icon className="size-4" />
-                  {label}
-                  {activeTab === key && (
-                    <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-full" />
-                  )}
-                </button>
-              ))}
-            </div>
-
-            {/* Tab content */}
-            {activeTab === "overview" && (
-              <OverviewTab
-                stats={monitor.stats}
-                components={components}
-                checking={checking}
-                monitorConnected={monitor.isConnected}
-                monitorError={monitor.error}
-                onReconnectMonitor={monitor.reconnect}
-              />
-            )}
-
-            {activeTab === "components" && (
-              <ComponentsTab
-                components={components}
-                checking={checking}
-                checkError={checkError}
-                onRecheck={runHealthCheck}
-                onInstallMissing={installMissingComponents}
-                installing={setupStream.isConnected || setupStream.isConnecting}
-                installDone={setupStream.isDone}
-                installFinalStatus={setupStream.finalStatus}
-                installComponents={setupStream.components}
-                installLogs={installLogs}
-                onDismissInstall={() => {
-                  setInstallLogs([]);
-                }}
-              />
-            )}
-
-            {activeTab === "terminal" && <TerminalTab />}
-          </div>
-
-          {/* Right sidebar — offset to align with tab content below tab bar */}
-          <div className="lg:pt-[65px] space-y-4 lg:sticky lg:top-6 lg:self-start">
-            {/* Server details */}
-            <div className="bg-card rounded-2xl border border-border/50 p-5">
-              <div className="flex items-center gap-2 mb-4">
-                <Server className="size-4 text-muted-foreground" />
-                <h3 className="font-semibold text-foreground text-sm">
-                  Connection
-                </h3>
-              </div>
-              <div className="space-y-3">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <div className="w-8 h-8 rounded-lg bg-muted/60 flex items-center justify-center">
-                      <Globe className="size-4 text-muted-foreground" />
-                    </div>
-                    <span className="text-sm text-muted-foreground">Host</span>
-                  </div>
-                  <span className="text-sm font-medium text-foreground font-mono truncate ml-3 max-w-[140px]">
-                    {settings.sshHost}
-                  </span>
-                </div>
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <div className="w-8 h-8 rounded-lg bg-muted/60 flex items-center justify-center">
-                      <User className="size-4 text-muted-foreground" />
-                    </div>
-                    <span className="text-sm text-muted-foreground">User</span>
-                  </div>
-                  <span className="text-sm font-medium text-foreground font-mono">
-                    {settings.sshUser ?? "root"}
-                  </span>
-                </div>
-
-                <div className="h-px bg-border/60 my-2" />
-
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <div className="w-8 h-8 rounded-lg bg-muted/60 flex items-center justify-center">
-                      <KeyRound className="size-4 text-muted-foreground" />
-                    </div>
-                    <span className="text-sm text-muted-foreground">Auth</span>
-                  </div>
-                  <span className="text-sm font-medium text-foreground">
-                    {settings.sshAuthMethod === "key" ? "SSH Key" : "Password"}
-                  </span>
-                </div>
-                {settings.defaultBuildMode && (
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      <div className="w-8 h-8 rounded-lg bg-muted/60 flex items-center justify-center">
-                        <Blocks className="size-4 text-muted-foreground" />
-                      </div>
-                      <span className="text-sm text-muted-foreground">Build</span>
-                    </div>
-                    <span className="text-sm font-medium text-foreground capitalize">
-                      {settings.defaultBuildMode}
-                    </span>
-                  </div>
-                )}
-                {settings.tunnelProvider && (
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      <div className="w-8 h-8 rounded-lg bg-muted/60 flex items-center justify-center">
-                        <Globe className="size-4 text-muted-foreground" />
-                      </div>
-                      <span className="text-sm text-muted-foreground">Tunnel</span>
-                    </div>
-                    <span className="text-sm font-medium text-foreground capitalize">
-                      {settings.tunnelProvider}
-                    </span>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/apps/dashboard/src/app/(dashboard)/servers/new/_components/checking-state.tsx

@@ -1,15 +0,0 @@
-import { Loader2 } from "lucide-react";
-
-export function CheckingState() {
-  return (
-    <div className="bg-card rounded-2xl border border-border/50 p-8">
-      <div className="flex flex-col items-center justify-center py-8">
-        <Loader2 className="size-8 text-primary animate-spin mb-4" />
-        <p className="text-sm font-medium text-foreground">Connecting to server&#8230;</p>
-        <p className="text-xs text-muted-foreground mt-1">
-          Running system health checks via SSH
-        </p>
-      </div>
-    </div>
-  );
-}

package/apps/dashboard/src/app/(dashboard)/servers/new/_components/choose-mode.tsx

@@ -1,54 +0,0 @@
-import { Zap, ListChecks, ChevronRight } from "lucide-react";
-import type { SetupMode } from "./types";
-
-export function ChooseMode({
-  onSelect,
-  disabled,
-}: {
-  onSelect: (mode: SetupMode) => void;
-  disabled?: boolean;
-}) {
-  return (
-    <div className="space-y-3">
-      <button
-        onClick={() => onSelect("auto")}
-        disabled={disabled}
-        className="w-full text-left bg-card rounded-2xl border border-border/50 p-6 hover:border-primary/30 hover:bg-primary/[0.02] transition-all group"
-      >
-        <div className="flex items-center gap-4">
-          <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
-            <Zap className="size-6 text-primary" />
-          </div>
-          <div className="flex-1">
-            <p className="text-[15px] font-semibold text-foreground">Automatic Setup</p>
-            <p className="text-sm text-muted-foreground mt-0.5">
-              Check requirements and install everything automatically.
-              One click — Openship handles Docker, Traefik, and Git.
-            </p>
-          </div>
-          <ChevronRight className="size-5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
-        </div>
-      </button>
-
-      <button
-        onClick={() => onSelect("manual")}
-        disabled={disabled}
-        className="w-full text-left bg-card rounded-2xl border border-border/50 p-6 hover:border-primary/30 hover:bg-primary/[0.02] transition-all group"
-      >
-        <div className="flex items-center gap-4">
-          <div className="w-12 h-12 rounded-xl bg-orange-500/10 flex items-center justify-center shrink-0">
-            <ListChecks className="size-6 text-orange-500" />
-          </div>
-          <div className="flex-1">
-            <p className="text-[15px] font-semibold text-foreground">Step-by-Step Setup</p>
-            <p className="text-sm text-muted-foreground mt-0.5">
-              Review each component and choose what to install.
-              See detailed status before proceeding.
-            </p>
-          </div>
-          <ChevronRight className="size-5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
-        </div>
-      </button>
-    </div>
-  );
-}

package/apps/dashboard/src/app/(dashboard)/servers/new/_components/component-row.tsx

@@ -1,65 +0,0 @@
-import {
-  CheckCircle2,
-  XCircle,
-  Loader2,
-} from "lucide-react";
-import type { ComponentState } from "./types";
-
-export function ComponentRow({
-  component,
-  showInstall,
-}: {
-  component: ComponentState;
-  showInstall?: boolean;
-}) {
-  const isHealthy = component.status?.healthy;
-  const isInstalling = component.installState === "installing";
-  const isInstalled = component.installState === "installed";
-  const isFailed = component.installState === "failed";
-
-  return (
-    <div className="flex items-center gap-3 py-2.5 px-3 rounded-xl hover:bg-muted/30 transition-colors">
-      <div className="shrink-0">
-        {isInstalling ? (
-          <Loader2 className="size-5 text-primary animate-spin" />
-        ) : isInstalled || isHealthy ? (
-          <CheckCircle2 className="size-5 text-emerald-500" />
-        ) : isFailed ? (
-          <XCircle className="size-5 text-red-500" />
-        ) : (
-          <div className="size-5 rounded-full border-2 border-border" />
-        )}
-      </div>
-
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <p className="text-sm font-medium text-foreground">{component.label}</p>
-          {component.status?.version && (
-            <span className="text-xs text-muted-foreground bg-muted/50 px-1.5 py-0.5 rounded">
-              v{component.status.version}
-            </span>
-          )}
-        </div>
-        <p className="text-xs text-muted-foreground mt-0.5">
-          {showInstall && isFailed
-            ? component.installError ?? "Installation failed"
-            : showInstall && isInstalling
-              ? "Installing\u2026"
-              : component.status?.message ?? component.description}
-        </p>
-      </div>
-
-      {!showInstall && (
-        <div
-          className={`text-xs font-medium px-2.5 py-1 rounded-full ${
-            isHealthy
-              ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
-              : "bg-orange-500/10 text-orange-600 dark:text-orange-400"
-          }`}
-        >
-          {isHealthy ? "Ready" : "Missing"}
-        </div>
-      )}
-    </div>
-  );
-}

package/apps/dashboard/src/app/(dashboard)/servers/new/_components/error-banner.tsx

@@ -1,13 +0,0 @@
-import { XCircle } from "lucide-react";
-
-export function ErrorBanner({ message }: { message: string }) {
-  return (
-    <div className="mb-4 rounded-xl border border-red-500/20 bg-red-500/5 p-4 flex items-start gap-3">
-      <XCircle className="size-5 text-red-500 shrink-0 mt-0.5" />
-      <div>
-        <p className="text-sm font-medium text-foreground">Connection failed</p>
-        <p className="text-xs text-muted-foreground mt-0.5">{message}</p>
-      </div>
-    </div>
-  );
-}