openship 0.1.0 → 0.1.1

package/apps/dashboard/src/components/import-project/ProjectSettings.tsx

@@ -0,0 +1,160 @@
+import React, { useCallback, useState, useMemo } from "react";
+import { frameworks, getFrameworkConfig, stackCategories } from "./Frameworks";
+import type { StackCategory } from "./Frameworks";
+import { STACKS } from "@repo/core";
+import { Sparkles, ChevronDown, ChevronUp } from "lucide-react";
+import { useDeployment } from "@/context/DeploymentContext";
+import type { FrameworkId } from "./types";
+
+const ProjectSettings: React.FC = () => {
+  const { config, updateConfig } = useDeployment();
+  const [showFrameworkPicker, setShowFrameworkPicker] = useState(false);
+
+  const isAutoDetected = config.detectedFramework != null && config.framework === config.detectedFramework;
+  const detectedFw = config.detectedFramework ? getFrameworkConfig(config.detectedFramework) : null;
+
+  const currentFwConfig = getFrameworkConfig(config.framework);
+  const [activeTab, setActiveTab] = useState<StackCategory>(currentFwConfig.category);
+
+  const filteredFrameworks = useMemo(
+    () => frameworks.filter((fw) => fw.category === activeTab),
+    [activeTab],
+  );
+
+  const handleFrameworkChange = useCallback((frameworkId: FrameworkId) => {
+    const fwConfig = getFrameworkConfig(frameworkId);
+    const stackDef = STACKS[frameworkId as keyof typeof STACKS];
+    const isStatic = fwConfig.options.isStatic;
+    updateConfig({
+      framework: frameworkId,
+      options: {
+        ...config.options,
+        buildCommand: stackDef?.defaultBuildCommand ?? fwConfig.options.buildCommand,
+        installCommand: fwConfig.options.installCommand,
+        outputDirectory: stackDef?.outputDirectory ?? fwConfig.options.outputDirectory,
+        startCommand: stackDef?.defaultStartCommand ?? "",
+        productionPort: String(stackDef?.defaultPort ?? 3000),
+        hasServer: !isStatic,
+      },
+    });
+  }, [updateConfig, config.options]);
+
+  const handleChangeClick = () => {
+    setShowFrameworkPicker(true);
+    if (detectedFw) setActiveTab(detectedFw.category);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Framework — auto-detected state */}
+      {isAutoDetected && !showFrameworkPicker && detectedFw && (
+        <div className="bg-card rounded-2xl border border-border/50 p-5">
+          <label className="text-[15px] font-semibold text-foreground mb-3 block">
+            Framework
+          </label>
+          <div className="flex items-center justify-between p-3.5 rounded-xl border border-border/50 bg-muted/40">
+            <div className="flex items-center gap-3">
+              <div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center">
+                {detectedFw.icon("hsl(var(--primary))")}
+              </div>
+              <div>
+                <p className="text-sm font-medium text-foreground">
+                  {detectedFw.name}
+                </p>
+                <div className="flex items-center gap-1.5 mt-0.5">
+                  <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md bg-primary/10 text-[10px] font-medium text-primary">
+                    <Sparkles className="size-2.5" />
+                    Detected
+                  </span>
+                </div>
+              </div>
+            </div>
+            <button
+              type="button"
+              onClick={handleChangeClick}
+              className="flex items-center gap-1 text-sm font-medium text-primary hover:text-primary/80 transition-colors"
+            >
+              Change
+              <ChevronDown className="size-3.5" />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Framework — full picker */}
+      {(!isAutoDetected || showFrameworkPicker) && (
+        <div className="bg-card rounded-2xl border border-border/50 p-5">
+          <div className="flex items-center justify-between mb-3">
+            <label className="text-[15px] font-semibold text-foreground">
+              Framework
+            </label>
+            {showFrameworkPicker && detectedFw && (
+              <button
+                type="button"
+                onClick={() => {
+                  setShowFrameworkPicker(false);
+                  // Reset to detected framework
+                  if (config.detectedFramework) handleFrameworkChange(config.detectedFramework);
+                }}
+                className="flex items-center gap-1 text-xs font-medium text-primary hover:text-primary/80 transition-colors"
+              >
+                <Sparkles className="size-3" />
+                Use detected
+                <ChevronUp className="size-3" />
+              </button>
+            )}
+          </div>
+
+          {/* Category tabs */}
+          <div className="flex gap-1 p-1 bg-muted/50 rounded-lg mb-4 w-fit">
+            {stackCategories.map((cat) => (
+              <button
+                key={cat.id}
+                type="button"
+                onClick={() => setActiveTab(cat.id)}
+                className={`px-3.5 py-1.5 text-sm font-medium rounded-md transition-all ${
+                  activeTab === cat.id
+                    ? "bg-background text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground"
+                }`}
+              >
+                {cat.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Framework grid */}
+          <div className="grid grid-cols-3 sm:grid-cols-5 lg:grid-cols-6 gap-2.5">
+            {filteredFrameworks.map((fw) => {
+              const isSelected = config.framework === fw.id;
+              return (
+                <button
+                  key={fw.id}
+                  onClick={() => handleFrameworkChange(fw.id)}
+                  type="button"
+                  className={`flex flex-col items-center gap-2.5 p-3.5 rounded-xl border transition-all ${
+                    isSelected
+                      ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                      : "border-border/50 hover:border-border hover:bg-muted/30"
+                  }`}
+                >
+                  <div className="w-8 h-8 flex items-center justify-center">
+                    {fw.icon(isSelected ? "hsl(var(--primary))" : "hsl(var(--foreground))")}
+                  </div>
+                  <span className={`text-xs font-medium ${isSelected ? "text-primary" : "text-muted-foreground"}`}>
+                    {fw.name}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+          <p className="text-sm text-muted-foreground mt-3">
+            Select your framework to auto-configure build settings
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default React.memo(ProjectSettings);

package/apps/dashboard/src/components/import-project/types.ts

@@ -0,0 +1,82 @@
+import type { StackId } from "@repo/core";
+
+export interface Framework {
+  id: string;
+  name: string;
+  icon: React.ReactNode;
+}
+
+export interface RepoData {
+  repo: string;
+  owner: string;
+  branch: string;
+  private: boolean | false;
+}
+
+export interface EnvironmentVariable {
+  key: string;
+  value: string;
+  visible: boolean;
+}
+
+export type StartCommand = string;
+
+export type FrameworkId = StackId;
+
+export interface ProjectSettingsProps {
+  projectName: string;
+  setProjectName: (name: string) => void;
+  framework: FrameworkId;
+  handleFrameworkChange: (frameworkId: FrameworkId) => void;
+  selectedBranch: string;
+  setSelectedBranch: (branch: string) => void;
+  branches: string[];
+  loadingBranches: boolean;
+}
+
+export interface BuildSettingsProps {
+  framework: FrameworkId;
+  buildCommand: string;
+  setBuildCommand: (command: string) => void;
+  outputDirectory: string;
+  setOutputDirectory: (directory: string) => void;
+  installCommand: string;
+  setInstallCommand: (command: string) => void;
+  startCommand: StartCommand;
+  setStartCommand: (command: string) => void;
+  rootDirectory: string;
+  setRootDirectory: (directory: string) => void;
+  productionPort: string;
+  setProductionPort: (port: string) => void;
+  hasServer: boolean;
+  setHasServer: (hasServer: boolean) => void;
+  projectName: string;
+}
+
+export interface EnvironmentVariablesProps {
+  envVars: EnvironmentVariable[];
+  setEnvVars: React.Dispatch<React.SetStateAction<EnvironmentVariable[]>>;
+  mode?: "deploy" | "settings";
+  showEditControls?: boolean;
+  isEditingMode?: boolean;
+  setIsEditingMode?: (value: boolean) => void;
+  showAddButton?: boolean;
+  onSave?: () => void;
+  onCancel?: () => void;
+  hasChanges?: boolean;
+  isSaving?: boolean;
+}
+
+export interface HeaderProps {
+  repoData: RepoData;
+}
+
+/* Re-export for backwards compat — utils/deployment.ts imports from here */
+export type { Deployment } from "@/app/(dashboard)/deployments/types";
+
+export interface SidebarProps {
+  repoData: RepoData;
+  framework: FrameworkId;
+  isDeploying: boolean;
+  handleDeploy: () => void;
+}

package/apps/dashboard/src/components/integrations/GithubPermissionModal.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import React, { useState } from "react";
+import { X, Lock, Unlock, Check } from "lucide-react";
+
+interface GithubPermissionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConnect: (scope: "public" | "all") => void;
+}
+
+const GithubPermissionModal: React.FC<GithubPermissionModalProps> = ({
+  isOpen,
+  onClose,
+  onConnect,
+}) => {
+  const [selectedScope, setSelectedScope] = useState<"public" | "all">("public");
+  const [isConnecting, setIsConnecting] = useState(false);
+
+  if (!isOpen) return null;
+
+  const handleConnect = async () => {
+    setIsConnecting(true);
+    await onConnect(selectedScope);
+    setIsConnecting(false);
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
+      <div className="bg-white rounded-lg shadow-xl max-w-lg w-full">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-gray-200">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-gray-900 rounded-lg flex items-center justify-center">
+              <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+              </svg>
+            </div>
+            <div>
+              <h2 className="text-xl font-semibold text-gray-900">Connect to GitHub</h2>
+              <p className="text-sm text-gray-500">Choose repository access level</p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="p-6 space-y-4">
+          <p className="text-sm text-gray-600 mb-6">
+            Select which repositories Oblien can access. You can change this later in your GitHub settings.
+          </p>
+
+          {/* Public Only Option */}
+          <button
+            onClick={() => setSelectedScope("public")}
+            className={`w-full p-4 border-2 rounded-lg text-left transition-all ${
+              selectedScope === "public"
+                ? "border-gray-900 bg-gray-50"
+                : "border-gray-200 hover:border-gray-300"
+            }`}
+          >
+            <div className="flex items-start justify-between">
+              <div className="flex items-start gap-3">
+                <div className={`mt-0.5 w-5 h-5 rounded-full border-2 flex items-center justify-center ${
+                  selectedScope === "public"
+                    ? "border-gray-900 bg-gray-900"
+                    : "border-gray-300"
+                }`}>
+                  {selectedScope === "public" && <Check className="w-3 h-3 text-white" />}
+                </div>
+                <div>
+                  <div className="flex items-center gap-2 mb-1">
+                    <Unlock className="w-4 h-4 text-gray-700" />
+                    <h3 className="font-semibold text-gray-900">Public repositories only</h3>
+                  </div>
+                  <p className="text-sm text-gray-600">
+                    Access to your public repositories. Perfect for open source projects.
+                  </p>
+                  <ul className="mt-2 space-y-1 text-xs text-gray-500">
+                    <li>• Read public repository data</li>
+                    <li>• Deploy public repositories</li>
+                    <li>• Create webhooks for public repos</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </button>
+
+          {/* All Repositories Option */}
+          <button
+            onClick={() => setSelectedScope("all")}
+            className={`w-full p-4 border-2 rounded-lg text-left transition-all ${
+              selectedScope === "all"
+                ? "border-gray-900 bg-gray-50"
+                : "border-gray-200 hover:border-gray-300"
+            }`}
+          >
+            <div className="flex items-start justify-between">
+              <div className="flex items-start gap-3">
+                <div className={`mt-0.5 w-5 h-5 rounded-full border-2 flex items-center justify-center ${
+                  selectedScope === "all"
+                    ? "border-gray-900 bg-gray-900"
+                    : "border-gray-300"
+                }`}>
+                  {selectedScope === "all" && <Check className="w-3 h-3 text-white" />}
+                </div>
+                <div>
+                  <div className="flex items-center gap-2 mb-1">
+                    <Lock className="w-4 h-4 text-gray-700" />
+                    <h3 className="font-semibold text-gray-900">Public and private repositories</h3>
+                  </div>
+                  <p className="text-sm text-gray-600">
+                    Full access to all your repositories. Required for private projects.
+                  </p>
+                  <ul className="mt-2 space-y-1 text-xs text-gray-500">
+                    <li>• Read public and private repository data</li>
+                    <li>• Deploy any repository</li>
+                    <li>• Create webhooks for all repos</li>
+                    <li>• Access organization repositories</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </button>
+
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mt-4">
+            <p className="text-xs text-blue-900">
+              <strong>Note:</strong> You can revoke access at any time from your GitHub settings under Applications → Authorized OAuth Apps.
+            </p>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between p-6 border-t border-gray-200 bg-gray-50">
+          <button
+            onClick={onClose}
+            disabled={isConnecting}
+            className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleConnect}
+            disabled={isConnecting}
+            className="px-6 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+          >
+            {isConnecting ? (
+              <>
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                Connecting...
+              </>
+            ) : (
+              <>
+                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                  <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+                </svg>
+                Connect to GitHub
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GithubPermissionModal;
+

package/apps/dashboard/src/components/language-switcher.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useI18n } from "@/components/i18n-provider";
+import { locales, type Locale } from "@/i18n";
+import { Button } from "@/components/ui/button";
+import { Globe } from "lucide-react";
+
+const labels: Record<Locale, string> = {
+  en: "EN",
+  ar: "عر",
+};
+
+/**
+ * Cycles through available locales on click.
+ * Compact icon button — shows the current locale code.
+ */
+export function LanguageSwitcher() {
+  const { locale, setLocale } = useI18n();
+
+  function next() {
+    const idx = locales.indexOf(locale);
+    setLocale(locales[(idx + 1) % locales.length]);
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={next}
+      aria-label="Switch language"
+      className="text-xs font-semibold"
+    >
+      <Globe className="size-4" />
+    </Button>
+  );
+}

package/apps/dashboard/src/components/logo.tsx

@@ -0,0 +1,13 @@
+/**
+ * Openship logo — a stylised "O" built with a bordered div.
+ * Uses CSS border-foreground so it renders instantly (no JS theme check).
+ */
+export function Logo({ size = 36, className }: { size?: number; className?: string }) {
+  return (
+    <div
+      className={`shrink-0 rounded-full border-[3px] border-foreground ${className ?? ""}`}
+      style={{ width: size, height: size }}
+      aria-hidden="true"
+    />
+  );
+}

package/apps/dashboard/src/components/network-error-handler.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useEffect } from "react";
+import { setNetworkErrorHandler } from "@/lib/api/client";
+import { useToast } from "@/components/toast";
+
+/**
+ * Mounts once in the root layout and registers a global handler so that any
+ * API call that fails at the network level (server down, ECONNREFUSED, timeout)
+ * automatically shows a toast — without needing per-call error handling.
+ */
+export function NetworkErrorHandler() {
+  const { toast } = useToast();
+
+  useEffect(() => {
+    setNetworkErrorHandler((msg) => {
+      toast("error", msg);
+    });
+
+    return () => {
+      // Clear the handler when this component unmounts
+      setNetworkErrorHandler(null);
+    };
+  }, [toast]);
+
+  return null;
+}

package/apps/dashboard/src/components/oauth-buttons.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useState } from "react";
+import { signIn } from "@/lib/auth-client";
+import { useToast } from "@/components/toast";
+import { useI18n } from "@/components/i18n-provider";
+import { Button } from "@/components/ui/button";
+import { Github, Loader2 } from "lucide-react";
+
+function GoogleIcon() {
+  return (
+    <svg width="17" height="17" viewBox="0 0 24 24">
+      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.07 5.07 0 0 1-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
+      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+      <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
+      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
+    </svg>
+  );
+}
+
+function isAbortError(err: unknown): boolean {
+  return err instanceof DOMException && err.name === "AbortError";
+}
+
+/**
+ * Shared OAuth buttons — GitHub + Google.
+ * Includes the divider above them.
+ * Pass callbackURL to override the default post-OAuth redirect.
+ */
+export function OAuthButtons({ callbackURL = "/" }: { callbackURL?: string }) {
+  const { toast } = useToast();
+  const { t } = useI18n();
+  const [loading, setLoading] = useState<"github" | "google" | null>(null);
+
+  async function handleOAuth(provider: "github" | "google") {
+    setLoading(provider);
+    try {
+      await signIn.social({ provider, callbackURL });
+    } catch (err) {
+      setLoading(null);
+      const msg = isAbortError(err)
+        ? t.auth.errors.serverUnreachable
+        : t.auth.errors.oauthFailed;
+      toast("error", msg);
+    }
+  }
+
+  return (
+    <>
+      {/* Divider */}
+      <div className="my-6 flex items-center gap-3">
+        <div className="h-px flex-1 bg-border" />
+        <span className="select-none text-xs text-muted-foreground">{t.auth.oauth.or}</span>
+        <div className="h-px flex-1 bg-border" />
+      </div>
+
+      {/* OAuth buttons */}
+      <div className="space-y-2.5">
+        <Button
+          variant="ghost"
+          disabled={loading !== null}
+          onClick={() => handleOAuth("github")}
+          className="w-full border-0 bg-foreground/[0.04] hover:bg-foreground/[0.08]"
+        >
+          {loading === "github" ? <Loader2 className="animate-spin" /> : <Github />}
+          {t.auth.oauth.github}
+        </Button>
+
+        <Button
+          variant="ghost"
+          disabled={loading !== null}
+          onClick={() => handleOAuth("google")}
+          className="w-full border-0 bg-foreground/[0.04] hover:bg-foreground/[0.08]"
+        >
+          {loading === "google" ? <Loader2 className="animate-spin" /> : <GoogleIcon />}
+          {t.auth.oauth.google}
+        </Button>
+      </div>
+    </>
+  );
+}