openship 0.1.0 → 0.1.1

package/apps/dashboard/Dockerfile

@@ -1,15 +1,13 @@
 # ─── Build stage ────────────────────────────────────────
-FROM node:20-alpine AS builder
-RUN corepack enable && corepack prepare pnpm@9.0.0 --activate
+FROM oven/bun:1 AS builder
 WORKDIR /app
 
-COPY pnpm-workspace.yaml pnpm-lock.yaml* package.json ./
-COPY tooling/ ./tooling/
+COPY package.json bun.lock pnpm-workspace.yaml ./
 COPY packages/ ./packages/
 COPY apps/dashboard/ ./apps/dashboard/
 
-RUN pnpm install --frozen-lockfile
-RUN pnpm run build --filter=openship-dashboard...
+RUN bun install --frozen-lockfile
+RUN cd apps/dashboard && bun run build
 
 # ─── Production stage ──────────────────────────────────
 FROM node:20-alpine AS runner

package/apps/dashboard/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/apps/dashboard/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/apps/dashboard/next.config.mjs

@@ -1,6 +1,16 @@
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  transpilePackages: ["openship-ui", "openship-core", "openship-db"],
+  output: "standalone",
+  distDir: process.env.NEXT_DIST_DIR || ".next",
+  transpilePackages: ["@repo/ui", "@repo/core", "@repo/db"],
+  turbopack: {
+    root: path.resolve(__dirname, "../.."),
+  },
 };
 
 export default nextConfig;

package/apps/dashboard/package.json

@@ -1,28 +1,40 @@
 {
-  "name": "openship-dashboard",
+  "name": "@repo/dashboard",
   "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3001",
+    "dev:saas": "NEXT_PUBLIC_API_URL=http://localhost:4100 NEXT_DIST_DIR=.next-saas next dev --port 3002",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "clean": "rm -rf .next .turbo node_modules"
   },
   "dependencies": {
-    "openship-ui": "workspace:*",
-    "openship-core": "workspace:*",
-    "openship-db": "workspace:*",
-    "next": "^14.2.0",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0",
-    "next-auth": "^5.0.0-beta.0"
+    "@radix-ui/react-slot": "^1.2.4",
+    "@repo/core": "workspace:*",
+    "@repo/ui": "workspace:*",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-search": "^0.16.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/xterm": "^6.0.0",
+    "better-auth": "^1.5.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.577.0",
+    "next": "^16.1.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "server-only": "^0.0.1",
+    "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
-    "openship-tsconfig": "workspace:*",
-    "@types/node": "^20.0.0",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
-    "typescript": "^5.4.0"
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^22.13.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^4.2.1",
+    "typescript": "^5.9.3"
   }
 }

package/apps/dashboard/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

package/apps/dashboard/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

package/apps/dashboard/src/app/(auth)/forgot-password/page.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { forgetPassword } from "@/lib/auth-client";
+import { useToast } from "@/components/toast";
+import { useI18n, interpolate } from "@/components/i18n-provider";
+import { AuthShell } from "@/components/auth-shell";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ArrowLeft, Loader2, Mail } from "lucide-react";
+import { isNetworkError } from "@/lib/api";
+
+export default function ForgotPasswordPage() {
+  const { toast } = useToast();
+  const { t } = useI18n();
+
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [sent, setSent] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await forgetPassword({
+        email,
+        redirectTo: "/reset-password",
+      });
+      setSent(true);
+    } catch (err) {
+      toast("error", isNetworkError(err)
+        ? t.auth.errors.serverUnreachable
+        : t.auth.errors.generic);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <AuthShell>
+      {sent ? (
+        <div className="text-center">
+          <div className="mx-auto mb-4 flex size-12 items-center justify-center rounded-2xl bg-secondary">
+            <Mail className="size-6 text-foreground" />
+          </div>
+          <h1 className="text-xl font-semibold tracking-tight text-foreground">
+            {t.auth.forgotPassword.sentTitle}
+          </h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            {interpolate(t.auth.forgotPassword.sentDescription, { email })}
+          </p>
+          <Button
+            variant="outline"
+            className="mt-6"
+            onClick={() => {
+              setSent(false);
+              setEmail("");
+            }}
+          >
+            {t.auth.forgotPassword.tryDifferentEmail}
+          </Button>
+          <p className="mt-6 text-sm text-muted-foreground">
+            <Link href="/login" className="font-medium text-foreground transition-colors hover:underline">
+              {t.auth.forgotPassword.backToSignIn}
+            </Link>
+          </p>
+        </div>
+      ) : (
+        <>
+          <div className="mb-6">
+            <h1 className="text-xl font-semibold tracking-tight text-foreground">
+              {t.auth.forgotPassword.title}
+            </h1>
+            <p className="mt-1 text-sm text-muted-foreground">
+              {t.auth.forgotPassword.subtitle}
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-3">
+            <div className="space-y-1.5">
+              <Label htmlFor="forgot-email">{t.auth.forgotPassword.emailLabel}</Label>
+              <Input
+                id="forgot-email"
+                type="email"
+                autoComplete="email"
+                placeholder={t.auth.forgotPassword.emailPlaceholder}
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+            </div>
+
+            <Button type="submit" disabled={loading} className="mt-1 w-full">
+              {loading && <Loader2 className="animate-spin" />}
+              {loading ? t.auth.forgotPassword.submitting : t.auth.forgotPassword.submit}
+            </Button>
+          </form>
+
+          <p className="mt-8 text-center text-sm text-muted-foreground">
+            <Link
+              href="/login"
+              className="inline-flex items-center gap-1 font-medium text-foreground transition-colors hover:underline"
+            >
+              <ArrowLeft className="size-3.5" />
+              {t.auth.forgotPassword.backToSignIn}
+            </Link>
+          </p>
+        </>
+      )}
+    </AuthShell>
+  );
+}

package/apps/dashboard/src/app/(auth)/layout.tsx

@@ -1,6 +1,21 @@
+import { redirect } from "next/navigation";
+import { getSession, getDeploymentInfo } from "@/lib/server/session";
+import { AuthProviders } from "./providers";
+
 /**
- * Auth layout — minimal shell without sidebar, used for login/register pages.
+ * Auth layout — minimal shell, no sidebar.
+ * If the user already has a valid session, redirect to dashboard.
+ * Passes deployment info to auth pages via context.
  */
-export default function AuthLayout({ children }: { children: React.ReactNode }) {
-  return <div className="min-h-screen bg-gray-50">{children}</div>;
+export default async function AuthLayout({ children }: { children: React.ReactNode }) {
+  const session = await getSession();
+  if (session) redirect("/");
+
+  const deploymentInfo = await getDeploymentInfo();
+
+  return (
+    <AuthProviders authMode={deploymentInfo.authMode} cloudAuthUrl={deploymentInfo.cloudAuthUrl} selfHosted={deploymentInfo.selfHosted}>
+      <div className="th-page">{children}</div>
+    </AuthProviders>
+  );
 }

package/apps/dashboard/src/app/(auth)/login/page.tsx

@@ -1,11 +1,220 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { signIn } from "@/lib/auth-client";
+import { useToast } from "@/components/toast";
+import { useI18n } from "@/components/i18n-provider";
+import { useAuthContext } from "../providers";
+import { AuthShell } from "@/components/auth-shell";
+import { OAuthButtons } from "@/components/oauth-buttons";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Eye, EyeOff, Loader2, ExternalLink } from "lucide-react";
+import { isNetworkError } from "@/lib/api";
+
 export default function LoginPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { toast } = useToast();
+  const { t } = useI18n();
+  const { authMode, cloudAuthUrl, selfHosted } = useAuthContext();
+
+  const isDesktop = typeof window !== "undefined" && !!(window as any).desktop?.isDesktop;
+  const handleBack = isDesktop ? () => (window as any).desktop.reset() : undefined;
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const callbackError = searchParams.get("error");
+
+  // Desktop callback: after login, redirect to authorize page (has state + PKCE)
+  // Self-hosted connect: after login, redirect directly to handoff (no state)
+  const callback = searchParams.get("callback");
+  const appParam = searchParams.get("app");
+  const machineParam = searchParams.get("machine");
+  const stateParam = searchParams.get("state");
+  const codeChallengeParam = searchParams.get("code_challenge");
+  const API_URL = process.env.NEXT_PUBLIC_API_URL || "";
+
+  // Desktop flow (state present) → authorize page with explicit consent
+  // Self-hosted connect (no state) → direct handoff
+  const postLoginUrl = callback
+    ? stateParam
+      ? `/authorize?${new URLSearchParams({
+          callback,
+          ...(appParam ? { app: appParam } : {}),
+          ...(machineParam ? { machine: machineParam } : {}),
+          ...(stateParam ? { state: stateParam } : {}),
+          ...(codeChallengeParam ? { code_challenge: codeChallengeParam } : {}),
+        }).toString()}`
+      : `${API_URL}/api/cloud/connect-handoff?redirect=${encodeURIComponent(callback)}`
+    : null;
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const result = await signIn.email({ email, password });
+      if (result.error) {
+        toast("error", result.error.message ?? t.auth.errors.invalidCredentials);
+      } else if (postLoginUrl) {
+        window.location.href = postLoginUrl;
+      } else {
+        router.push("/");
+      }
+    } catch (err) {
+      toast("error", isNetworkError(err)
+        ? t.auth.errors.serverUnreachable
+        : t.auth.errors.generic);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  /* ── Zero-auth mode (desktop): auto-redirect to create session ── */
+  if (authMode === "none") {
+    const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:4000";
+    // Redirect to the desktop-login endpoint which creates a real
+    // session cookie and redirects back to the dashboard.
+    if (typeof window !== "undefined") {
+      window.location.href = `${apiUrl}/api/auth/desktop-login`;
+    }
+    return (
+      <AuthShell>
+        <div className="flex items-center justify-center py-8">
+          <Loader2 className="size-6 animate-spin text-muted-foreground" />
+        </div>
+      </AuthShell>
+    );
+  }
+
+  /* ── Cloud mode (desktop): redirect to Openship Cloud for all auth ── */
+  if (authMode === "cloud") {
+    const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:4000";
+    const callbackUrl = `${apiUrl}/api/auth/cloud-callback`;
+    const cloudLoginUrl = `${cloudAuthUrl}/login?callback=${encodeURIComponent(callbackUrl)}`;
+
+    return (
+      <AuthShell onBack={handleBack}>
+        <div className="mb-6 text-center">
+          <h1 className="text-xl font-semibold tracking-tight text-foreground">
+            {t.auth.login.title}
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Sign in with your Openship account to continue.
+          </p>
+        </div>
+
+        {callbackError && (
+          <div className="mb-4 rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+            {callbackError === "missing_code"
+              ? "Authentication was cancelled."
+              : "Authentication failed. Please try again."}
+          </div>
+        )}
+
+        <Button
+          className="w-full"
+          size="lg"
+          onClick={() => { window.location.href = cloudLoginUrl; }}
+        >
+          <ExternalLink className="mr-2 size-4" />
+          Sign in with Openship
+        </Button>
+      </AuthShell>
+    );
+  }
+
+  /* ── Local mode: email/password form ── */
   return (
-    <div className="flex min-h-screen items-center justify-center">
-      <div className="w-full max-w-sm rounded-lg border p-8">
-        <h1 className="mb-6 text-2xl font-bold">Sign in to Openship</h1>
-        {/* Auth form will go here — next-auth / credentials / OAuth */}
-        <p className="text-sm text-gray-500">Authentication coming soon.</p>
+    <AuthShell onBack={handleBack}>
+      <div className="mb-6">
+        <h1 className="text-xl font-semibold tracking-tight text-foreground">
+          {t.auth.login.title}
+        </h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          {t.auth.login.subtitle}
+        </p>
       </div>
-    </div>
+
+      <form onSubmit={handleSubmit} className="space-y-3">
+        <div className="space-y-1.5">
+          <Label htmlFor="login-email">{t.auth.login.emailLabel}</Label>
+          <Input
+            id="login-email"
+            type="email"
+            autoComplete="email"
+            placeholder={t.auth.login.emailPlaceholder}
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <div className="flex items-center justify-between">
+            <Label htmlFor="login-password">{t.auth.login.passwordLabel}</Label>
+            <Link
+              href="/forgot-password"
+              className="text-xs text-muted-foreground transition-colors hover:text-foreground"
+            >
+              {t.auth.login.forgot}
+            </Link>
+          </div>
+          <div className="relative">
+            <Input
+              id="login-password"
+              type={showPassword ? "text" : "password"}
+              autoComplete="current-password"
+              placeholder={t.auth.login.passwordPlaceholder}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              className="pr-10"
+            />
+            <button
+              type="button"
+              onClick={() => setShowPassword((v) => !v)}
+              tabIndex={-1}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-foreground"
+              aria-label={showPassword ? t.auth.hidePassword : t.auth.showPassword}
+            >
+              {showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+            </button>
+          </div>
+        </div>
+
+        <Button type="submit" disabled={loading} className="mt-1 w-full">
+          {loading && <Loader2 className="animate-spin" />}
+          {loading ? t.auth.login.submitting : t.auth.login.submit}
+        </Button>
+      </form>
+
+      {/* OAuth only for SaaS (cloud-hosted) — hidden on self-hosted */}
+      {!selfHosted && <OAuthButtons callbackURL={postLoginUrl ?? "/"} />}
+
+      <p className="mt-8 text-center text-sm text-muted-foreground">
+        {t.auth.login.noAccount}{" "}
+        <Link
+          href={callback
+            ? `/register?${new URLSearchParams({
+                callback,
+                ...(appParam ? { app: appParam } : {}),
+                ...(machineParam ? { machine: machineParam } : {}),
+                ...(stateParam ? { state: stateParam } : {}),
+                ...(codeChallengeParam ? { code_challenge: codeChallengeParam } : {}),
+              }).toString()}`
+            : "/register"}
+          className="font-medium text-foreground transition-colors hover:underline"
+        >
+          {t.auth.login.createOne}
+        </Link>
+      </p>
+    </AuthShell>
   );
 }

package/apps/dashboard/src/app/(auth)/providers.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+
+interface AuthContextValue {
+  authMode: "cloud" | "local" | "none";
+  cloudAuthUrl: string;
+  selfHosted: boolean;
+}
+
+const AuthContext = createContext<AuthContextValue>({
+  authMode: "local",
+  cloudAuthUrl: "",
+  selfHosted: true,
+});
+
+export function useAuthContext() {
+  return useContext(AuthContext);
+}
+
+interface AuthProvidersProps {
+  children: React.ReactNode;
+  authMode: "cloud" | "local" | "none";
+  cloudAuthUrl: string;
+  selfHosted: boolean;
+}
+
+export function AuthProviders({ children, authMode, cloudAuthUrl, selfHosted }: AuthProvidersProps) {
+  return (
+    <AuthContext.Provider value={{ authMode, cloudAuthUrl, selfHosted }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}