minutework 0.1.32 → 0.1.34

package/assets/templates/next-tenant-app/src/features/auth/components/login-screen.tsx

@@ -1,108 +1,81 @@
 "use client";
 
-import { startTransition, useEffect, useState } from "react";
 import type { FormEvent } from "react";
+import { startTransition, useState } from "react";
+import { ArrowRight, MailCheck } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
 
-import { ArrowRight, ShieldCheck, TerminalSquare } from "lucide-react";
-import { useRouter } from "next/navigation";
-
-import { Button } from "@/design-system/primitives/button";
-import { Input } from "@/design-system/primitives/input";
 import { PanelFrame } from "@/design-system/patterns/panel-frame";
 import { ThemeModeToggle } from "@/design-system/patterns/theme-mode-toggle";
+import { Button } from "@/design-system/primitives/button";
+import { Input } from "@/design-system/primitives/input";
 import { appRoutes } from "@/lib/app-routes";
+import { useMinuteWorkAuth } from "@minutework/web-auth/react";
+
+type AuthMode = "login" | "signup";
 
-export function LoginScreen({
-  appName,
-  operatorConsoleHref,
-}: {
-  appName: string;
-  operatorConsoleHref: string;
-}) {
+export function LoginScreen({ appName }: { appName: string }) {
   const router = useRouter();
-  const [username, setUsername] = useState("demo-user");
-  const [password, setPassword] = useState("demo-password");
+  const searchParams = useSearchParams();
+  const { login, signup } = useMinuteWorkAuth();
+  const [mode, setMode] = useState<AuthMode>("login");
+  const [email, setEmail] = useState("");
+  const [displayName, setDisplayName] = useState("");
+  const [password, setPassword] = useState("");
+  const [notice, setNotice] = useState("");
   const [error, setError] = useState("");
   const [submitting, setSubmitting] = useState(false);
 
-  useEffect(() => {
-    void fetch("/api/auth/session", {
-      method: "GET",
-      cache: "no-store",
-    }).catch(() => null);
-  }, []);
-
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     setSubmitting(true);
     setError("");
+    setNotice("");
 
     try {
-      const response = await fetch("/api/auth/login", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ username, password }),
-      });
-
-      if (!response.ok) {
-        const payload = (await response.json().catch(() => ({}))) as {
-          detail?: string;
-        };
-        setError(payload.detail || "Login failed.");
+      if (mode === "signup") {
+        await signup({
+          email,
+          password,
+          displayName,
+          claimRef: searchParams.get("claim_ref") || undefined,
+        });
+        setNotice("Check your email to finish verification.");
         setSubmitting(false);
         return;
       }
 
+      await login({ email, password });
       startTransition(() => {
         router.replace(appRoutes.appHome);
         router.refresh();
       });
-    } catch {
-      setError("Unable to reach the platform right now.");
+    } catch (caught) {
+      const message =
+        caught instanceof Error ? caught.message : "Unable to complete auth.";
+      setError(message);
       setSubmitting(false);
     }
   }
 
   return (
     <main className="min-h-screen bg-background text-foreground">
-      <div className="mx-auto flex min-h-screen max-w-6xl flex-col gap-10 px-6 py-8 lg:flex-row lg:items-center lg:justify-between">
-        <div className="flex justify-end lg:hidden">
-          <ThemeModeToggle className="max-w-xs" />
-        </div>
-
-        <section className="max-w-2xl space-y-6">
+      <div className="mx-auto flex min-h-screen max-w-6xl flex-col gap-8 px-6 py-8 lg:flex-row lg:items-center lg:justify-between">
+        <section className="max-w-2xl space-y-5">
+          <div className="flex justify-end lg:hidden">
+            <ThemeModeToggle className="max-w-xs" />
+          </div>
           <div className="space-y-3">
             <p className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
-              Combined Web Starter
+              {appName}
             </p>
             <h1 className="max-w-xl text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
-              Cross the public-to-private boundary without splitting the app.
+              Customer workspace
             </h1>
             <p className="max-w-xl text-base leading-7 text-muted-foreground sm:text-lg">
-              {appName} keeps marketing, docs, and blog routes public at the
-              root while preserving a server-owned platform session BFF under
-              `/app`.
+              Use your customer account to continue.
             </p>
           </div>
-
-          <div className="grid gap-3 sm:grid-cols-2">
-            <PanelFrame tone="raised" radius="xl" padding="lg" className="space-y-2">
-              <TerminalSquare className="size-5 text-primary" />
-              <p className="text-sm font-medium">Generic tenant shell</p>
-              <p className="text-sm leading-6 text-muted-foreground">
-                Start with public storytelling at the root and authenticated
-                workspace routing under `/app` instead of a private-only home page.
-              </p>
-            </PanelFrame>
-            <PanelFrame tone="raised" radius="xl" padding="lg" className="space-y-2">
-              <ShieldCheck className="size-5 text-primary" />
-              <p className="text-sm font-medium">Server-owned session</p>
-              <p className="text-sm leading-6 text-muted-foreground">
-                Session cookies stay on the server boundary while public pages
-                remain free of tenant-context reads and private BFF assumptions.
-              </p>
-            </PanelFrame>
-          </div>
         </section>
 
         <div className="flex w-full max-w-md flex-col gap-4 self-center lg:self-auto">
@@ -111,37 +84,69 @@ export function LoginScreen({
           </div>
 
           <PanelFrame tone="floating" radius="xl" padding="lg" className="space-y-6 shadow-2xl">
-            <div className="space-y-2">
-              <p className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
-                Template sign-in
-              </p>
-              <h2 className="text-2xl font-semibold tracking-tight">
-                Log into {appName}
-              </h2>
-              <p className="text-sm leading-6 text-muted-foreground">
-                Use platform tenant credentials to establish a server-owned
-                session before entering the authenticated shell under `/app`.
-              </p>
+            <div className="grid grid-cols-2 gap-2 rounded-lg border border-border p-1">
+              <Button
+                type="button"
+                variant={mode === "login" ? "default" : "ghost"}
+                onClick={() => {
+                  setMode("login");
+                  setError("");
+                  setNotice("");
+                }}
+              >
+                Log in
+              </Button>
+              <Button
+                type="button"
+                variant={mode === "signup" ? "default" : "ghost"}
+                onClick={() => {
+                  setMode("signup");
+                  setError("");
+                  setNotice("");
+                }}
+              >
+                Sign up
+              </Button>
             </div>
 
             <form className="space-y-5" onSubmit={handleSubmit}>
+              {mode === "signup" ? (
+                <div className="space-y-2">
+                  <label
+                    className="text-xs font-semibold uppercase tracking-widest text-muted-foreground"
+                    htmlFor="display-name"
+                  >
+                    Name
+                  </label>
+                  <Input
+                    id="display-name"
+                    autoComplete="name"
+                    className="h-12 text-base"
+                    value={displayName}
+                    onChange={(event) => setDisplayName(event.target.value)}
+                  />
+                </div>
+              ) : null}
+
               <div className="space-y-2">
                 <label
                   className="text-xs font-semibold uppercase tracking-widest text-muted-foreground"
-                  htmlFor="username"
+                  htmlFor="email"
                 >
-                  Username
+                  Email
                 </label>
                 <Input
-                  id="username"
-                  name="username"
-                  autoComplete="username"
+                  id="email"
+                  name="email"
+                  type="email"
+                  autoComplete="email"
                   className="h-12 text-base"
-                  value={username}
+                  value={email}
                   onChange={(event) => {
-                    setUsername(event.target.value);
+                    setEmail(event.target.value);
                     setError("");
                   }}
+                  required
                 />
               </div>
 
@@ -156,40 +161,34 @@ export function LoginScreen({
                   id="password"
                   name="password"
                   type="password"
-                  autoComplete="current-password"
+                  autoComplete={mode === "signup" ? "new-password" : "current-password"}
                   className="h-12 text-base"
                   value={password}
                   onChange={(event) => {
                     setPassword(event.target.value);
                     setError("");
                   }}
+                  required
                 />
               </div>
 
-              {error ? (
-                <p className="text-sm leading-6 text-destructive">{error}</p>
+              {notice ? (
+                <div className="flex items-start gap-2 rounded-md border border-border bg-muted/40 p-3 text-sm text-foreground">
+                  <MailCheck className="mt-0.5 size-4 text-primary" />
+                  <p>{notice}</p>
+                </div>
               ) : null}
+              {error ? <p className="text-sm leading-6 text-destructive">{error}</p> : null}
 
               <Button
                 type="submit"
                 className="h-12 w-full text-sm font-semibold"
                 disabled={submitting}
               >
-                {submitting ? "Signing in" : "Sign In"}
+                {submitting ? "Working" : mode === "signup" ? "Create account" : "Log in"}
                 <ArrowRight className="size-4" />
               </Button>
             </form>
-
-            <div className="flex flex-wrap items-center justify-between gap-3 border-t border-border pt-4">
-              <p className="text-sm text-muted-foreground">
-                Need the operator console instead?
-              </p>
-              <Button asChild type="button" variant="outline">
-                <a href={operatorConsoleHref} target="_blank" rel="noreferrer">
-                  Open /ops
-                </a>
-              </Button>
-            </div>
           </PanelFrame>
         </div>
       </div>

package/assets/templates/next-tenant-app/src/features/dashboard/components/tenant-dashboard.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import Link from "next/link";
-import { Blocks, Building2, FolderKanban, ShieldCheck } from "lucide-react";
+import { ArrowRight, Database, ShieldCheck, UserRound } from "lucide-react";
+import type { TenantCustomerSession } from "@minutework/web-auth";
 
 import { PanelFrame } from "@/design-system/patterns/panel-frame";
 import { StatusBadge } from "@/design-system/patterns/status-badge";
 import { Button } from "@/design-system/primitives/button";
 import { appRoutes } from "@/lib/app-routes";
-import type { AuthenticatedPlatformSession } from "@/lib/platform/contracts";
 
 function DashboardMetric({
   label,
@@ -28,40 +28,32 @@ function DashboardMetric({
 
 export function TenantDashboard({
   appName,
-  runtimeCommandExampleEnabled,
   session,
 }: {
   appName: string;
-  runtimeCommandExampleEnabled: boolean;
-  session: AuthenticatedPlatformSession;
+  session: TenantCustomerSession;
 }) {
   return (
     <div className="grid gap-6">
       <PanelFrame tone="floating" radius="xl" padding="lg" className="space-y-6">
         <div className="space-y-2">
-          <p className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
-            Authenticated Workspace
-          </p>
           <h2 className="text-3xl font-semibold tracking-tight">
-            {appName} ships with a reusable authenticated shell behind `/app`.
+            {appName} workspace
           </h2>
           <p className="max-w-3xl text-sm leading-7 text-muted-foreground">
-            This template is designed for Builder materialization into a writable
-            sandbox. Public storytelling lives at the root, while the
-            authenticated shell, tenant context controls, password settings,
-            route gating, and BFF auth boundary remain real under `/app`.
+            Customer session state is loaded through the MinuteWork web auth SDK.
           </p>
         </div>
 
         <div className="grid gap-3 md:grid-cols-3">
-          <DashboardMetric label="Signed-in user" value={session.user.username} />
           <DashboardMetric
-            label="Active tenant"
-            value={session.active_tenant.tenant_name}
+            label="Customer"
+            value={session.user?.display_name || session.user?.email || "Customer"}
           />
+          <DashboardMetric label="Tenant" value={session.tenant.name} />
           <DashboardMetric
-            label="Membership count"
-            value={`${session.memberships.length}`}
+            label="Role"
+            value={session.customer_membership?.roles.join(", ") || "customer"}
           />
         </div>
       </PanelFrame>
@@ -71,85 +63,58 @@ export function TenantDashboard({
           <div className="flex items-center gap-2">
             <ShieldCheck className="size-5 text-primary" />
             <h3 className="text-xl font-semibold tracking-tight">
-              Auth profile
+              Tenant web auth
             </h3>
           </div>
           <div className="flex flex-wrap gap-3">
-            <StatusBadge tone="primary">platform_session_bff</StatusBadge>
-            <StatusBadge tone="info">Server-owned cookies</StatusBadge>
-            <StatusBadge tone="success">CSRF forwarding</StatusBadge>
+            <StatusBadge tone="primary">tenant_web_auth_sdk</StatusBadge>
+            <StatusBadge tone="info">HttpOnly cookies</StatusBadge>
+            <StatusBadge tone="success">CSRF protected</StatusBadge>
           </div>
           <p className="text-sm leading-7 text-muted-foreground">
-            The browser talks only to this Next.js app. Upstream platform session
-            cookies and CSRF tokens remain server-owned inside route handlers.
-            Request-scoped tenant overrides stay scoped to feature actions unless
-            the explicit session-context APIs are used.
+            Customer sessions stay same-origin through /_mw.
           </p>
         </PanelFrame>
 
         <PanelFrame tone="raised" radius="xl" padding="lg" className="space-y-4">
           <div className="flex items-center gap-2">
-            <Building2 className="size-5 text-primary" />
+            <Database className="size-5 text-primary" />
             <h3 className="text-xl font-semibold tracking-tight">
-              Builder materialization
+              Manifest API
             </h3>
           </div>
           <p className="text-sm leading-7 text-muted-foreground">
-            The canonical template bundle is meant to be copied into
-            a writable workspace copy before an agent edits it. In runtime
-            Builder flows that writable root lives at
-            `BuilderWorkspace.sandbox_root/app/`; in CLI scaffolds the same
-            starter lands in `tenant-app/`. This source bundle stays governed
-            and read-only in normal authoring flows.
+            Query and action calls go through the SDK and are authorized as
+            `tenant_customer`.
           </p>
+          <Button asChild className="w-fit">
+            <Link href={appRoutes.demo}>
+              Open demo
+              <ArrowRight className="size-4" />
+            </Link>
+          </Button>
         </PanelFrame>
       </section>
 
-      <section className="grid gap-6 xl:grid-cols-[1fr,1fr]">
-        <PanelFrame tone="raised" radius="xl" padding="lg" className="space-y-4">
-          <div className="flex items-center gap-2">
-            <Blocks className="size-5 text-primary" />
-            <h3 className="text-xl font-semibold tracking-tight">
-              Scaffold contents
-            </h3>
-          </div>
-          <ul className="space-y-3 text-sm leading-6 text-muted-foreground">
-            <li>Design-system primitives, patterns, docs, and governance checks.</li>
-            <li>Public marketing, docs, and blog routes with a swappable content adapter.</li>
-            <li>Typed platform session BFF routes for login, context, and password flows.</li>
-            <li>Tenant-aware shell components ready for Builder-specific feature work.</li>
-          </ul>
-        </PanelFrame>
-
-        <PanelFrame tone="raised" radius="xl" padding="lg" className="space-y-4">
-          <div className="flex items-center gap-2">
-            <FolderKanban className="size-5 text-primary" />
-            <h3 className="text-xl font-semibold tracking-tight">
-              Optional example surface
-            </h3>
-          </div>
-          <p className="text-sm leading-7 text-muted-foreground">
-            The runtime-command example is bundled as optional sample code rather
-            than the template&apos;s default product identity.
-          </p>
-          {runtimeCommandExampleEnabled ? (
-            <Button asChild className="w-fit">
-              <Link href={appRoutes.runtimeCommandExample}>
-                Open runtime command example
-              </Link>
-            </Button>
-          ) : (
-            <div className="space-y-2">
-              <StatusBadge tone="default">Disabled by default</StatusBadge>
-              <p className="text-sm leading-6 text-muted-foreground">
-                Set `MW_ENABLE_RUNTIME_COMMAND_EXAMPLE=true` in the materialized
-                workspace to enable the example route and its matching gateway
-                proxy handlers.
-              </p>
-            </div>
+      <PanelFrame tone="raised" radius="xl" padding="lg" className="space-y-4">
+        <div className="flex items-center gap-2">
+          <UserRound className="size-5 text-primary" />
+          <h3 className="text-xl font-semibold tracking-tight">
+            Session payload
+          </h3>
+        </div>
+        <pre className="overflow-auto rounded-md bg-muted p-4 text-xs text-muted-foreground">
+          {JSON.stringify(
+            {
+              principal_kind: session.principal_kind,
+              tenant_id: session.tenant.id,
+              customer_membership_id: session.customer_membership?.id,
+            },
+            null,
+            2,
           )}
-        </PanelFrame>
-      </section>
+        </pre>
+      </PanelFrame>
     </div>
   );
 }

package/assets/templates/next-tenant-app/src/features/demo/components/manifest-demo.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from "react";
+import { Database, Play, RefreshCcw } from "lucide-react";
+
+import { PanelFrame } from "@/design-system/patterns/panel-frame";
+import { Button } from "@/design-system/primitives/button";
+import { Input } from "@/design-system/primitives/input";
+import { createIdempotencyKey, mw } from "@/mw/client";
+
+type DemoResult = {
+  data?: unknown;
+  count?: number;
+  created?: boolean;
+  idempotency_key?: string;
+};
+
+export function ManifestDemo() {
+  const [title, setTitle] = useState("Demo record");
+  const [result, setResult] = useState<DemoResult | null>(null);
+  const [error, setError] = useState("");
+  const [pending, setPending] = useState(false);
+
+  async function runQuery() {
+    setPending(true);
+    setError("");
+    try {
+      setResult(await mw.query<DemoResult>("demo.list", { limit: 10 }));
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : "Query failed.");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  async function runAction() {
+    setPending(true);
+    setError("");
+    try {
+      setResult(
+        await mw.action<DemoResult>(
+          "demo.create",
+          { title, status: "new" },
+          { idempotencyKey: createIdempotencyKey("demo-create") },
+        ),
+      );
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : "Action failed.");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="grid gap-6">
+      <PanelFrame tone="floating" radius="xl" padding="lg" className="space-y-5">
+        <div className="flex items-center gap-2">
+          <Database className="size-5 text-primary" />
+          <h2 className="text-2xl font-semibold tracking-tight">
+            Manifest query and action
+          </h2>
+        </div>
+        <div className="grid gap-3 md:grid-cols-[1fr,auto,auto]">
+          <Input
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+            className="h-11"
+            aria-label="Demo title"
+          />
+          <Button type="button" variant="outline" onClick={runQuery} disabled={pending}>
+            <RefreshCcw className="size-4" />
+            Query
+          </Button>
+          <Button type="button" onClick={runAction} disabled={pending}>
+            <Play className="size-4" />
+            Action
+          </Button>
+        </div>
+        {error ? <p className="text-sm text-destructive">{error}</p> : null}
+      </PanelFrame>
+
+      <PanelFrame tone="raised" radius="xl" padding="lg">
+        <pre className="min-h-40 overflow-auto rounded-md bg-muted p-4 text-xs text-muted-foreground">
+          {result ? JSON.stringify(result, null, 2) : "No result yet"}
+        </pre>
+      </PanelFrame>
+    </div>
+  );
+}

package/assets/templates/next-tenant-app/src/features/public-shell/components/static-public-page.tsx

@@ -0,0 +1,58 @@
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/design-system/primitives/button";
+import { appRoutes } from "@/lib/app-routes";
+
+export function StaticPublicPage({
+  eyebrow,
+  title,
+  body,
+}: {
+  eyebrow: string;
+  title: string;
+  body: string;
+}) {
+  return (
+    <main className="min-h-screen bg-background text-foreground">
+      <div className="mx-auto flex min-h-screen max-w-6xl flex-col px-6 py-6">
+        <nav className="flex items-center justify-between">
+          <Link className="text-sm font-semibold text-foreground" href={appRoutes.publicHome}>
+            Tenant App
+          </Link>
+          <div className="flex items-center gap-2">
+            <Button asChild variant="ghost">
+              <Link href={appRoutes.pricing}>Pricing</Link>
+            </Button>
+            <Button asChild variant="ghost">
+              <Link href={appRoutes.docsIndex}>Docs</Link>
+            </Button>
+            <Button asChild>
+              <Link href={appRoutes.login}>Log in</Link>
+            </Button>
+          </div>
+        </nav>
+
+        <section className="grid flex-1 content-center gap-8 py-16">
+          <div className="max-w-3xl space-y-5">
+            <p className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
+              {eyebrow}
+            </p>
+            <h1 className="text-5xl font-semibold tracking-tight text-balance sm:text-6xl">
+              {title}
+            </h1>
+            <p className="max-w-2xl text-lg leading-8 text-muted-foreground">
+              {body}
+            </p>
+            <Button asChild className="w-fit">
+              <Link href={appRoutes.login}>
+                Continue
+                <ArrowRight className="size-4" />
+              </Link>
+            </Button>
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}