minutework 0.1.0

package/assets/templates/next-tenant-app/src/design-system/tokens/semantic.css

@@ -0,0 +1,105 @@
+:root {
+  --background: #f6fafc;
+  --foreground: var(--ds-foundation-neutral-950);
+  --card: #fcfdff;
+  --card-foreground: var(--ds-foundation-neutral-950);
+  --popover: #fcfdff;
+  --popover-foreground: var(--ds-foundation-neutral-950);
+  --primary: var(--ds-foundation-cyan-600);
+  --primary-foreground: var(--ds-foundation-white);
+  --secondary: #edf3f7;
+  --secondary-foreground: var(--ds-foundation-neutral-950);
+  --muted: #eef5f8;
+  --muted-foreground: #617487;
+  --accent: var(--ds-foundation-cyan-100);
+  --accent-foreground: var(--ds-foundation-neutral-950);
+  --destructive: var(--ds-foundation-red-500);
+  --destructive-foreground: var(--ds-foundation-white);
+  --border: #d7e5ed;
+  --input: #d7e5ed;
+  --ring: var(--ds-foundation-cyan-500);
+  --chart-1: var(--ds-foundation-cyan-500);
+  --chart-2: var(--ds-foundation-green-500);
+  --chart-3: var(--ds-foundation-blue-500);
+  --chart-4: var(--ds-foundation-yellow-500);
+  --chart-5: var(--ds-foundation-red-500);
+  --radius: 0.5rem;
+  --sidebar: #f8fbfd;
+  --sidebar-foreground: var(--ds-foundation-neutral-950);
+  --sidebar-primary: var(--ds-foundation-cyan-600);
+  --sidebar-primary-foreground: var(--ds-foundation-white);
+  --sidebar-accent: #edf5f8;
+  --sidebar-accent-foreground: var(--ds-foundation-neutral-950);
+  --sidebar-border: #d7e5ed;
+  --sidebar-ring: var(--ds-foundation-cyan-500);
+
+  --surface: #ffffff;
+  --surface-raised: #f3f8fb;
+  --text-link: var(--ds-foundation-cyan-700);
+  --success: var(--ds-foundation-green-500);
+  --warning: var(--ds-foundation-yellow-500);
+  --danger: var(--ds-foundation-red-500);
+  --info: var(--ds-foundation-blue-500);
+  --ai-bubble: #eef5f8;
+  --user-bubble: var(--ds-foundation-cyan-600);
+  --tenant-rail: var(--ds-foundation-cyan-50);
+  --tenant-rail-foreground: var(--ds-foundation-ink-500);
+  --tenant-rail-muted: #627789;
+  --tenant-rail-border: rgb(148 163 184 / 0.24);
+  --tenant-rail-surface: rgb(255 255 255 / 0.72);
+  --overlay: var(--ds-foundation-overlay-50);
+  --overlay-strong: var(--ds-foundation-overlay-60);
+  --strong-foreground: var(--ds-foundation-white);
+}
+
+.dark {
+  --background: var(--ds-foundation-neutral-950);
+  --foreground: var(--ds-foundation-neutral-100);
+  --card: var(--ds-foundation-neutral-850);
+  --card-foreground: var(--ds-foundation-neutral-100);
+  --popover: var(--ds-foundation-neutral-850);
+  --popover-foreground: var(--ds-foundation-neutral-100);
+  --primary: var(--ds-foundation-cyan-500);
+  --primary-foreground: var(--ds-foundation-white);
+  --secondary: var(--ds-foundation-neutral-800);
+  --secondary-foreground: var(--ds-foundation-neutral-100);
+  --muted: var(--ds-foundation-neutral-850);
+  --muted-foreground: var(--ds-foundation-neutral-500);
+  --accent: var(--ds-foundation-ink-700);
+  --accent-foreground: var(--ds-foundation-neutral-100);
+  --destructive: var(--ds-foundation-red-500);
+  --destructive-foreground: var(--ds-foundation-white);
+  --border: var(--ds-foundation-neutral-700);
+  --input: var(--ds-foundation-neutral-800);
+  --ring: var(--ds-foundation-cyan-500);
+  --chart-1: var(--ds-foundation-cyan-500);
+  --chart-2: var(--ds-foundation-green-500);
+  --chart-3: var(--ds-foundation-blue-500);
+  --chart-4: var(--ds-foundation-yellow-500);
+  --chart-5: var(--ds-foundation-red-500);
+  --sidebar: var(--ds-foundation-neutral-900);
+  --sidebar-foreground: var(--ds-foundation-neutral-100);
+  --sidebar-primary: var(--ds-foundation-cyan-500);
+  --sidebar-primary-foreground: var(--ds-foundation-white);
+  --sidebar-accent: var(--ds-foundation-neutral-800);
+  --sidebar-accent-foreground: var(--ds-foundation-neutral-100);
+  --sidebar-border: var(--ds-foundation-neutral-700);
+  --sidebar-ring: var(--ds-foundation-cyan-500);
+  --surface: var(--ds-foundation-neutral-850);
+  --surface-raised: var(--ds-foundation-neutral-800);
+  --text-link: var(--ds-foundation-cyan-300);
+  --success: var(--ds-foundation-green-500);
+  --warning: var(--ds-foundation-yellow-500);
+  --danger: var(--ds-foundation-red-500);
+  --info: var(--ds-foundation-blue-500);
+  --ai-bubble: var(--ds-foundation-neutral-850);
+  --user-bubble: var(--ds-foundation-cyan-600);
+  --tenant-rail: var(--ds-foundation-neutral-950);
+  --tenant-rail-foreground: var(--ds-foundation-white);
+  --tenant-rail-muted: rgb(255 255 255 / 0.72);
+  --tenant-rail-border: rgb(255 255 255 / 0.08);
+  --tenant-rail-surface: rgb(255 255 255 / 0.06);
+  --overlay: var(--ds-foundation-overlay-50);
+  --overlay-strong: var(--ds-foundation-overlay-60);
+  --strong-foreground: var(--ds-foundation-white);
+}

package/assets/templates/next-tenant-app/src/design-system/tokens/theme.css

@@ -0,0 +1,59 @@
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-sans: "Geist", "Geist Fallback";
+  --font-mono: "Geist Mono", "Geist Mono Fallback";
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-surface: var(--surface);
+  --color-surface-raised: var(--surface-raised);
+  --color-text-link: var(--text-link);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-danger: var(--danger);
+  --color-info: var(--info);
+  --color-ai-bubble: var(--ai-bubble);
+  --color-user-bubble: var(--user-bubble);
+  --color-tenant-rail: var(--tenant-rail);
+  --color-tenant-rail-foreground: var(--tenant-rail-foreground);
+  --color-tenant-rail-muted: var(--tenant-rail-muted);
+  --color-tenant-rail-border: var(--tenant-rail-border);
+  --color-tenant-rail-surface: var(--tenant-rail-surface);
+  --color-overlay: var(--overlay);
+  --color-overlay-strong: var(--overlay-strong);
+  --color-strong-foreground: var(--strong-foreground);
+}

package/assets/templates/next-tenant-app/src/design-system/tokens/tokens.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import tokenManifest from "@/design-system/tokens/manifest";
+
+function TokenGrid({
+  entries,
+}: {
+  entries: Array<[string, string]>;
+}) {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {entries.map(([name, value]) => (
+        <div
+          key={name}
+          className="flex items-center gap-3 rounded-lg border border-border bg-surface p-3"
+        >
+          <div
+            className="h-10 w-10 rounded-md border border-border"
+            style={{ backgroundColor: `var(--${name})` }}
+          />
+          <div className="min-w-0">
+            <p className="truncate text-sm font-medium text-foreground">{name}</p>
+            <p className="truncate text-xs text-muted-foreground">{value}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function TokenShowcase() {
+  return (
+    <div className="w-[720px] space-y-8">
+      <section className="space-y-3">
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+            Semantic
+          </p>
+          <h2 className="text-xl font-semibold text-foreground">Shared UI roles</h2>
+        </div>
+        <TokenGrid entries={Object.entries(tokenManifest.semantic)} />
+      </section>
+      <section className="space-y-3">
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+            Foundation
+          </p>
+          <h2 className="text-xl font-semibold text-foreground">Literal sources</h2>
+        </div>
+        <TokenGrid entries={Object.entries(tokenManifest.foundation)} />
+      </section>
+    </div>
+  );
+}
+
+const meta = {
+  title: "Design System/Tokens",
+  component: TokenShowcase,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof TokenShowcase>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Overview: Story = {
+  render: () => <TokenShowcase />,
+};

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

@@ -0,0 +1,198 @@
+"use client";
+
+import { startTransition, useEffect, useState } from "react";
+import type { FormEvent } from "react";
+
+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 { appRoutes } from "@/lib/app-routes";
+
+export function LoginScreen({
+  appName,
+  operatorConsoleHref,
+}: {
+  appName: string;
+  operatorConsoleHref: string;
+}) {
+  const router = useRouter();
+  const [username, setUsername] = useState("demo-user");
+  const [password, setPassword] = useState("demo-password");
+  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("");
+
+    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.");
+        setSubmitting(false);
+        return;
+      }
+
+      startTransition(() => {
+        router.replace(appRoutes.appHome);
+        router.refresh();
+      });
+    } catch {
+      setError("Unable to reach the platform right now.");
+      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="space-y-3">
+            <p className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
+              Combined Web Starter
+            </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.
+            </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`.
+            </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">
+          <div className="hidden justify-end lg:flex">
+            <ThemeModeToggle className="max-w-xs" />
+          </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>
+
+            <form className="space-y-5" onSubmit={handleSubmit}>
+              <div className="space-y-2">
+                <label
+                  className="text-xs font-semibold uppercase tracking-widest text-muted-foreground"
+                  htmlFor="username"
+                >
+                  Username
+                </label>
+                <Input
+                  id="username"
+                  name="username"
+                  autoComplete="username"
+                  className="h-12 text-base"
+                  value={username}
+                  onChange={(event) => {
+                    setUsername(event.target.value);
+                    setError("");
+                  }}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <label
+                  className="text-xs font-semibold uppercase tracking-widest text-muted-foreground"
+                  htmlFor="password"
+                >
+                  Password
+                </label>
+                <Input
+                  id="password"
+                  name="password"
+                  type="password"
+                  autoComplete="current-password"
+                  className="h-12 text-base"
+                  value={password}
+                  onChange={(event) => {
+                    setPassword(event.target.value);
+                    setError("");
+                  }}
+                />
+              </div>
+
+              {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"}
+                <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>
+    </main>
+  );
+}

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

@@ -0,0 +1,153 @@
+"use client";
+
+import Link from "next/link";
+import { Blocks, Building2, FolderKanban, ShieldCheck } from "lucide-react";
+
+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,
+  value,
+}: {
+  label: string;
+  value: string;
+}) {
+  return (
+    <PanelFrame tone="raised" radius="xl" padding="md" className="space-y-2">
+      <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+        {label}
+      </p>
+      <p className="text-sm font-semibold text-foreground">{value}</p>
+    </PanelFrame>
+  );
+}
+
+export function TenantDashboard({
+  appName,
+  runtimeCommandExampleEnabled,
+  session,
+}: {
+  appName: string;
+  runtimeCommandExampleEnabled: boolean;
+  session: AuthenticatedPlatformSession;
+}) {
+  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`.
+          </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`.
+          </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}
+          />
+          <DashboardMetric
+            label="Membership count"
+            value={`${session.memberships.length}`}
+          />
+        </div>
+      </PanelFrame>
+
+      <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">
+            <ShieldCheck className="size-5 text-primary" />
+            <h3 className="text-xl font-semibold tracking-tight">
+              Auth profile
+            </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>
+          </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.
+          </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" />
+            <h3 className="text-xl font-semibold tracking-tight">
+              Builder materialization
+            </h3>
+          </div>
+          <p className="text-sm leading-7 text-muted-foreground">
+            The canonical template bundle is meant to be copied into
+            `BuilderWorkspace.sandbox_root/app/` before an agent edits it. The
+            copied workspace becomes the writable app root; this source bundle stays
+            governed and read-only in normal authoring flows.
+          </p>
+        </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>
+      </section>
+    </div>
+  );
+}