minutework 0.1.34 → 0.1.36

package/EXTERNAL_ALPHA.md

@@ -120,14 +120,16 @@ If you run `minutework init` **without** `--starter` in an interactive terminal,
 The generated `tenant-app/.env.example` defaults to:
 
 ```dotenv
-MW_CONTENT_API_TOKEN=
-MW_PUBLIC_SITE_PROPERTY_KEY=main-site
-MW_PUBLIC_SITE_ENV=preview
+NEXT_PUBLIC_MW_APP_ID=tenant.app
+MW_TEMPLATE_APP_NAME=Tenant App
+MW_PUBLIC_BASE_URL=
 ```
 
-`MW_CONTENT_API_TOKEN` stays server-only. `MW_PUBLIC_SITE_ENV=preview` targets
-preview or draft-safe reads, while `MW_PUBLIC_SITE_ENV=live` is publication-safe
-and intended for published snapshot delivery.
+`tenant-app` browser auth and manifest calls use same-origin `/_mw` routes
+through `@minutework/web-auth`. Do not add platform content tokens or
+public-site property variables to the SDK-based tenant app; public content
+should come from hosted published releases/snapshots or gateway-approved
+public-content routes over the MinuteWork substrate.
 
 If the workspace cannot compile hosted preview release metadata for the linked property, deploy fails closed.
 

package/README.md

@@ -122,7 +122,7 @@ Combined **tenant-app + sidecar** workspaces keep sidecar setup explicit. Root `
 
 For direct third-party web hosts such as Vercel, deploy `tenant-app` only. In Vercel, point the project Root Directory at `tenant-app`; the optional sidecar remains a separate Poetry-managed surface.
 
-`link` provisions or resolves the default published-site property for the active tenant and stores that property key in repo-local state. The generated `tenant-app/.env.example` includes the standard site env contract: `MW_CONTENT_API_TOKEN`, `MW_PUBLIC_SITE_PROPERTY_KEY`, and `MW_PUBLIC_SITE_ENV`. It defaults to `MW_PUBLIC_SITE_PROPERTY_KEY=main-site` and `MW_PUBLIC_SITE_ENV=preview`.
+`link` provisions or resolves the default published-site property for the active tenant and stores that property key in repo-local state. The SDK-based `tenant-app/.env.example` contains only the app metadata contract used by the template: `NEXT_PUBLIC_MW_APP_ID`, `MW_TEMPLATE_APP_NAME`, and optional `MW_PUBLIC_BASE_URL`. Browser auth and manifest calls use same-origin `/_mw` routes through `@minutework/web-auth`; do not add platform content tokens or public-site property vars to the tenant app.
 
 `deploy --preview` always revalidates and recompiles before submit, prints a local-vs-remote diff, requires confirmation unless `--yes` is passed, polls typed receipts until a terminal state, and persists the last known preview deploy state under `.minutework/deploy/preview/status.json`. This alpha is preview-first; live public delivery remains follow-on.
 

package/assets/claude-local/CLAUDE.md.template

@@ -6,10 +6,13 @@ smallest surface that fits the request.
 
 `tenant-app` is the combined web starter: public site routes at the root plus a
 private authenticated workspace under `/app`.
+It uses `@minutework/web-auth` through a thin `src/mw/` substrate and
+same-origin `/_mw` routes; do not add per-app auth/gateway BFF routes or
+browser-stored tokens.
 
 `mobile` is the standalone Expo/React Native client starter. It talks directly
 to the platform with native device-flow auth and bearer tokens; it is not a
-`tenant-app` BFF cookie client and not a `sidecar`. It ships through the
+`tenant-app` web SDK cookie client and not a `sidecar`. It ships through the
 developer's own EAS/App Store/Play Store pipeline, not `minutework deploy`.
 
 ## Refresh Managed Guidance
@@ -189,13 +192,14 @@ a concrete backend responsibility such as:
 - `mw.core.site` already includes `config`, `page`, `nav`, `form`, and
   `submission` schemas before Builder starts authoring.
 - Author public content against runtime/CMS records and published-web flows, not
-  against a fixed in-repo marketing template.
-- Use `MW_PUBLIC_CONTENT_SOURCE` to select the public content adapter mode.
-- `MW_CONTENT_API_TOKEN`, `MW_PUBLIC_SITE_PROPERTY_KEY`, and
-  `MW_PUBLIC_SITE_ENV` are required only for `MW_PUBLIC_CONTENT_SOURCE=minutework_cms`.
-- `MW_STATIC_PUBLIC_CONTENT_PATH` is used for `MW_PUBLIC_CONTENT_SOURCE=static_json`.
-- `MW_PUBLIC_SITE_ENV=preview` is for preview or draft-safe reads.
-- `MW_PUBLIC_SITE_ENV=live` is for publication-safe delivery.
+  against a fixed in-repo marketing template or a server-only content-token
+  adapter in `tenant-app`.
+- The SDK-based `tenant-app` public metadata env contract is
+  `NEXT_PUBLIC_MW_APP_ID`, `MW_TEMPLATE_APP_NAME`, and optional
+  `MW_PUBLIC_BASE_URL`; do not add legacy `MW_CONTENT_API_TOKEN`,
+  `MW_PUBLIC_CONTENT_SOURCE`, `MW_PUBLIC_SITE_PROPERTY_KEY`,
+  `MW_PUBLIC_SITE_ENV`, or `MW_STATIC_PUBLIC_CONTENT_PATH` variables unless a
+  compatibility task explicitly targets that old adapter.
 - Anonymous live delivery should prefer published snapshots instead of direct
   runtime reads on every request.
 - `runtime_local_sidecar` is an opt-in public-site serving exception, not the

package/assets/templates/mobile-app/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@expo/metro-runtime": "~56.0.13",
+    "@minutework/native-auth": "^0.1.0",
     "expo": "~56.0.8",
     "expo-asset": "~56.0.15",
     "expo-constants": "~56.0.16",

package/assets/templates/mobile-app/src/mw/client.ts

@@ -1,251 +1,48 @@
-// MinuteWork substrate. Thin layer — do not put product UI/logic here.
-//
-// MinuteWork native token client. Implements the browser-assisted device flow
-// against the SHIPPED platform native-token endpoints (`/api/v1/native/session/*`).
-//
-// Authentication is owned by the MinuteWork platform. This client only *obtains
-// and uses* a platform-issued bearer token — there is NO JWT minting, NO password
-// handling, NO local user table, and NO parallel auth stack here. Token plaintext
-// is never logged.
-//
-// ----------------------------------------------------------------------------
-// Device flow (browser-assisted authorization):
-// ----------------------------------------------------------------------------
-//   1. authorize(): generate a PKCE code_verifier + S256 code_challenge, open the
-//      platform authorize URL in a system browser (`expo-web-browser`) with the
-//      app's deep-link redirect_uri + code_challenge + an anti-forgery `state`.
-//      The platform authenticates the human and redirects back to redirect_uri
-//      with a short-lived single-use `code` (and the echoed `state`).
-//   2. exchange(code, verifier): POST {code, code_verifier, redirect_uri} to
-//      `/token-exchange/`; the platform returns the access/refresh token pair.
-//   3. store the pair in the device keychain via `mwSession.setTokens(...)`.
-//   4. for every platform call, send `Authorization: Bearer <access>`. On a 401,
-//      POST the stored refresh token to `/refresh/`, persist the rotated pair,
-//      and retry once.
-//   5. logout(): POST `/logout/` to revoke, then `mwSession.clearTokens()`.
-//
-// This is the DIRECT platform path — there is no tenant-app BFF and no
-// server-owned cookie in front of the mobile client.
-
 import * as Crypto from "expo-crypto";
 import * as Linking from "expo-linking";
 import * as WebBrowser from "expo-web-browser";
-
 import {
-  nativeSessionSchema,
-  nativeTokenPairSchema,
-  type NativeSession,
-  type NativeTokenPair,
-} from "@/mw/contracts";
-import { platformNativeEndpoints } from "@/mw/endpoints";
+  createNativeAuthClient,
+  type NativeBrowser,
+  type NativeCrypto,
+} from "@minutework/native-auth";
+
+import { mwEnv } from "@/mw/env";
 import { mwSession } from "@/mw/session";
 
 // The deep-link path the platform redirects back to. The scheme is read from
 // `app.json` ("scheme") by expo-linking; the dev configures that scheme.
 const REDIRECT_PATH = "auth/native-callback";
 
-// Result of a single authorize round-trip: the one-time code plus the PKCE
-// verifier that must be presented at exchange.
-export interface NativeAuthorizationResult {
-  code: string;
-  codeVerifier: string;
-  redirectUri: string;
-}
-
-function base64UrlFromBytes(bytes: Uint8Array): string {
-  let binary = "";
-  for (const byte of bytes) {
-    binary += String.fromCharCode(byte);
-  }
-  // btoa is available in the Hermes/React Native runtime.
-  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
-}
-
-// PKCE code_verifier: 32 random bytes -> base64url (43 chars, no padding). This
-// is URL-safe and whitespace-free, matching the platform's `.strip()`ed verifier
-// and its 255-char cap.
-function generateCodeVerifier(): string {
-  return base64UrlFromBytes(Crypto.getRandomBytes(32));
-}
-
-// S256 challenge: base64url(SHA-256(verifier)). Mirrors the platform's
-// `build_pkce_code_challenge` (sha256 digest -> urlsafe base64 -> strip "=").
-async function deriveCodeChallenge(codeVerifier: string): Promise<string> {
-  const digestBase64 = await Crypto.digestStringAsync(
-    Crypto.CryptoDigestAlgorithm.SHA256,
-    codeVerifier,
-    { encoding: Crypto.CryptoEncoding.BASE64 },
-  );
-  return digestBase64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
-}
-
-function buildAuthorizeUrl(params: {
-  redirectUri: string;
-  state: string;
-  codeChallenge: string;
-}): string {
-  const url = new URL(platformNativeEndpoints.authorize);
-  url.searchParams.set("redirect_uri", params.redirectUri);
-  url.searchParams.set("state", params.state);
-  url.searchParams.set("code_challenge", params.codeChallenge);
-  return url.toString();
-}
-
-async function postJson(url: string, body: Record<string, unknown>): Promise<Response> {
-  return fetch(url, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Accept: "application/json",
-    },
-    body: JSON.stringify(body),
-  });
-}
-
-// Surface a platform error without leaking response internals. The platform
-// returns `{detail: "..."}` for native auth failures.
-async function readErrorDetail(response: Response, fallback: string): Promise<string> {
-  try {
-    const data = (await response.json()) as { detail?: unknown };
-    if (data && typeof data.detail === "string" && data.detail.length > 0) {
-      return data.detail;
-    }
-  } catch {
-    // ignore non-JSON bodies
-  }
-  return `${fallback} (HTTP ${response.status})`;
-}
-
-export const mwClient = {
-  // Step 1: open the platform authorize URL in a system browser and resolve with
-  // the single-use authorization code + the PKCE verifier to exchange it.
-  async authorize(): Promise<NativeAuthorizationResult> {
-    const redirectUri = Linking.createURL(REDIRECT_PATH);
-    const codeVerifier = generateCodeVerifier();
-    const codeChallenge = await deriveCodeChallenge(codeVerifier);
-    const state = base64UrlFromBytes(Crypto.getRandomBytes(16));
-
-    const authorizeUrl = buildAuthorizeUrl({ redirectUri, state, codeChallenge });
-    const result = await WebBrowser.openAuthSessionAsync(authorizeUrl, redirectUri);
-
-    if (result.type !== "success" || !result.url) {
-      throw new Error("Sign in was cancelled before the platform returned a code.");
-    }
-
-    const returned = new URL(result.url);
-    const returnedState = returned.searchParams.get("state");
-    if (returnedState !== state) {
-      // Anti-forgery: the platform must echo back the exact state we sent.
-      throw new Error("Sign in failed: callback state did not match the request.");
-    }
-    const code = returned.searchParams.get("code");
-    if (!code) {
-      throw new Error("Sign in failed: the platform callback did not include a code.");
-    }
-
-    return { code, codeVerifier, redirectUri };
-  },
-
-  // Step 2: exchange the authorization code for a platform-issued token pair and
-  // persist it to the device keychain.
-  async exchange(
-    code: string,
-    codeVerifier: string,
-    redirectUri: string,
-  ): Promise<NativeTokenPair> {
-    const response = await postJson(platformNativeEndpoints.tokenExchange, {
-      code,
-      code_verifier: codeVerifier,
-      redirect_uri: redirectUri,
-    });
-    if (!response.ok) {
-      throw new Error(await readErrorDetail(response, "Token exchange failed"));
-    }
-    const pair = nativeTokenPairSchema.parse(await response.json());
-    await mwSession.setTokens(
-      pair.access_token,
-      pair.refresh_token,
-      pair.access_token_expires_at,
-    );
-    return pair;
+const nativeCrypto: NativeCrypto = {
+  randomBytes(length: number): Uint8Array {
+    return Crypto.getRandomBytes(length);
   },
-
-  // Step 4 (on 401 / proactive): rotate the access token using the stored refresh
-  // token and persist the rotated pair.
-  async refresh(): Promise<NativeTokenPair> {
-    const stored = await mwSession.getTokens();
-    if (!stored) {
-      throw new Error("No stored session to refresh. Sign in again.");
-    }
-    const response = await postJson(platformNativeEndpoints.refresh, {
-      refresh_token: stored.refresh,
-    });
-    if (!response.ok) {
-      // Refresh failure means the session is dead; clear it so the app routes
-      // back to login.
-      await mwSession.clearTokens();
-      throw new Error(await readErrorDetail(response, "Session refresh failed"));
-    }
-    const pair = nativeTokenPairSchema.parse(await response.json());
-    await mwSession.setTokens(
-      pair.access_token,
-      pair.refresh_token,
-      pair.access_token_expires_at,
+  async sha256Base64Url(input: string): Promise<string> {
+    const digestBase64 = await Crypto.digestStringAsync(
+      Crypto.CryptoDigestAlgorithm.SHA256,
+      input,
+      { encoding: Crypto.CryptoEncoding.BASE64 },
     );
-    return pair;
+    return digestBase64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
   },
+};
 
-  // Resolve the active session (user + active tenant + memberships) from the
-  // stored token, auto-refreshing once on a 401 then retrying.
-  async loadSession(): Promise<NativeSession> {
-    const stored = await mwSession.getTokens();
-    if (!stored) {
-      throw new Error("Not signed in.");
-    }
-
-    const meOnce = async (accessToken: string): Promise<Response> =>
-      fetch(platformNativeEndpoints.me, {
-        method: "GET",
-        headers: {
-          Accept: "application/json",
-          Authorization: `Bearer ${accessToken}`,
-        },
-      });
-
-    let response = await meOnce(stored.access);
-    if (response.status === 401) {
-      // Single refresh-and-retry on an expired/invalid access token.
-      const rotated = await this.refresh();
-      response = await meOnce(rotated.access_token);
-    }
-    if (!response.ok) {
-      throw new Error(await readErrorDetail(response, "Failed to load session"));
-    }
-    return nativeSessionSchema.parse(await response.json());
+const nativeBrowser: NativeBrowser = {
+  createRedirectUri(): string {
+    return Linking.createURL(REDIRECT_PATH);
   },
-
-  // Step 5: revoke the token pair on the platform, then clear local secure
-  // storage. Local state is always cleared, even if the revoke call fails.
-  async logout(): Promise<void> {
-    const stored = await mwSession.getTokens();
-    try {
-      if (stored) {
-        await fetch(platformNativeEndpoints.logout, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            Authorization: `Bearer ${stored.access}`,
-          },
-          body: JSON.stringify({}),
-        });
-      }
-    } catch {
-      // Best-effort revoke; never block local sign-out on a network error.
-    } finally {
-      await mwSession.clearTokens();
-    }
+  async openAuthSession(url: string, redirectUri: string): Promise<string | null> {
+    const result = await WebBrowser.openAuthSessionAsync(url, redirectUri);
+    return result.type === "success" && result.url ? result.url : null;
   },
 };
 
+export const mwClient = createNativeAuthClient({
+  platformBaseUrl: mwEnv.platformBaseUrl,
+  storage: mwSession,
+  crypto: nativeCrypto,
+  browser: nativeBrowser,
+});
+
 export type MwClient = typeof mwClient;

package/assets/templates/mobile-app/src/mw/session.ts

@@ -8,7 +8,11 @@
 
 import * as SecureStore from "expo-secure-store";
 
-import { storedTokensSchema, type StoredTokens } from "@/mw/contracts";
+import {
+  storedTokensSchema,
+  type NativeTokenStorage,
+  type StoredTokens,
+} from "@minutework/native-auth";
 
 const TOKEN_KEY = "mw.native.token_pair";
 
@@ -45,6 +49,6 @@ export const mwSession = {
   async clearTokens(): Promise<void> {
     await SecureStore.deleteItemAsync(TOKEN_KEY, SECURE_STORE_OPTIONS);
   },
-};
+} satisfies NativeTokenStorage;
 
 export type MwSession = typeof mwSession;

package/assets/templates/next-tenant-app/.env.example

@@ -1,9 +1,3 @@
-MW_PLATFORM_BASE_URL=http://127.0.0.1:8000
-MW_PUBLIC_CONTENT_SOURCE=none
-MW_CONTENT_API_TOKEN=
-MW_TEMPLATE_APP_NAME=MinuteWork Combined Starter
+NEXT_PUBLIC_MW_APP_ID=tenant.app
+MW_TEMPLATE_APP_NAME=Tenant App
 MW_PUBLIC_BASE_URL=
-MW_PUBLIC_SITE_PROPERTY_KEY=
-MW_PUBLIC_SITE_ENV=preview
-MW_STATIC_PUBLIC_CONTENT_PATH=content/public-site.json
-MW_ENABLE_RUNTIME_COMMAND_EXAMPLE=false

package/assets/templates/next-tenant-app/README.md

@@ -43,6 +43,10 @@ workaround.
 - authenticated workspace at `/app`
 - SDK manifest demo at `/app/demo`
 
+All `/app/*` routes are wrapped by `src/app/app/layout.tsx`, which renders the
+shared authenticated layout guard. Individual `/app` pages should assume an
+authenticated tenant-customer session instead of reimplementing auth checks.
+
 The template intentionally does not include `src/lib/platform/*`,
 `src/app/api/auth/*`, `src/app/api/gateway/*`, an operator-console link, a
 runtime-command demo, or a server-only public-content token adapter.

package/assets/templates/next-tenant-app/src/app/app/demo/page.tsx

@@ -5,11 +5,5 @@ export const metadata = {
 };
 
 export default function DemoPage() {
-  return (
-    <main className="min-h-screen bg-background text-foreground">
-      <div className="mx-auto flex min-h-screen max-w-5xl flex-col gap-6 px-6 py-8">
-        <ManifestDemo />
-      </div>
-    </main>
-  );
+  return <ManifestDemo />;
 }

package/assets/templates/next-tenant-app/src/app/app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
 
+import { AuthenticatedAppLayoutShell } from "@/features/shell/components/authenticated-app-layout-shell";
+
 export const metadata: Metadata = {
   robots: {
     index: false,
@@ -13,5 +15,11 @@ export default function AuthenticatedAppLayout({
 }: {
   children: ReactNode;
 }) {
-  return children;
+  return (
+    <AuthenticatedAppLayoutShell
+      appName={process.env.MW_TEMPLATE_APP_NAME || "Tenant App"}
+    >
+      {children}
+    </AuthenticatedAppLayoutShell>
+  );
 }

package/assets/templates/next-tenant-app/src/features/shell/components/authenticated-app-layout-shell.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { startTransition } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { LayoutDashboard, LogOut, PlaySquare } from "lucide-react";
+import type {
+  TenantCustomerMembership,
+  TenantCustomerSession,
+} from "@minutework/web-auth";
+import {
+  useMinuteWorkAuth,
+  useMinuteWorkSession,
+} from "@minutework/web-auth/react";
+
+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 { appRoutes } from "@/lib/app-routes";
+
+type AuthenticatedTenantCustomerSession = TenantCustomerSession & {
+  customer_membership: TenantCustomerMembership;
+};
+
+export function useAuthenticatedTenantCustomerSession(): AuthenticatedTenantCustomerSession {
+  const { session } = useMinuteWorkSession();
+
+  if (!session?.customer_membership) {
+    throw new Error(
+      "useAuthenticatedTenantCustomerSession must be rendered below AuthenticatedAppLayoutShell.",
+    );
+  }
+
+  return session as AuthenticatedTenantCustomerSession;
+}
+
+export function AuthenticatedAppLayoutShell({
+  appName,
+  children,
+}: {
+  appName: string;
+  children: ReactNode;
+}) {
+  const router = useRouter();
+  const { logout } = useMinuteWorkAuth();
+  const { session, loading, authenticated, emailVerificationRequired } =
+    useMinuteWorkSession();
+
+  function redirectToLogin() {
+    startTransition(() => {
+      router.replace(appRoutes.login);
+      router.refresh();
+    });
+  }
+
+  async function handleLogout() {
+    await logout().catch(() => undefined);
+    redirectToLogin();
+  }
+
+  if (loading) {
+    return (
+      <main className="min-h-screen bg-background text-foreground">
+        <div className="mx-auto flex min-h-screen max-w-5xl items-center px-6 py-10">
+          <PanelFrame tone="floating" radius="xl" padding="lg" className="w-full">
+            <p className="text-sm text-muted-foreground">Loading session</p>
+          </PanelFrame>
+        </div>
+      </main>
+    );
+  }
+
+  if (
+    emailVerificationRequired ||
+    session?.email_verification_required ||
+    session?.customer_membership?.status === "pending_verification"
+  ) {
+    return (
+      <main className="min-h-screen bg-background text-foreground">
+        <div className="mx-auto flex min-h-screen max-w-5xl items-center px-6 py-10">
+          <PanelFrame
+            tone="floating"
+            radius="xl"
+            padding="lg"
+            className="w-full space-y-4"
+          >
+            <div className="space-y-2">
+              <h1 className="text-3xl font-semibold tracking-tight">
+                Email verification required
+              </h1>
+              <p className="text-sm leading-7 text-muted-foreground">
+                Finish verification from your email before opening the workspace.
+              </p>
+            </div>
+            <Button onClick={redirectToLogin} className="w-fit">
+              Open login
+            </Button>
+          </PanelFrame>
+        </div>
+      </main>
+    );
+  }
+
+  if (!authenticated || !session?.customer_membership) {
+    return (
+      <main className="min-h-screen bg-background text-foreground">
+        <div className="mx-auto flex min-h-screen max-w-5xl items-center px-6 py-10">
+          <PanelFrame
+            tone="floating"
+            radius="xl"
+            padding="lg"
+            className="w-full space-y-4"
+          >
+            <div className="space-y-2">
+              <h1 className="text-3xl font-semibold tracking-tight">
+                Log in to continue
+              </h1>
+              <p className="text-sm leading-7 text-muted-foreground">
+                This area is available to verified customers.
+              </p>
+            </div>
+            <Button onClick={redirectToLogin} className="w-fit">
+              Open login
+            </Button>
+          </PanelFrame>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen bg-background text-foreground">
+      <div className="mx-auto flex min-h-screen max-w-7xl flex-col gap-6 px-6 py-8">
+        <header className="flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
+          <div className="space-y-2">
+            <p className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
+              {session.tenant.name}
+            </p>
+            <h1 className="max-w-3xl text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
+              {appName}
+            </h1>
+            <p className="max-w-3xl text-base leading-7 text-muted-foreground sm:text-lg">
+              Signed in as {session.user?.email || session.user?.username}.
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-start">
+            <ThemeModeToggle className="w-full sm:w-72" />
+            <Button
+              type="button"
+              variant="outline"
+              className="gap-2"
+              onClick={handleLogout}
+            >
+              <LogOut className="size-4" />
+              Log out
+            </Button>
+          </div>
+        </header>
+
+        <nav className="flex flex-wrap gap-2">
+          <Button asChild variant="default">
+            <Link href={appRoutes.appHome}>
+              <LayoutDashboard className="size-4" />
+              Dashboard
+            </Link>
+          </Button>
+          <Button asChild variant="outline">
+            <Link href={appRoutes.demo}>
+              <PlaySquare className="size-4" />
+              Demo
+            </Link>
+          </Button>
+        </nav>
+
+        {children}
+      </div>
+    </main>
+  );
+}