openship 0.1.0 → 0.1.1

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

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

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

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

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

@@ -0,0 +1,13 @@
+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>
+  );
+}