openship 0.1.0 → 0.1.1

package/apps/dashboard/src/context/CloudContext.tsx

@@ -0,0 +1,275 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { Cloud, ExternalLink, X, Rocket, Shield, Globe, Zap, Loader2 } from "lucide-react";
+import { cloudApi } from "@/lib/api";
+import { useGitHub } from "@/context/GitHubContext";
+import { Button } from "@/components/ui/button";
+import { openAuthWindow } from "@/utils/authWindow";
+
+/* ------------------------------------------------------------------ */
+/*  Types                                                             */
+/* ------------------------------------------------------------------ */
+
+interface CloudUser {
+  name: string;
+  email: string;
+  image?: string | null;
+}
+
+interface CloudState {
+  /** Whether connected to Openship Cloud */
+  connected: boolean;
+  /** Cloud user info (available when connected) */
+  cloudUser: CloudUser | null;
+  /** Whether the initial status check is in flight */
+  loading: boolean;
+  /** Whether a connect flow is in progress */
+  connecting: boolean;
+  /**
+   * Call before a cloud-only action. Shows the connect modal if
+   * not connected and returns `false`. Returns `true` if connected.
+   *
+   * Usage:
+   *   if (!requireCloud("deploy to cloud")) return;
+   */
+  requireCloud: (feature: string) => boolean;
+  /** Start the cloud connect flow (desktop IPC or browser popup) */
+  startConnect: () => void;
+  /** Force a status re-check (e.g. after connecting) */
+  refresh: () => Promise<void>;
+  /** Manually set connected (used by settings callback) */
+  setConnected: (v: boolean) => void;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Context                                                           */
+/* ------------------------------------------------------------------ */
+
+const CloudContext = createContext<CloudState | undefined>(undefined);
+
+export function useCloud() {
+  const ctx = useContext(CloudContext);
+  if (!ctx) throw new Error("useCloud must be used within CloudProvider");
+  return ctx;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Provider                                                          */
+/* ------------------------------------------------------------------ */
+
+const FEATURES = [
+  { icon: Rocket, label: "Cloud deployments" },
+  { icon: Shield, label: "Managed infrastructure" },
+  { icon: Globe, label: "Automatic SSL & domains" },
+  { icon: Zap, label: "Global CDN" },
+];
+
+export function CloudProvider({ children }: { children: ReactNode }) {
+  const { selfHosted, cloudAuthUrl } = useGitHub();
+
+  const [connected, setConnected] = useState(false);
+  const [cloudUser, setCloudUser] = useState<CloudUser | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [connecting, setConnecting] = useState(false);
+  const [modalFeature, setModalFeature] = useState<string | null>(null);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  // Clean up polling on unmount
+  useEffect(() => {
+    return () => {
+      if (pollRef.current) clearInterval(pollRef.current);
+    };
+  }, []);
+
+  // Check cloud status on mount (self-hosted / desktop only)
+  const checkStatus = useCallback(async () => {
+    if (!selfHosted) {
+      setLoading(false);
+      return;
+    }
+    try {
+      setLoading(true);
+      const res = await cloudApi.status();
+      setConnected(res?.connected ?? false);
+      setCloudUser(res?.user ?? null);
+    } catch {
+      setConnected(false);
+      setCloudUser(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [selfHosted]);
+
+  useEffect(() => {
+    checkStatus();
+  }, [checkStatus]);
+
+  const requireCloud = useCallback(
+    (feature: string): boolean => {
+      if (connected) return true;
+      setModalFeature(feature);
+      return false;
+    },
+    [connected],
+  );
+
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:4000";
+  const connectUrl = `${cloudAuthUrl}/login?callback=${encodeURIComponent(`${apiUrl}/api/cloud/connect-callback`)}`;
+
+  /** Desktop IPC connect flow with PKCE + nonce polling */
+  const startDesktopConnect = useCallback(async () => {
+    const desktop = (window as any).desktop;
+    if (!desktop?.cloud?.connect) return;
+
+    setConnecting(true);
+    try {
+      const result = await desktop.cloud.connect();
+      if (!result?.ok) {
+        setConnecting(false);
+        return;
+      }
+
+      const nonce = result.nonce;
+      let errorCount = 0;
+
+      pollRef.current = setInterval(async () => {
+        try {
+          const poll = await desktop.cloud.connectPoll(nonce);
+          if (poll.status === "resolved") {
+            if (pollRef.current) clearInterval(pollRef.current);
+            pollRef.current = null;
+            await checkStatus();
+            setConnecting(false);
+          } else if (poll.status === "expired") {
+            if (pollRef.current) clearInterval(pollRef.current);
+            pollRef.current = null;
+            setConnecting(false);
+          } else if (poll.status === "error") {
+            errorCount++;
+            if (errorCount >= 5) {
+              if (pollRef.current) clearInterval(pollRef.current);
+              pollRef.current = null;
+              setConnecting(false);
+            }
+          }
+        } catch {
+          errorCount++;
+          if (errorCount >= 5) {
+            if (pollRef.current) clearInterval(pollRef.current);
+            pollRef.current = null;
+            setConnecting(false);
+          }
+        }
+      }, 2000);
+    } catch {
+      setConnecting(false);
+    }
+  }, [checkStatus]);
+
+  /** Browser popup connect flow */
+  const startBrowserConnect = useCallback(() => {
+    const handle = openAuthWindow();
+    handle.navigate(connectUrl);
+    handle.onClose(() => checkStatus());
+  }, [connectUrl, checkStatus]);
+
+  /** Start cloud connect — auto-detects desktop vs browser */
+  const startConnect = useCallback(() => {
+    const isDesktop = typeof window !== "undefined" && (window as any).desktop?.isDesktop;
+    if (isDesktop) {
+      startDesktopConnect();
+    } else {
+      startBrowserConnect();
+    }
+  }, [startDesktopConnect, startBrowserConnect]);
+
+  return (
+    <CloudContext.Provider
+      value={{ connected, cloudUser, loading, connecting, requireCloud, startConnect, refresh: checkStatus, setConnected }}
+    >
+      {children}
+
+      {/* ── Connect Modal ──────────────────────────────────── */}
+      {modalFeature && (
+        <div className="fixed inset-0 z-[10000] flex items-center justify-center">
+          {/* Backdrop */}
+          <div
+            className="absolute inset-0 bg-black/40 backdrop-blur-sm"
+            onClick={() => setModalFeature(null)}
+          />
+
+          {/* Panel */}
+          <div className="relative mx-4 w-full max-w-md rounded-2xl border border-border bg-card p-6 shadow-xl animate-in fade-in zoom-in-95 duration-200">
+            {/* Close */}
+            <button
+              onClick={() => setModalFeature(null)}
+              className="absolute right-4 top-4 rounded-lg p-1 text-muted-foreground hover:bg-muted"
+            >
+              <X className="size-4" />
+            </button>
+
+            {/* Icon */}
+            <div className="mb-4 flex size-14 items-center justify-center rounded-2xl bg-gradient-to-br from-primary/80 to-primary shadow-sm shadow-primary/20">
+              <Cloud className="size-7 text-primary-foreground" />
+            </div>
+
+            {/* Title */}
+            <h2 className="text-lg font-semibold text-foreground">
+              Connect Openship Cloud
+            </h2>
+            <p className="mt-1 text-sm text-muted-foreground leading-relaxed">
+              <strong className="text-foreground">{modalFeature}</strong> requires
+              an Openship Cloud connection. Connect your account to unlock:
+            </p>
+
+            {/* Feature list */}
+            <div className="mt-4 space-y-2">
+              {FEATURES.map(({ icon: Icon, label }) => (
+                <div key={label} className="flex items-center gap-2.5 text-sm text-muted-foreground">
+                  <div className="size-7 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
+                    <Icon className="size-3.5 text-primary" />
+                  </div>
+                  <span>{label}</span>
+                </div>
+              ))}
+            </div>
+
+            {/* Actions */}
+            <div className="mt-6 flex flex-col gap-2">
+              <Button
+                size="lg"
+                disabled={connecting}
+                onClick={() => {
+                  setModalFeature(null);
+                  startConnect();
+                }}
+              >
+                {connecting ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <ExternalLink className="size-4" />
+                )}
+                {connecting ? "Waiting for sign in…" : "Connect to Openship Cloud"}
+              </Button>
+              <Button
+                variant="ghost"
+                onClick={() => setModalFeature(null)}
+              >
+                Maybe later
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </CloudContext.Provider>
+  );
+}

package/apps/dashboard/src/context/DeploymentContext.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+import type { DeploymentContextType } from "./deployment/types";
+import { useDeploymentConfig } from "./deployment/useDeploymentConfig";
+import { useDeploymentBuild } from "./deployment/useDeploymentBuild";
+
+const DeploymentContext = createContext<DeploymentContextType | undefined>(undefined);
+
+export const useDeployment = () => {
+  const context = useContext(DeploymentContext);
+  if (!context) {
+    throw new Error("useDeployment must be used within DeploymentProvider");
+  }
+  return context;
+};
+
+export const DeploymentProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const {
+    config,
+    setConfig,
+    updateConfig,
+    updateOptions,
+    initializeFromRepo,
+    initializeFromLocal,
+  } = useDeploymentConfig();
+
+  const {
+    state,
+    terminalRef,
+    canStreamContainer,
+    steps,
+    deploymentStatus,
+    startDeployment,
+    connectToBuild,
+    loadBuildSession,
+    stopDeployment,
+    redeploy,
+    reset,
+    onTerminalReady,
+    _setContainerFailed,
+  } = useDeploymentBuild(config, setConfig);
+
+  const value: DeploymentContextType = {
+    config,
+    state,
+    terminalRef,
+    canStreamContainer,
+    updateConfig,
+    updateOptions,
+    initializeFromRepo,
+    initializeFromLocal,
+    startDeployment,
+    connectToBuild,
+    loadBuildSession,
+    stopDeployment,
+    redeploy,
+    reset,
+    onTerminalReady,
+    steps,
+    deploymentStatus,
+    _setContainerFailed,
+  };
+
+  return (
+    <DeploymentContext.Provider value={value}>
+      {children}
+    </DeploymentContext.Provider>
+  );
+};
+

package/apps/dashboard/src/context/GitHubContext.tsx

@@ -0,0 +1,288 @@
+"use client";
+
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+} from "react";
+import { githubApi } from "@/lib/api";
+import { openAuthWindow } from "@/utils/authWindow";
+
+/* ── Types ────────────────────────────────────────────────────────── */
+
+export interface GitHubAccount {
+  login: string;
+  avatar_url: string;
+  type: "User" | "Organization";
+  name?: string;
+}
+
+export interface GitHubRepo {
+  id: number;
+  full_name: string;
+  name: string;
+  description: string;
+  private: boolean;
+  stars: number;
+  stargazers_count?: number;
+  forks: number;
+  forks_count?: number;
+  language: string;
+  updated_at: string;
+  default_branch: string;
+  owner: { login: string; avatar_url: string } | string;
+  html_url?: string;
+}
+
+export type GitHubMode = "cloud" | "desktop" | "cli" | "token";
+
+interface GitHubContextValue {
+  /* Connection */
+  connected: boolean;
+  connecting: boolean;
+  loading: boolean;
+  mode: GitHubMode;
+  selfHosted: boolean;
+  deployMode: string;
+  authMode: "cloud" | "local" | "none";
+  cloudAuthUrl: string;
+  machineName?: string;
+  connect: () => Promise<void>;
+
+  /* CLI / Device flow */
+  cliAction: CliAction | null;
+
+  /* Data */
+  accounts: GitHubAccount[];
+  userLogin: string;
+  selectedOwner: string;
+  setSelectedOwner: (owner: string) => void;
+  repos: GitHubRepo[];
+  loadingRepos: boolean;
+
+  /* Actions */
+  refresh: () => Promise<void>;
+  fetchReposForOwner: (owner: string) => Promise<void>;
+}
+
+export type CliAction =
+  | { type: "terminal"; command: string; message: string }
+  | { type: "device_flow"; userCode: string; verificationUri: string; expiresIn: number; interval: number };
+
+const GitHubContext = createContext<GitHubContextValue | undefined>(undefined);
+
+export function useGitHub() {
+  const ctx = useContext(GitHubContext);
+  if (!ctx) throw new Error("useGitHub must be used within GitHubProvider");
+  return ctx;
+}
+
+/* ── Provider ─────────────────────────────────────────────────────── */
+
+interface GitHubProviderProps {
+  children: React.ReactNode;
+  initialSelfHosted?: boolean;
+  initialDeployMode?: string;
+  initialAuthMode?: "cloud" | "local" | "none";
+  initialCloudAuthUrl?: string;
+  initialMachineName?: string;
+}
+
+export function GitHubProvider({ children, initialSelfHosted = true, initialDeployMode = "docker", initialAuthMode = "local", initialCloudAuthUrl = "", initialMachineName }: GitHubProviderProps) {
+  const [connected, setConnected] = useState(false);
+  const [connecting, setConnecting] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [mode, setMode] = useState<GitHubMode>("cloud");
+  const [selfHosted, setSelfHosted] = useState(initialSelfHosted);
+  const [deployMode] = useState(initialDeployMode);
+  const [authMode] = useState(initialAuthMode);
+  const [cloudAuthUrl] = useState(initialCloudAuthUrl);
+  const [machineName] = useState(initialMachineName);
+  const [cliAction, setCliAction] = useState<CliAction | null>(null);
+  const [accounts, setAccounts] = useState<GitHubAccount[]>([]);
+  const [userLogin, setUserLogin] = useState("");
+  const [selectedOwner, setSelectedOwnerState] = useState("");
+  const [repos, setRepos] = useState<GitHubRepo[]>([]);
+  const [loadingRepos, setLoadingRepos] = useState(false);
+  const initRef = useRef(false);
+
+  /* ── Fetch connection info ──────────────────────────────────── */
+  const refresh = useCallback(async () => {
+    try {
+      const res = await githubApi.getUserHome();
+      if (res?.mode) {
+        // Map backend mode to frontend mode type
+        const m = res.mode as string;
+        if (m === "app") setMode("cloud");
+        else if (m === "cli") setMode("cli");
+        else if (m === "token") setMode("token");
+        else if (m === "oauth") setMode("desktop");
+        else setMode(m as GitHubMode);
+      }
+      if (res?.selfHosted !== undefined) setSelfHosted(res.selfHosted);
+      if (res?.status?.connected && res.accounts?.length > 0) {
+        setConnected(true);
+        setCliAction(null);
+        setAccounts(res.accounts);
+        setUserLogin(res.status.login);
+        if (!selectedOwner) setSelectedOwnerState(res.status.login);
+        setRepos(res.repos ?? []);
+      } else {
+        setConnected(false);
+        setAccounts([]);
+        setRepos([]);
+      }
+    } catch {
+      setConnected(false);
+    } finally {
+      setLoading(false);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  /* ── On mount ───────────────────────────────────────────────── */
+  useEffect(() => {
+    if (initRef.current) return;
+    initRef.current = true;
+    refresh();
+  }, [refresh]);
+
+  /* ── Connect GitHub ─────────────────────────────────────────── */
+  const connect = useCallback(async () => {
+    setConnecting(true);
+    setCliAction(null);
+
+    try {
+      const res = await githubApi.connect();
+
+      // Already connected — just refresh
+      if (res?.connected) {
+        setConnecting(false);
+        refresh();
+        return;
+      }
+
+      switch (res?.flow) {
+        case "redirect": {
+          // Backend gave us a URL — open in popup / system browser
+          const handle = openAuthWindow();
+          handle.navigate(res.url);
+          handle.onClose(() => {
+            setTimeout(() => {
+              setConnecting(false);
+              refresh();
+            }, 1000);
+          });
+          return;
+        }
+
+        case "device_code":
+          // Show verification code inline
+          setCliAction({
+            type: "device_flow",
+            userCode: res.userCode,
+            verificationUri: res.verificationUri,
+            expiresIn: res.expiresIn,
+            interval: res.interval,
+          });
+          setConnecting(false);
+          return;
+
+        case "terminal":
+          // Show terminal instruction
+          setCliAction({ type: "terminal", command: res.command, message: res.message });
+          setConnecting(false);
+          return;
+
+        default:
+          setConnecting(false);
+      }
+    } catch {
+      setConnecting(false);
+    }
+  }, [refresh]);
+
+  /* ── Device flow polling ────────────────────────────────────── */
+  useEffect(() => {
+    if (cliAction?.type !== "device_flow") return;
+
+    const interval = (cliAction.interval || 5) * 1000;
+    const timer = setInterval(async () => {
+      try {
+        const res = await githubApi.pollConnect();
+        if (res?.status === "complete") {
+          setCliAction(null);
+          refresh();
+        } else if (res?.status === "error") {
+          setCliAction(null);
+        }
+      } catch { /* keep polling */ }
+    }, interval);
+
+    return () => clearInterval(timer);
+  }, [cliAction, refresh]);
+
+  /* ── Fetch repos for an owner ───────────────────────────────── */
+  const fetchReposForOwner = useCallback(
+    async (owner: string) => {
+      if (!owner || !connected) return;
+      setLoadingRepos(true);
+      try {
+        // Backend is mode-aware — handles cloud (installation) vs desktop (OAuth) 
+        const res = await githubApi.getUserRepos(owner);
+        if (res && !res.error) {
+          const list = Array.isArray(res) ? res : res.data ?? res.repos ?? [];
+          setRepos(list);
+        } else {
+          setRepos([]);
+        }
+      } catch {
+        setRepos([]);
+      } finally {
+        setLoadingRepos(false);
+      }
+    },
+    [connected]
+  );
+
+  /* ── Owner change → fetch repos ─────────────────────────────── */
+  const setSelectedOwner = useCallback(
+    (owner: string) => {
+      setSelectedOwnerState(owner);
+      if (owner && owner !== selectedOwner) {
+        fetchReposForOwner(owner);
+      }
+    },
+    [selectedOwner, fetchReposForOwner]
+  );
+
+  return (
+    <GitHubContext.Provider
+      value={{
+        connected,
+        connecting,
+        loading,
+        mode,
+        selfHosted,
+        deployMode,
+        authMode,
+        cloudAuthUrl,
+        machineName,
+        connect,
+        cliAction,
+        accounts,
+        userLogin,
+        selectedOwner,
+        setSelectedOwner,
+        repos,
+        loadingRepos,
+        refresh,
+        fetchReposForOwner,
+      }}
+    >
+      {children}
+    </GitHubContext.Provider>
+  );
+}