showpane 0.4.1 → 0.4.3

package/bundle/scaffold/src/app/page.tsx

@@ -0,0 +1,177 @@
+import { prisma } from "@/lib/db";
+import { getRuntimeState, isRuntimeSnapshotMode } from "@/lib/runtime-state";
+import Link from "next/link";
+import { Presentation, Briefcase, UserPlus } from "lucide-react";
+import os from "node:os";
+import path from "node:path";
+
+const templates = [
+  {
+    name: "Sales Follow-up",
+    description: "Meeting notes, next steps, documents",
+    icon: Presentation,
+  },
+  {
+    name: "Consulting",
+    description: "Project overview, deliverables, timeline",
+    icon: Briefcase,
+  },
+  {
+    name: "Onboarding",
+    description: "Welcome, setup steps, resources",
+    icon: UserPlus,
+  },
+];
+
+export default async function Home() {
+  let portalCount = 0;
+  const showpaneBinDir = path.join(os.homedir(), ".showpane", "bin");
+  const resumeCommand = (process.env.PATH ?? "").split(path.delimiter).includes(showpaneBinDir)
+    ? "showpane claude"
+    : "npx showpane claude";
+  try {
+    if (isRuntimeSnapshotMode()) {
+      const state = await getRuntimeState();
+      portalCount = state?.portals.length ?? 0;
+    } else {
+      portalCount = await prisma.clientPortal.count();
+    }
+  } catch {
+    // DB not ready yet — show welcome page with 0 portals
+  }
+
+  return (
+    <main className="min-h-screen flex flex-col">
+      {/* Hero zone */}
+      <div className="bg-gradient-to-b from-[#2C5278] to-[#5A8BB5] px-4 py-16 md:py-24 text-center relative overflow-hidden">
+        <div
+          className="absolute inset-0 opacity-[0.07]"
+          style={{
+            backgroundImage: "radial-gradient(circle, white 1px, transparent 1px)",
+            backgroundSize: "24px 24px",
+          }}
+        />
+        <div className="relative">
+          <h1 className="sr-only">SHOWPANE</h1>
+          <div
+            role="img"
+            aria-label="SHOWPANE"
+            className="font-mono text-white text-[0.45rem] leading-[1.1] sm:text-[0.55rem] md:text-xs whitespace-pre select-none mx-auto w-fit"
+          >
+{`███████╗██╗  ██╗ ██████╗ ██╗    ██╗██████╗  █████╗ ███╗   ██╗███████╗
+██╔════╝██║  ██║██╔═══██╗██║    ██║██╔══██╗██╔══██╗████╗  ██║██╔════╝
+███████╗███████║██║   ██║██║ █╗ ██║██████╔╝███████║██╔██╗ ██║█████╗
+╚════██║██╔══██║██║   ██║██║███╗██║██╔═══╝ ██╔══██║██║╚██╗██║██╔══╝
+███████║██║  ██║╚██████╔╝╚███╔███╔╝██║     ██║  ██║██║ ╚████║███████╗
+╚══════╝╚═╝  ╚═╝ ╚═════╝  ╚══╝╚══╝╚═╝     ╚═╝  ╚═╝╚═╝  ╚═══╝╚══════╝`}
+          </div>
+          <p className="mt-6 text-white/90 text-lg">
+            Create professional client portals with Claude Code.
+          </p>
+        </div>
+      </div>
+
+      {/* Action zone */}
+      <div className="flex-1 bg-[#FDFBF7] px-4 py-12 md:py-16">
+        <div className="max-w-lg mx-auto">
+          {/* Steps */}
+          <ol className="space-y-4">
+            <li className="border border-gray-200 rounded-lg p-5 bg-white">
+              <div className="flex items-start gap-4">
+                <span className="flex-shrink-0 w-7 h-7 rounded-full bg-gray-900 text-white text-sm font-medium flex items-center justify-center">
+                  1
+                </span>
+                <div className="min-w-0">
+                  <p className="text-gray-900 font-medium mb-2">
+                    In a terminal, reopen your Showpane workspace
+                  </p>
+                  <code className="block text-sm text-gray-300 font-mono bg-[#111827] px-3 py-2 rounded overflow-x-auto">
+                    {resumeCommand}
+                  </code>
+                </div>
+              </div>
+            </li>
+
+            <li className="border border-gray-200 rounded-lg p-5 bg-white">
+              <div className="flex items-start gap-4">
+                <span className="flex-shrink-0 w-7 h-7 rounded-full bg-gray-900 text-white text-sm font-medium flex items-center justify-center">
+                  2
+                </span>
+                <div className="min-w-0">
+                  <p className="text-gray-900 font-medium mb-2">
+                    Use the fast path slash command
+                  </p>
+                  <code className="block text-sm text-gray-300 font-mono bg-[#111827] px-3 py-2 rounded">
+                    /portal create acme-health
+                  </code>
+                </div>
+              </div>
+            </li>
+
+            <li className="border border-gray-200 rounded-lg p-5 bg-white">
+              <div className="flex items-start gap-4">
+                <span className="flex-shrink-0 w-7 h-7 rounded-full bg-gray-900 text-white text-sm font-medium flex items-center justify-center">
+                  3
+                </span>
+                <div className="min-w-0">
+                  <p className="text-gray-900 font-medium mb-2">
+                    Or tell it what to create
+                  </p>
+                  <code className="block text-sm text-gray-300 font-mono bg-[#111827] px-3 py-2 rounded overflow-x-auto">
+                    Create a portal for my call with [client name]
+                  </code>
+                </div>
+              </div>
+            </li>
+          </ol>
+
+          <p className="mt-4 text-xs text-gray-400 text-center">
+            Don&apos;t have Claude Code?{" "}
+            <a
+              href="https://claude.ai/code"
+              className="text-blue-600 hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Install it here
+            </a>
+          </p>
+
+          {/* Template previews */}
+          <div className="mt-12">
+            <p className="text-sm font-medium text-gray-500 text-center mb-4">
+              Claude Code generates portals from templates
+            </p>
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+              {templates.map((t) => (
+                <div
+                  key={t.name}
+                  className="border border-gray-200 rounded-lg p-4 bg-white text-center"
+                >
+                  <t.icon className="h-5 w-5 text-gray-400 mx-auto mb-2" />
+                  <p className="text-sm font-medium text-gray-900">{t.name}</p>
+                  <p className="text-xs text-gray-500 mt-1">{t.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Footer zone */}
+      <footer className="bg-[#FDFBF7] px-4 pb-8 text-center space-y-2">
+        {portalCount > 0 && (
+          <p className="text-sm text-gray-500">
+            You have {portalCount} portal{portalCount !== 1 ? "s" : ""}.{" "}
+            <Link href="/client" className="text-blue-600 hover:underline">
+              Go to login
+            </Link>
+          </p>
+        )}
+        <p className="text-xs text-gray-400">
+          Powered by Claude Code
+        </p>
+      </footer>
+    </main>
+  );
+}

package/bundle/scaffold/src/components/portal-login.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { useState, FormEvent, ReactNode } from "react";
+import { ArrowRight, Eye, EyeOff } from "lucide-react";
+
+export type PortalLoginProps = {
+  companyName: string;
+  companyLogo: ReactNode;
+  companyUrl: string;
+  portalLabel?: string;
+  description?: string;
+  supportEmail: string;
+  authEndpoint?: string;
+  redirectBasePath?: string;
+};
+
+export function PortalLogin({
+  companyName,
+  companyLogo,
+  companyUrl,
+  portalLabel,
+  description,
+  supportEmail,
+  authEndpoint,
+  redirectBasePath,
+}: PortalLoginProps) {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<{ message: string; hint?: string } | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+
+  const resolvedPortalLabel = portalLabel ?? "Client Portal";
+  const resolvedDescription = description ?? `Private portal for ${companyName} clients. Sign in with the credentials we sent you.`;
+  const resolvedAuthEndpoint = authEndpoint ?? "/api/client-auth";
+  const resolvedRedirectBasePath = redirectBasePath ?? "/client";
+
+  let displayDomain: string;
+  try {
+    displayDomain = new URL(companyUrl).hostname;
+  } catch {
+    displayDomain = companyUrl;
+  }
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    if (loading) return;
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch(resolvedAuthEndpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username: username.trim(), password }),
+      });
+
+      if (res.ok) {
+        const { slug } = await res.json();
+        window.location.href = `${resolvedRedirectBasePath}/${slug}`;
+        return;
+      }
+
+      if (res.status === 429) {
+        setError({ message: "Too many attempts", hint: "Please wait a minute before trying again." });
+      } else if (res.status === 503) {
+        setError({ message: "Portal auth is not configured", hint: "Restart the dev server after updating environment variables." });
+      } else if (res.status >= 500) {
+        setError({ message: "Unable to sign in", hint: "The server returned an error. Try again in a moment." });
+      } else {
+        setError({ message: "Invalid username or password", hint: "Credentials are case-sensitive. Check for typos." });
+      }
+    } catch {
+      setError({ message: "Unable to connect", hint: "Check your internet connection and try again." });
+    }
+
+    setLoading(false);
+  }
+
+  const canSubmit = username.trim().length > 0 && password.length > 0 && !loading;
+
+  return (
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gray-100 px-4">
+      <div className="absolute -right-32 -top-32 h-96 w-96 rounded-full bg-primary/10 blur-[140px]" />
+      <div className="absolute -bottom-32 -left-32 h-96 w-96 rounded-full bg-primary/5 blur-[120px]" />
+
+      <div className="relative z-10 w-full max-w-sm">
+        <a href={companyUrl} className="mx-auto mb-8 flex w-fit items-center gap-2 transition-opacity hover:opacity-70">
+          {companyLogo}
+          <span className="text-base font-bold tracking-tight text-gray-900">{companyName}</span>
+        </a>
+
+        <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
+          <div className="mb-5">
+            <h1 className="text-xl font-bold tracking-tight text-gray-900">{resolvedPortalLabel}</h1>
+            <p className="mt-1 text-sm leading-relaxed text-gray-500">
+              {resolvedDescription}
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="username" className="block text-sm font-medium text-gray-700">Company Name</label>
+              <input
+                id="username"
+                type="text"
+                autoFocus
+                autoComplete="username"
+                autoCapitalize="off"
+                autoCorrect="off"
+                spellCheck={false}
+                value={username}
+                onChange={(e) => { setUsername(e.target.value); setError(null); }}
+                className="mt-1 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 shadow-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/30"
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
+              <div className="relative mt-1">
+                <input
+                  id="password"
+                  type={showPassword ? "text" : "password"}
+                  autoComplete="current-password"
+                  value={password}
+                  onChange={(e) => { setPassword(e.target.value); setError(null); }}
+                  className="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 pr-10 text-sm text-gray-900 shadow-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/30"
+                  required
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 cursor-pointer text-gray-400 transition-colors hover:text-gray-600"
+                  tabIndex={-1}
+                  aria-label={showPassword ? "Hide password" : "Show password"}
+                >
+                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                </button>
+              </div>
+            </div>
+            {error && (
+              <div className="rounded-lg bg-red-50 px-3 py-2">
+                <p className="text-sm text-red-600">{error.message}</p>
+                {error.hint && <p className="mt-0.5 text-xs text-red-500/70">{error.hint}</p>}
+              </div>
+            )}
+            <button
+              type="submit"
+              disabled={!canSubmit}
+              className="flex w-full items-center justify-center gap-2 rounded-lg bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white transition-all hover:bg-gray-800 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              {loading ? "Signing in..." : "Sign In"}
+              {!loading && <ArrowRight className="h-4 w-4" />}
+            </button>
+          </form>
+        </div>
+
+        <div className="mt-5 space-y-2 text-center text-xs">
+          <p className="text-gray-400">
+            Not a client? <a href={companyUrl} className="text-gray-500 underline underline-offset-2 transition-colors hover:text-gray-700">Visit {displayDomain}</a>
+          </p>
+          <p className="text-gray-400">
+            Lost your credentials? Email <span className="font-medium text-gray-500">{supportEmail}</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}