openship 0.1.0 → 0.1.1

package/apps/dashboard/src/app/(dashboard)/integrations/page.tsx

@@ -0,0 +1,321 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Check, ExternalLink, Settings, AlertCircle } from "lucide-react";
+import { githubApi } from "@/lib/api";
+import { generateIcon } from "@/utils/icons";
+import { handleConnectGithub } from "@/utils/github";
+import { useToast } from "@/context/ToastContext";
+import { SectionContainer } from "@/components/ui/SectionContainer";
+
+interface GitHubStatus {
+  active: boolean;
+  username?: string;
+  avatar_url?: string;
+  scope?: string;
+  connected_at?: string;
+}
+
+export default function IntegrationsPage() {
+  const [showGithubModal, setShowGithubModal] = useState(false);
+  const [githubStatus, setGithubStatus] = useState<GitHubStatus>({ active: false });
+  const [loading, setLoading] = useState(true);
+  const { showToast } = useToast();
+  // Check GitHub connection status on mount
+  useEffect(() => {
+    checkGithubStatus();
+  }, []);
+
+  const checkGithubStatus = async () => {
+    try {
+      setLoading(true);
+      const response = await githubApi.getStatus();
+      
+      if (response && !response.error) {
+        setGithubStatus({
+          active: response.connected || false,
+          username: response.username || response.login,
+          avatar_url: response.avatar_url,
+          scope: response.scope,
+          connected_at: response.connected_at,
+        });
+      }
+    } catch (error) {
+      console.error("Failed to check GitHub status:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  
+
+  const handleDisconnectGithub = async () => {
+    if (!confirm("Are you sure you want to disconnect GitHub? This will revoke all permissions.")) {
+      return;
+    }
+
+    try {
+      // Call disconnect API
+      await githubApi.disconnect();
+      
+      setGithubStatus({ active: false });
+      console.log("GitHub disconnected successfully");
+    } catch (error) {
+      console.error("Failed to disconnect GitHub:", error);
+    }
+  };
+
+
+  return (
+    <div className="min-h-screen bg-[#fafafa]">
+      <SectionContainer>
+        {/* Header */}
+        <div className="mb-8 sm:mb-12 relative">
+          <h1 
+            className="font-bold text-black mb-2 text-2xl sm:text-3xl lg:text-[2.4rem]"
+            style={{ 
+              letterSpacing: '-0.5px',
+            }}
+          >
+            Integrations
+          </h1>
+          <p 
+            className="text-gray-600 text-sm sm:text-base lg:text-lg"
+            style={{ lineHeight: '1.5' }}
+          >
+            Connect your favorite tools and services to enhance your workflow
+          </p>
+          {/* Gradient underline */}
+          <div 
+            className="absolute left-0"
+            style={{
+              bottom: '-1rem',
+              width: '80px',
+              height: '3px',
+              background: 'linear-gradient(90deg, #36b37e, #00c6ff)',
+              borderRadius: '30px',
+            }}
+          ></div>
+        </div>
+
+        {/* GitHub Integration Card */}
+        <div 
+          className="bg-white rounded-[20px] border overflow-hidden transition-all duration-300 mb-6"
+          style={{
+            boxShadow: '0 8px 25px rgba(0, 0, 0, 0.04)',
+            borderColor: '#f0f0f0',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.transform = 'translateY(-5px)';
+            e.currentTarget.style.boxShadow = '0 15px 30px rgba(0, 0, 0, 0.08)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.transform = 'translateY(0)';
+            e.currentTarget.style.boxShadow = '0 8px 25px rgba(0, 0, 0, 0.04)';
+          }}
+        >
+          <div className="p-5 sm:p-8">
+            <div className="flex flex-col sm:flex-row items-start justify-between">
+              <div className="flex flex-col sm:flex-row items-start gap-4 sm:gap-5 flex-1 w-full">
+                {/* GitHub Icon */}
+                <div className="w-14 h-14 sm:w-16 sm:h-16 bg-black rounded-2xl flex items-center justify-center flex-shrink-0 shadow-lg">
+                  <svg className="w-8 h-8 sm:w-9 sm:h-9 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>
+
+                {/* Content */}
+                <div className="flex-1 w-full">
+                  <div className="flex flex-wrap items-center gap-2 mb-2">
+                    <h2 className="text-xl sm:text-2xl font-bold text-black">GitHub</h2>
+                    {githubStatus.active && (
+                      <span className="inline-flex items-center gap-1.5 px-3 py-1 bg-emerald-500/10 text-emerald-700 text-xs font-semibold rounded-full ring-1 ring-emerald-500/20">
+                        <Check className="w-3.5 h-3.5" />
+                        Connected
+                      </span>
+                    )}
+                  </div>
+
+                  <p className="text-sm sm:text-base text-gray-600 mb-5 sm:mb-6 leading-relaxed">
+                    Deploy repositories, create webhooks, and manage your GitHub projects directly from Oblien.
+                  </p>
+
+                  {/* Connected Status */}
+                  {githubStatus.active && githubStatus.username && (
+                    <div className="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 sm:p-5 mb-4 sm:mb-5 border border-gray-200">
+                      <div className="flex items-center gap-3">
+                        {githubStatus.avatar_url && (
+                          <img
+                            src={githubStatus.avatar_url}
+                            alt={githubStatus.username}
+                            className="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-gray-200"
+                          />
+                        )}
+                        <div>
+                          <p className="text-sm font-semibold text-black">
+                            @{githubStatus.username}
+                          </p>
+                          <p className="text-xs text-gray-500">
+                            Access: {githubStatus.scope || "Public"}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Features List */}
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3 mb-5 sm:mb-6">
+                    <div className="flex items-center gap-2 text-xs sm:text-sm text-gray-700">
+                      <div className="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center ring-1 ring-emerald-500/20 flex-shrink-0">
+                        <Check className="w-3 h-3 text-emerald-600" />
+                      </div>
+                      <span>Import repositories</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs sm:text-sm text-gray-700">
+                      <div className="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center ring-1 ring-emerald-500/20 flex-shrink-0">
+                        <Check className="w-3 h-3 text-emerald-600" />
+                      </div>
+                      <span>Auto deployments</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs sm:text-sm text-gray-700">
+                      <div className="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center ring-1 ring-emerald-500/20 flex-shrink-0">
+                        <Check className="w-3 h-3 text-emerald-600" />
+                      </div>
+                      <span>Branch management</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs sm:text-sm text-gray-700">
+                      <div className="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center ring-1 ring-emerald-500/20 flex-shrink-0">
+                        <Check className="w-3 h-3 text-emerald-600" />
+                      </div>
+                      <span>Organization access</span>
+                    </div>
+                  </div>
+
+                  {/* Actions */}
+                  <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
+                    {!githubStatus.active ? (
+                      <button
+                        onClick={() => handleConnectGithub(checkGithubStatus, showToast, setLoading)}
+                        disabled={loading}
+                        className="px-5 py-2.5 bg-black text-white text-sm font-semibold rounded-xl hover:bg-gray-900 transition-all shadow-sm hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed w-full sm:w-auto justify-center"
+                      >
+                        {loading ? "Checking..." : "Connect GitHub"}
+                      </button>
+                    ) : (
+                      <>
+                        <button
+                          onClick={() => handleConnectGithub(checkGithubStatus, showToast, setLoading)}
+                          className="px-4 py-2.5 border-2 border-gray-200 text-gray-700 hover:text-black hover:border-black text-sm font-semibold rounded-xl transition-all flex items-center justify-center gap-2 w-full sm:w-auto"
+                        >
+                          <Settings className="w-4 h-4" />
+                          Change Permissions
+                        </button>
+                        <button
+                          onClick={handleDisconnectGithub}
+                          className="px-4 py-2.5 border-2 border-red-200 text-red-700 hover:border-red-600 text-sm font-semibold rounded-xl hover:bg-red-50 transition-all w-full sm:w-auto justify-center"
+                        >
+                          Disconnect
+                        </button>
+                      </>
+                    )}
+                    <a
+                      href="https://docs.oblien.com/integrations/github"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-sm flex items-center justify-center gap-2 font-medium transition-colors text-black/50"
+                      
+                    >
+                      Learn more
+                      {generateIcon('External_link_HtLszLDBXqHilHK674zh2aKoSL7xUhyboAzP.png', 16, 'rgba(0,0,0,0.5)')}
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Coming Soon Section */}
+        <div 
+          className="relative rounded-[20px] sm:rounded-[24px] overflow-hidden border transition-all duration-300 p-6 sm:p-8 lg:p-10"
+          style={{
+            background: 'linear-gradient(135deg, #fff 0%, #f6faff 100%)',
+            boxShadow: '0 15px 40px rgba(0, 0, 0, 0.06)',
+            borderColor: '#e6effd',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.08)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.boxShadow = '0 15px 40px rgba(0, 0, 0, 0.06)';
+          }}
+        >
+          {/* Background decoration */}
+          <div 
+            className="absolute pointer-events-none"
+            style={{
+              top: '-60px',
+              right: '-60px',
+              width: '300px',
+              height: '300px',
+              background: 'radial-gradient(circle, rgba(0, 198, 255, 0.1), transparent 70%)',
+              borderRadius: '50%',
+              zIndex: 0,
+            }}
+          ></div>
+
+          <div className="relative z-10">
+            <div className="flex items-center gap-2 mb-4">
+              <div 
+                className="inline-block text-white font-bold text-xs px-3 py-1.5 rounded-full tracking-wide"
+                style={{
+                  background: 'linear-gradient(135deg, #36b37e, #00c6ff)',
+                  boxShadow: '0 4px 12px rgba(54, 179, 126, 0.25)',
+                }}
+              >
+                COMING SOON
+              </div>
+            </div>
+            <h3 className="text-xl sm:text-2xl font-bold text-black mb-3">More Integrations</h3>
+            <p className="text-sm sm:text-base text-gray-600 mb-6 leading-relaxed">
+              We're working on adding more integrations to help you build and deploy faster.
+            </p>
+            
+            <div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
+              {["GitLab", "Bitbucket", "Slack", "Discord"].map((service, index) => (
+                <div 
+                  key={service} 
+                  className="group bg-white/80 backdrop-blur-sm rounded-xl p-4 sm:p-5 border border-gray-200 hover:border-gray-300 transition-all duration-300 relative overflow-hidden"
+                  style={{
+                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.03)',
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.transform = 'translateY(-3px)';
+                    e.currentTarget.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.06)';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.transform = 'translateY(0)';
+                    e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.03)';
+                  }}
+                >
+                  <div 
+                    className="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-emerald-500 to-cyan-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"
+                  ></div>
+                  <p className="text-sm font-bold text-black mb-1">{service}</p>
+                  <p className="text-xs text-gray-500">Coming soon</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </SectionContainer>
+
+      {/* GitHub Permission Modal */}
+      {/* <GithubPermissionModal
+        isOpen={showGithubModal}
+        onClose={() => setShowGithubModal(false)}
+        onConnect={handleConnectGithub}
+      /> */}
+    </div>
+  );
+}

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

@@ -1,37 +1,27 @@
+import { redirect } from "next/navigation";
+import { getSession, getDeploymentInfo } from "@/lib/server/session";
+import { Sidebar } from "@/components/sidebar";
+import { DashboardProviders } from "./providers";
+
 /**
- * Dashboard shell layout — sidebar + top bar wrapper.
- * All authenticated dashboard pages live under this layout.
+ * Dashboard shell layout — sidebar + main area.
+ * Session is validated server-side before rendering.
  */
-export default function DashboardLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex h-screen">
-      {/* Sidebar */}
-      <aside className="w-64 shrink-0 border-r bg-gray-50 p-4">
-        <div className="mb-8 text-lg font-bold">Openship</div>
-        <nav className="flex flex-col gap-1 text-sm">
-          <a href="/projects" className="rounded px-3 py-2 hover:bg-gray-200">
-            Projects
-          </a>
-          <a href="/deployments" className="rounded px-3 py-2 hover:bg-gray-200">
-            Deployments
-          </a>
-          <a href="/domains" className="rounded px-3 py-2 hover:bg-gray-200">
-            Domains
-          </a>
-          <a href="/monitoring" className="rounded px-3 py-2 hover:bg-gray-200">
-            Monitoring
-          </a>
-          <a href="/settings" className="rounded px-3 py-2 hover:bg-gray-200">
-            Settings
-          </a>
-          <a href="/billing" className="rounded px-3 py-2 hover:bg-gray-200">
-            Billing
-          </a>
-        </nav>
-      </aside>
+export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const session = await getSession();
+  if (!session) redirect("/login");
 
-      {/* Main content */}
-      <main className="flex-1 overflow-y-auto p-6">{children}</main>
-    </div>
+  const deploymentInfo = await getDeploymentInfo();
+
+  return (
+    <DashboardProviders selfHosted={deploymentInfo.selfHosted} deployMode={deploymentInfo.deployMode} authMode={deploymentInfo.authMode} cloudAuthUrl={deploymentInfo.cloudAuthUrl} machineName={deploymentInfo.machineName}>
+      <div className="flex h-dvh">
+        <Sidebar />
+        {/* Main content */}
+        <main className="flex-1 overflow-y-auto">
+          {children}
+        </main>
+      </div>
+    </DashboardProviders>
   );
 }

package/apps/dashboard/src/app/(dashboard)/library/components/ConnectPrompt.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { Github, Loader2, GitBranch } from "lucide-react";
+import type { CliAction } from "@/context/GitHubContext";
+
+/* ── Shared SVG illustration ──────────────────────────────────────── */
+
+function CardStackSvg() {
+  return (
+    <svg className="absolute inset-0 w-full h-full" viewBox="0 0 260 180" fill="none">
+      <rect x="75" y="45" width="130" height="95" rx="14" fill="var(--th-sf-04)" />
+      <rect x="65" y="35" width="130" height="95" rx="14" fill="var(--th-sf-03)" stroke="var(--th-bd-subtle)" strokeWidth="1" />
+      <rect x="55" y="25" width="130" height="95" rx="14" fill="var(--th-card-bg)" stroke="var(--th-bd-default)" strokeWidth="1" />
+      <rect x="55" y="25" width="130" height="28" rx="14" fill="var(--th-sf-05)" />
+      <circle cx="72" cy="39" r="4" fill="#ef4444" fillOpacity="0.6" />
+      <circle cx="84" cy="39" r="4" fill="#eab308" fillOpacity="0.6" />
+      <circle cx="96" cy="39" r="4" fill="#22c55e" fillOpacity="0.6" />
+      <rect x="70" y="65" width="50" height="5" rx="2.5" fill="var(--th-on-12)" />
+      <rect x="70" y="76" width="85" height="4" rx="2" fill="var(--th-on-08)" />
+      <rect x="70" y="85" width="65" height="4" rx="2" fill="var(--th-on-08)" />
+      <circle cx="210" cy="90" r="22" fill="var(--th-on-05)" />
+      <circle cx="210" cy="90" r="16" fill="var(--th-card-bg)" stroke="var(--th-on-20)" strokeWidth="2" strokeDasharray="4 3" />
+      <path d="M210 82v16M202 90h16" stroke="var(--th-on-40)" strokeWidth="2" strokeLinecap="round" />
+      <circle cx="30" cy="60" r="4" fill="var(--th-on-10)" />
+      <circle cx="40" cy="140" r="6" fill="var(--th-on-08)" />
+      <circle cx="230" cy="40" r="3" fill="var(--th-on-12)" />
+      <path d="M185 95 Q 192 92 195 90" stroke="var(--th-on-12)" strokeWidth="1.5" strokeDasharray="3 3" fill="none" />
+    </svg>
+  );
+}
+
+/* ── Connect GitHub prompt ────────────────────────────────────────── */
+
+export function ConnectPrompt({
+  connecting,
+  onConnect,
+  cliAction,
+  onRefresh,
+}: {
+  connecting: boolean;
+  onConnect: () => void;
+  cliAction: CliAction | null;
+  onRefresh: () => void;
+}) {
+  // Terminal instruction (e.g. `gh auth login` or env var)
+  if (cliAction?.type === "terminal") {
+    return (
+      <div className="bg-card rounded-2xl border border-border/50">
+        <div className="px-6 pb-10 text-center">
+          <div className="relative mx-auto w-64 h-44">
+            <CardStackSvg />
+          </div>
+          <h3 className="text-lg font-medium text-foreground/80 mb-2">
+            Connect GitHub
+          </h3>
+          <p className="text-sm text-muted-foreground max-w-md mx-auto mb-4 leading-relaxed">
+            {cliAction.message}
+          </p>
+          <code className="inline-block px-4 py-2.5 bg-muted rounded-lg text-sm font-mono text-foreground mb-6">
+            {cliAction.command}
+          </code>
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
+            <button
+              onClick={onRefresh}
+              className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-primary-foreground text-sm font-medium rounded-xl hover:bg-primary/90 transition-all hover:shadow-lg hover:shadow-primary/25 hover:-translate-y-0.5"
+            >
+              Check Connection
+            </button>
+          </div>
+          <p className="text-xs text-muted-foreground/60 mt-6">
+            After logging in, click &quot;Check Connection&quot; to continue.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // CLI: device flow — show verification code
+  if (cliAction?.type === "device_flow") {
+    return (
+      <div className="bg-card rounded-2xl border border-border/50">
+        <div className="px-6 pb-10 text-center">
+          <div className="relative mx-auto w-64 h-44">
+            <CardStackSvg />
+          </div>
+          <h3 className="text-lg font-medium text-foreground/80 mb-2">
+            Enter this code on GitHub
+          </h3>
+          <code className="inline-block px-6 py-3 bg-muted rounded-lg text-2xl font-mono font-bold tracking-widest text-foreground mb-4">
+            {cliAction.userCode}
+          </code>
+          <p className="text-sm text-muted-foreground max-w-md mx-auto mb-6 leading-relaxed">
+            Go to{" "}
+            <a
+              href={cliAction.verificationUri}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-foreground underline underline-offset-2"
+            >
+              {cliAction.verificationUri}
+            </a>
+            {" "}and enter the code above.
+          </p>
+          <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
+            <Loader2 className="size-4 animate-spin" />
+            Waiting for authorization…
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Default: standard connect button
+  return (
+    <div className="bg-card rounded-2xl border border-border/50">
+      <div className="px-6 pb-10 text-center">
+        <div className="relative mx-auto w-64 h-44">
+          <svg className="absolute inset-0 w-full h-full" viewBox="0 0 260 180" fill="none">
+            <rect x="75" y="45" width="130" height="95" rx="14" fill="var(--th-sf-04)" />
+            <rect x="65" y="35" width="130" height="95" rx="14" fill="var(--th-sf-03)" stroke="var(--th-bd-subtle)" strokeWidth="1" />
+            <rect x="55" y="25" width="130" height="95" rx="14" fill="var(--th-card-bg)" stroke="var(--th-bd-default)" strokeWidth="1" />
+            <rect x="55" y="25" width="130" height="28" rx="14" fill="var(--th-sf-05)" />
+            <circle cx="72" cy="39" r="4" fill="#ef4444" fillOpacity="0.6" />
+            <circle cx="84" cy="39" r="4" fill="#eab308" fillOpacity="0.6" />
+            <circle cx="96" cy="39" r="4" fill="#22c55e" fillOpacity="0.6" />
+            <rect x="70" y="65" width="50" height="5" rx="2.5" fill="var(--th-on-12)" />
+            <rect x="70" y="76" width="85" height="4" rx="2" fill="var(--th-on-08)" />
+            <rect x="70" y="85" width="65" height="4" rx="2" fill="var(--th-on-08)" />
+            <circle cx="85" cy="108" r="9" fill="var(--th-on-05)" stroke="var(--th-on-10)" strokeWidth="1" />
+            <path d="M85 102a6 6 0 0 0-1.9 11.7c.3.05.4-.13.4-.3v-1.05c-1.63.35-1.97-.79-1.97-.79a1.55 1.55 0 0 0-.65-.86c-.53-.36.04-.35.04-.35a1.23 1.23 0 0 1 .9.6 1.25 1.25 0 0 0 1.71.49 1.25 1.25 0 0 1 .37-.78c-1.3-.15-2.67-.65-2.67-2.9a2.27 2.27 0 0 1 .6-1.57 2.1 2.1 0 0 1 .06-1.55s.49-.16 1.6.6a5.5 5.5 0 0 1 2.92 0c1.11-.76 1.6-.6 1.6-.6a2.1 2.1 0 0 1 .06 1.55 2.27 2.27 0 0 1 .6 1.57c0 2.26-1.37 2.75-2.68 2.9a1.4 1.4 0 0 1 .4 1.08v1.6c0 .17.1.35.4.3A6 6 0 0 0 85 102z" fill="var(--th-on-20)" />
+            <circle cx="210" cy="90" r="22" fill="var(--th-on-05)" />
+            <circle cx="210" cy="90" r="16" fill="var(--th-card-bg)" stroke="var(--th-on-20)" strokeWidth="2" strokeDasharray="4 3" />
+            <path d="M210 82v16M202 90h16" stroke="var(--th-on-40)" strokeWidth="2" strokeLinecap="round" />
+            <circle cx="30" cy="60" r="4" fill="var(--th-on-10)" />
+            <circle cx="40" cy="140" r="6" fill="var(--th-on-08)" />
+            <circle cx="230" cy="40" r="3" fill="var(--th-on-12)" />
+            <circle cx="245" cy="130" r="5" fill="var(--th-on-06)" />
+            <path d="M25 100l2-4 2 4-4-2 4 0-4 2z" fill="var(--th-on-16)" />
+            <path d="M220 150l1.5-3 1.5 3-3-1.5 3 0-3 1.5z" fill="var(--th-on-12)" />
+            <path d="M185 95 Q 192 92 195 90" stroke="var(--th-on-12)" strokeWidth="1.5" strokeDasharray="3 3" fill="none" />
+          </svg>
+        </div>
+
+        <h3 className="text-lg font-medium text-foreground/80 mb-2">
+          Connect your GitHub account
+        </h3>
+        <p className="text-sm text-muted-foreground max-w-sm mx-auto mb-8 leading-relaxed">
+          Link your GitHub account to browse repositories, deploy with one click,
+          and get automatic deployments on every push.
+        </p>
+
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
+          <button
+            onClick={onConnect}
+            disabled={connecting}
+            className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-primary-foreground text-sm font-medium rounded-xl hover:bg-primary/90 transition-all hover:shadow-lg hover:shadow-primary/25 hover:-translate-y-0.5 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {connecting ? (
+              <>
+                <Loader2 className="size-4 animate-spin" />
+                Connecting…
+              </>
+            ) : (
+              <>
+                <Github className="size-4" />
+                Connect GitHub
+              </>
+            )}
+          </button>
+          <Link
+            href="/library?tab=template"
+            className="inline-flex items-center gap-2 px-6 py-3 bg-muted/50 text-foreground text-sm font-medium rounded-xl hover:bg-muted transition-colors"
+          >
+            <GitBranch className="size-4" />
+            Browse Templates
+          </Link>
+        </div>
+
+        <p className="text-xs text-muted-foreground/60 mt-6">
+          We request read access to your repositories. You can revoke anytime.
+        </p>
+      </div>
+    </div>
+  );
+}