@pylonsync/create-pylon 0.3.266 → 0.3.268

package/bin/create-pylon.js

@@ -82,24 +82,34 @@ const TEMPLATE_REGISTRY = {
 		unified: true,
 	},
 	barebones: {
-		blurb: "Single entity, list + create. The smallest working app.",
-		platforms: ["web", "ios", "mac", "expo"],
+		blurb:
+			"Single entity, live list + optimistic create. The smallest SSR app, one port.",
+		platforms: [],
+		unified: true,
 	},
 	todo: {
-		blurb: "CRUD + drag-reorder + optimistic mutations.",
-		platforms: ["web", "vite", "ios", "mac", "expo"],
+		blurb:
+			"Live, optimistic todo list — guest auth, owner-scoped, one server, no Next.js.",
+		platforms: [],
+		unified: true,
 	},
 	b2b: {
-		blurb: "Multi-tenant SaaS: orgs, members, roles, RBAC policies.",
-		platforms: ["web", "mac"],
+		blurb:
+			"Multi-tenant SaaS — orgs, members, roles, tenant-scoped data. One SSR app.",
+		platforms: [],
+		unified: true,
 	},
 	consumer: {
-		blurb: "Social feed: profiles, posts, likes, follows.",
-		platforms: ["web", "ios", "mac", "expo"],
+		blurb:
+			"Social feed — live posts + likes, public-read, owner-write. One SSR app.",
+		platforms: [],
+		unified: true,
 	},
 	chat: {
-		blurb: "Realtime messaging: rooms, presence, live message feed.",
-		platforms: ["web", "ios", "mac", "expo"],
+		blurb:
+			"Realtime chat — a live shared room, optimistic send. One SSR app, one port.",
+		platforms: [],
+		unified: true,
 	},
 };
 const TEMPLATES_AVAILABLE = Object.keys(TEMPLATE_REGISTRY);
@@ -116,6 +126,15 @@ const flags = {
 	template: takeValue(args, "--template"),
 	platforms: takeValue(args, "--platforms"),
 	skipInstall: args.includes("--skip-install"),
+	// --skill / --no-skill: install the Pylon skill into the new project via
+	// `npx skills add pylonsync/pylon` — the skills.sh CLI detects the coding
+	// agent (Claude Code / Codex / Cursor) and drops the always-current skill
+	// from this repo's skills/pylon/SKILL.md. undefined => prompt (default yes).
+	skill: args.includes("--skill")
+		? true
+		: args.includes("--no-skill")
+			? false
+			: undefined,
 	help: args.includes("--help") || args.includes("-h"),
 };
 
@@ -154,10 +173,10 @@ ${tmplLines.join("\n")}
 
 Examples:
   npm create @pylonsync/pylon my-app --template ssr         # full-stack SSR, no Next.js
+  npm create @pylonsync/pylon my-app --template todo        # live, optimistic todo (SSR, one port)
   npm create @pylonsync/pylon my-app
-  npm create @pylonsync/pylon my-app --template todo --platforms web,ios
-  npm create @pylonsync/pylon my-app --template b2b --platforms web,mac
-  npm create @pylonsync/pylon my-app --template chat --platforms ios,mac,expo
+  npm create @pylonsync/pylon my-app --template b2b          # multi-tenant SaaS (orgs, members, RBAC)
+  npm create @pylonsync/pylon my-app --template chat         # realtime live chat room
 `);
 	exit(0);
 }
@@ -202,6 +221,16 @@ if (!flags.pm) {
 		.toLowerCase();
 	flags.pm = ["bun", "pnpm", "yarn", "npm"].includes(choice) ? choice : def;
 }
+if (flags.skill === undefined) {
+	const ans = (
+		await rl.question(
+			"Add the Pylon skill to your coding agent (Claude Code / Codex / Cursor)? [Y/n]: ",
+		)
+	)
+		.trim()
+		.toLowerCase();
+	flags.skill = ans !== "n" && ans !== "no";
+}
 rl.close();
 
 // Unified templates own no platforms — they ARE the whole app. For
@@ -467,6 +496,34 @@ if (!flags.skipInstall) {
 	}
 }
 
+// ---------------------------------------------------------------------------
+// Optional: install the Pylon skill into the project's coding agent.
+//
+// `npx skills add pylonsync/pylon` (skills.sh) detects the installed agent
+// (Claude Code / Codex / Cursor) and drops the canonical skill from this
+// repo's skills/pylon/SKILL.md — always current, no stale bundled copy. We
+// only auto-run it when stdin is a TTY: the skills CLI prompts for scope and
+// agent, which would hang a non-interactive scaffold (CI, piped input). When
+// we can't run it, the footer prints the one-liner so the user can opt in.
+// ---------------------------------------------------------------------------
+
+const SKILL_INSTALL_CMD = "npx skills add pylonsync/pylon";
+let skillInstalled = false;
+if (flags.skill && stdin.isTTY) {
+	console.log("\nAdding the Pylon skill to your coding agent...");
+	const { spawnSync } = await import("node:child_process");
+	const result = spawnSync("npx", ["-y", "skills", "add", "pylonsync/pylon"], {
+		cwd: root,
+		stdio: "inherit",
+	});
+	skillInstalled = result.status === 0;
+	if (!skillInstalled) {
+		console.warn(
+			`\nCouldn't add the skill automatically. Run it yourself anytime:\n  ${SKILL_INSTALL_CMD}\n`,
+		);
+	}
+}
+
 // ---------------------------------------------------------------------------
 // Final instructions
 // ---------------------------------------------------------------------------
@@ -512,6 +569,12 @@ if (platforms.includes("mac"))
 if (platforms.includes("expo"))
 	layoutLines.push("  apps/expo         Expo + React Native");
 
+const skillLine = skillInstalled
+	? "\nPylon skill added to your coding agent (Claude Code / Codex / Cursor).\n"
+	: flags.skill
+		? `\nAdd the Pylon skill to your coding agent:\n  ${SKILL_INSTALL_CMD}\n`
+		: "";
+
 console.log(`
 ✓ Created ${projectName}
 
@@ -522,7 +585,7 @@ ${platformLines.join("\n")}
 
 Layout:
 ${layoutLines.join("\n")}
-
+${skillLine}
 Docs: https://docs.pylonsync.com
 `);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pylonsync/create-pylon",
-  "version": "0.3.266",
+  "version": "0.3.268",
   "description": "Scaffold a new Pylon app — realtime backend + web/mobile/expo frontends in one command. Run via `npm create @pylonsync/pylon@latest`.",
   "publishConfig": {
     "access": "public"

package/templates/b2b/AGENTS.md

@@ -0,0 +1,61 @@
+# AGENTS.md — working in a Pylon project
+
+Operating rules for a coding agent in this Pylon app. Pylon is a Rails-like framework for realtime apps: you declare entities, policies, and server functions in TypeScript, and a single Rust binary (`pylon`) serves the API, auth, sync, WebSocket, SSE, and native React 19 SSR — one process, one port. The full API reference is at **/llms-full.txt** (served at `/llms-full.txt`; in the repo at `apps/web/public/llms-full.txt`). Read it before guessing an API name.
+
+## Directory conventions
+
+**Unified SSR app:**
+- `app.ts` — data model + manifest (`entity()` + `field.*`, queries/actions/policies, `routes: await discoverAppRoutes()`). Ends with `console.log(JSON.stringify(manifest))`.
+- `app/` — file-based SSR routes. `app/page.tsx` → `/`, `app/about/page.tsx` → `/about`, `app/blog/[slug]/page.tsx` → `/blog/:slug`. `app/layout.tsx` is the shell; `app/error.tsx` / `app/not-found.tsx` are boundaries.
+- `app/globals.css` — Tailwind v4 entrypoint (auto-compiled and injected).
+- `functions/` — server functions, one per file, `default`-exported.
+- `.pylon/` — local dev state (sqlite, jobs, sessions, uploads). Created by `pylon dev`. Do not commit.
+
+**Monorepo app:** backend is `apps/api/` (entry `apps/api/schema.ts`, handlers in `apps/api/functions/`); frontend in `apps/web/`. `pylon.manifest.json` / `pylon.client.ts` are generated — do not hand-edit.
+
+## The core authoring loop
+
+1. **Define an entity** — `entity("Thing", { name: field.string(), done: field.boolean().default(false) })`. Modifiers: `.optional()`, `.unique()`, `.readonly()` (settable on insert, rejected on client update — use for `authorId`/`orgId`), `.serverOnly()` (never in HTTP responses), `.encrypted()` (AEAD at rest, needs `PYLON_ENCRYPTION_KEY`), `.crdt("text")` (collaborative).
+2. **Write a policy** — `policy({ entity: "Thing", allowRead, allowInsert, allowUpdate, allowDelete })` with CEL-like expressions over `auth.*` / `data.*` (e.g. `"auth.userId == data.authorId"`). **Omitted actions DENY by default.** Wide-open dev policies (`allow*: "true"`) are flagged by `pylon lint` — tighten before shipping.
+3. **Author a function** in `functions/<name>.ts` — `query` (read-only), `mutation` (transactional read+write), or `action` (external I/O, no direct `ctx.db`). Import `{ query, mutation, action, v }` from `@pylonsync/functions`. `auth` defaults to `"user"` (secure-by-default); set `"public"` explicitly for unauthenticated access. Use `ctx.db.*`, `ctx.auth.userId`, `ctx.error(code, msg)`.
+4. **Read it on the client** — `db.useQuery("Thing")` (live, re-renders on any write) or `db.useQueryOne("Thing", id)`. Call functions with `db.fn(name, args)` / `callFn`. On SSR pages, read via `use(serverData.list("Thing"))` inside `<Suspense>`.
+
+## Key gotchas
+
+- **Policies deny by default; server functions BYPASS them.** Direct client CRUD (`/api/entities/*`) and sync are policy-checked. Functions run with full DB access — enforce trust with `ctx.auth` checks inside the handler, not policies.
+- **Type page props from the SDK, don't hand-roll them.** `import type { PageProps, Metadata } from "@pylonsync/react"`. Every page/layout gets `{ url, params, searchParams, auth, response, serverData }`; `PageProps<{ slug: string }>` types a `[slug]` route's params. Request headers/cookies are intentionally NOT on `PageProps` — they're server-only and stripped from hydration, so reading them in the render would mismatch.
+- **Anonymous output caching is opt-in + earned.** `export const revalidate = 60` (seconds) on a page makes it CDN-cacheable (`public, s-maxage=60`) — but ONLY if the render is auth-INDEPENDENT: it must NOT read `props.auth` (reading it at all opts out, even for anonymous), set no cookie, and the app must not run strict per-caller policies (`PYLON_STRICT_FN_POLICIES`). `export const dynamic = "force-static"` caches until the next deploy; `"force-dynamic"` never caches. Fail-closed: without the opt-in (or if any condition fails) the page is `no-cache`. A page that reads `auth` or sets a cookie is never shared. The SAME earned render is also kept in an **origin disk cache** (`.pylon/.cache/ssr`): a cookie-less GET with no query string is served straight off disk for the TTL — skipping the render entirely — then re-rendered live when stale. The disk cache is namespaced per deploy (wiped on each new build) and OFF in `pylon dev` (so an edit is never masked by a stale entry); invalidation is by the `revalidate` TTL or the next deploy.
+- **No-JS forms use `route.ts` + `<Form>`.** Drop `app/.../route.ts` exporting `export const POST: RouteHandler = async ({ form, db, response, auth }) => { await db.insert("X", {...}); response.redirect("/x?ok=1"); }` (303 POST-redirect-GET by default). Render `<Form action="/x">` (from @pylonsync/react) with plain `<input name=...>` — works with JS off (native POST→handler→redirect) and is enhanced to no-reload when JS is on. The handler's `db` is read+write (mutation trust model — gate on `auth`); CSRF is automatic (Origin gate + SameSite=Lax). Multipart/file uploads aren't supported yet — use urlencoded forms + `/api/files`.
+- **`loading.tsx` streams a skeleton while the page's data resolves.** Drop `app/.../loading.tsx` (default export, page props) and the nearest one becomes a route-level Suspense fallback: Pylon flushes the shell + skeleton immediately, then reveals the real page when its top-level `use(serverData…)` resolves (no blank page). It only shows when the PAGE suspends — a page that wraps its own `<Suspense>` around a child (like `/dashboard` in this template) handles that itself. The skeleton is SERVER-ONLY: don't read `serverData` in it. A page with no `loading.tsx` is buffered (unchanged).
+- **`export const streaming = true` streams a page's OWN inner `<Suspense>` boundaries.** Without it (and without a `loading.tsx`), a page is BUFFERED — the whole document, including suspended children, resolves before the first byte. Opt in and the shell + each inner `<Suspense>` fallback flush immediately, then each boundary's real content streams in as its data resolves (multi-boundary progressive streaming). It's opt-in because it changes the response timing contract: a streaming render commits its HTTP head BEFORE suspended subtrees finish, so (a) it's never CDN/disk cacheable — don't combine with `export const revalidate`; (b) `response.setStatus/setCookie/redirect/notFound` only take effect from the SYNCHRONOUS shell render — a call from inside a suspended subtree is dropped (the runtime logs a loud warning naming what was lost); (c) a `throw` from a deep `<Suspense>` child resolves via its nearest `error.tsx` at HTTP 200, not a 5xx. Hydration is clean for any number of boundaries (the data blob ships before hydration runs). Type the config with `import type { RouteSegmentConfig } from "@pylonsync/react"`.
+- **`error.tsx` / `not-found.tsx` boundaries are HYDRATED (interactive).** `app/.../error.tsx` catches a throw below it (HTTP 500) and receives `{ error: { message, digest }, reset }` (`import type { ErrorBoundaryProps }`) — `reset()` re-attempts the route; the stack NEVER reaches the client (dev overlay + logs only). `app/.../not-found.tsx` renders at 404 (also for `response.notFound()`) and gets the page props (`NotFoundProps`), no `reset`. Both run useState/onClick/hooks.
+- **Client navigation hooks live in @pylonsync/react.** `useRouter()` → `{ push, replace, back, forward, refresh, prefetch }`; `useSearchParams()` → reactive `URLSearchParams`; `usePathname()` → reactive pathname. The hooks are CLIENT-reactive — during SSR they return defaults (empty params / "/"); for server-side URL values read the `url` / `searchParams` page props.
+- **Dynamic + catch-all routes follow Next conventions.** `app/blog/[slug]/page.tsx` → `params.slug`. `app/docs/[...path]/page.tsx` is a catch-all (matches `/docs/a/b/c`; `params.path === "a/b/c"` — `.split("/")` for segments). `app/shop/[[...filters]]/page.tsx` is an optional catch-all (also matches the bare `/shop`, with `params.filters === ""`). A catch-all must be the last segment; static beats dynamic beats catch-all on overlap.
+- **`serverData` (SSR) is READ-ONLY.** No write methods; the runtime rejects write frames (`SSR_WRITE_FORBIDDEN`). Mutations belong in actions/functions, never in a page render.
+- **`response.*` / `response.redirect()` / `response.notFound()` must fire in the synchronous shell render**, before any `await` / `<Suspense>`. The HTTP head commits when the shell is ready — status/headers/cookies set from a suspended subtree are lost, and `redirect`/`notFound` thrown below a Suspense boundary are swallowed.
+- **`ctx.llm` and `ctx.connections` are on mutation + action only, NOT query** (reactive purity). `action` has no direct `ctx.db` — use `ctx.runQuery` / `ctx.runMutation`.
+- **It's `db.useQueryOne`, not `useOne`.** Validators and field types have aliases: `v.bool`/`v.boolean`, `v.float`/`v.number`.
+- **There is no `ctx.files` or `defineWorkflow`/`defineJob`.** Files go through `<FileUpload>` + `/api/files/*`; deferred execution is `ctx.scheduler.runAfter/runAt/cancel`.
+
+## Use the CLI — don't guess
+
+| Need | Command |
+|---|---|
+| Run the app (SSR + API, hot reload, one port `:4321`) | `pylon dev` (or `npm run dev`) |
+| Regenerate manifest + typed client | `pylon codegen` (Swift client: `pylon codegen client --target swift`) |
+| Validate / diff / push schema | `pylon schema check` \| `diff` \| `push` |
+| Migrations | `pylon migrate create <name>` \| `plan` \| `apply` |
+| Lint policies (PYL001–PYL004) | `pylon lint --strict` |
+| Tests | `pylon test` |
+| Adversarial security probe | `pylon test:security` |
+| Inspect cloud request logs (agent-safe) | `pylon logs --json --limit 50` |
+| Inspect data / entities | `pylon data entities` \| `pylon data list <Entity>` |
+| Call a function | `pylon fn <name> key=value` |
+| Health snapshot | `pylon status` |
+| Build for prod | `pylon build` |
+| Deploy (Pylon Cloud by default) | `pylon deploy` |
+| Look up an error code | `pylon explain <CODE>` |
+
+`--json` works on every command for machine-readable output. Prefer one-shot/agent-safe flags (`pylon logs --limit N`, not a blocking `--follow`).
+
+For full signatures, env vars, the complete CLI, and SSR/client/server-primitive details: **/llms-full.txt**.

package/templates/b2b/README.md

@@ -0,0 +1,62 @@
+# __APP_NAME__
+
+A multi-tenant SaaS starter on [Pylon](https://pylonsync.com) — email/password
+accounts, organizations with members + roles, and tenant-scoped data, all
+server-rendered from one binary on one port. No Next.js, no separate API server.
+
+## Develop
+
+```bash
+__RUN_DEV__
+```
+
+Open http://localhost:4321. Sign up, create an organization, and you land in a
+workspace with **tenant-scoped projects** and a **members** panel. Create a
+second org and switch between them — each org's projects are private to it.
+Edit any file under `app/` and save — the page reloads instantly.
+
+## Layout
+
+```
+app.ts                       User + Org/OrgMember/OrgInvite + tenant-scoped Project
+app/page.tsx                 "/" — server-rendered, auth-aware homepage
+app/login,signup/            email/password (POST /api/auth/password/*)
+app/dashboard/               "/dashboard" — authed; org switcher + projects + members
+app/dashboard/dashboard-client.tsx   the workspace client island
+```
+
+## How multi-tenancy works
+
+Organizations are a **framework primitive**. Declaring `Org` / `OrgMember` /
+`OrgInvite` with the framework's field names lights up `/api/auth/orgs/*`
+(create/list orgs, members, invites) and `/api/auth/select-org` (switch your
+active tenant) — driven by `<OrganizationSwitcher>` from `@pylonsync/client`.
+
+`select-org` checks your `OrgMember` row before committing, then sets the
+session's `tenantId`. Your data lives in tenant-scoped entities:
+
+```ts
+allowRead:   "auth.tenantId == data.orgId"
+allowInsert: "auth.tenantId == data.orgId"
+```
+
+So `db.useQuery("Project")` returns only your **active org's** projects, and a
+client literally cannot read or write another tenant's rows — switch orgs and
+the list changes. **RBAC** is built in too: the framework gates invites/member
+management to org admins, so a `member` calling `createInvite` gets a 403.
+
+## Grow it
+
+- **Add tenant data:** new `entity()` with an `orgId` + the same two policy
+  lines. That's a new tenant-scoped table.
+- **Custom roles:** read `OrgMember.role` in a server function and gate writes
+  with `ctx.elevate({ admin })` / `ctx.db.unsafe.*`.
+- **SSO / SAML:** per-org SSO is built in at `/api/auth/orgs/:id/sso/*`.
+
+## Deploy
+
+```bash
+pylon deploy
+```
+
+Docs: https://docs.pylonsync.com

package/templates/b2b/app/auth-form.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import React, { useState } from "react";
+import { passwordLogin, passwordRegister, ApiError } from "@pylonsync/client";
+import { Button } from "@/components/ui/button";
+
+// The email/password form, shared by /login and /signup. It calls the built-in
+// auth API directly — `passwordLogin` / `passwordRegister` (from
+// @pylonsync/client) POST to `/api/auth/password/*`.
+//
+// On success the server sets an HttpOnly session cookie on the response. We do
+// a full navigation to /dashboard rather than a client transition: the fresh
+// page load hands that cookie to the SSR runtime (which resolves auth and
+// renders the dashboard server-side) and to the sync engine (which
+// authenticates with the same cookie via `credentials: include`). Because the
+// cookie is HttpOnly it can never be read by JavaScript, so there is no
+// session token sitting in `localStorage` for an XSS to lift. (Cross-origin or
+// native clients, which can't rely on the cookie, use the token-based path via
+// `persistSession` instead — not needed here, same origin.)
+export function AuthForm({ mode }: { mode: "login" | "signup" }) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [displayName, setDisplayName] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setPending(true);
+    try {
+      if (mode === "login") {
+        await passwordLogin({ email, password });
+      } else {
+        await passwordRegister({
+          email,
+          password,
+          displayName: displayName.trim() || undefined,
+        });
+      }
+      // Full navigation: the SSR dashboard re-renders with the new cookie.
+      window.location.assign("/dashboard");
+    } catch (err) {
+      setError(messageFor(err));
+      setPending(false); // keep the form up to retry (success navigates away)
+    }
+  }
+
+  return (
+    <form onSubmit={onSubmit} className="space-y-4">
+      {mode === "signup" ? (
+        <Field
+          label="Name"
+          value={displayName}
+          onChange={setDisplayName}
+          autoComplete="name"
+          placeholder="optional"
+        />
+      ) : null}
+      <Field
+        label="Email"
+        type="email"
+        value={email}
+        onChange={setEmail}
+        required
+        autoComplete="email"
+        placeholder="you@example.com"
+      />
+      <Field
+        label="Password"
+        type="password"
+        value={password}
+        onChange={setPassword}
+        required
+        autoComplete={mode === "login" ? "current-password" : "new-password"}
+        placeholder={mode === "signup" ? "at least 8 characters" : undefined}
+      />
+      {error ? (
+        <p className="rounded-md border border-red-600/30 bg-red-600/10 px-3 py-2 text-sm text-red-700">
+          {error}
+        </p>
+      ) : null}
+      <Button type="submit" disabled={pending} className="w-full">
+        {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
+      </Button>
+    </form>
+  );
+}
+
+function Field({
+  label,
+  value,
+  onChange,
+  type = "text",
+  required,
+  autoComplete,
+  placeholder,
+}: {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  type?: string;
+  required?: boolean;
+  autoComplete?: string;
+  placeholder?: string;
+}) {
+  return (
+    <label className="block space-y-1.5">
+      <span className="text-sm font-medium">{label}</span>
+      <input
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        required={required}
+        autoComplete={autoComplete}
+        placeholder={placeholder}
+        className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
+      />
+    </label>
+  );
+}
+
+// Map the framework's auth error codes to friendly copy. `ApiError` carries a
+// stable `.code` (and `.status`) so you branch on the code, not the message.
+function messageFor(err: unknown): string {
+  if (err instanceof ApiError) {
+    switch (err.code) {
+      case "INVALID_CREDENTIALS":
+        return "Wrong email or password.";
+      case "USER_EXISTS":
+        return "That email is already in use — sign in instead.";
+      case "WEAK_PASSWORD":
+        return "Pick a stronger password (at least 8 characters).";
+      case "RATE_LIMITED":
+        return "Too many attempts — try again in a minute.";
+      default:
+        return err.message;
+    }
+  }
+  if (err instanceof Error) return err.message;
+  return "Something went wrong. Try again.";
+}

package/templates/b2b/app/dashboard/dashboard-client.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import React, { useCallback, useEffect, useState } from "react";
+import { db } from "@pylonsync/react";
+import {
+  useAuth,
+  OrganizationSwitcher,
+  listOrgMembers,
+  createInvite,
+  type OrgMember,
+} from "@pylonsync/client";
+import { Button } from "@/components/ui/button";
+
+export interface Project {
+  id: string;
+  orgId: string;
+  name: string;
+  createdAt: string;
+}
+
+// The workspace. `<OrganizationSwitcher>` (from @pylonsync/client) lists your
+// orgs, creates new ones, and switches your active tenant via
+// /api/auth/select-org — all against the framework's built-in org system. The
+// rest of the page keys off `tenantId` (your active org).
+export function Workspace() {
+  const { tenantId, signOut } = useAuth();
+
+  async function onSignOut() {
+    await signOut();
+    window.location.assign("/");
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between gap-3">
+        <OrganizationSwitcher />
+        <Button variant="ghost" size="sm" onClick={onSignOut}>
+          Sign out
+        </Button>
+      </div>
+
+      {tenantId ? (
+        <div className="grid gap-6 sm:grid-cols-2">
+          <Projects orgId={tenantId} />
+          <Members orgId={tenantId} />
+        </div>
+      ) : (
+        <div className="rounded-lg border border-dashed px-6 py-10 text-center text-sm text-muted-foreground">
+          Create or select an organization above to get started. Each org is an
+          isolated tenant — its projects and members are private to it.
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Tenant-scoped data. `db.useQuery("Project")` returns only your active org's
+// projects (the policy gates on `auth.tenantId == data.orgId`), and switching
+// orgs re-syncs the list. `db.insert` is optimistic; we pass `orgId` = the
+// active tenant so the row lands in this org — the policy rejects any other.
+function Projects({ orgId }: { orgId: string }) {
+  const [name, setName] = useState("");
+  const { data: all } = db.useQuery<Project>("Project");
+  // Defensive filter while a tenant switch re-syncs the local replica.
+  const projects = all.filter((p) => p.orgId === orgId);
+
+  async function add(e: React.FormEvent) {
+    e.preventDefault();
+    const value = name.trim();
+    if (!value) return;
+    setName("");
+    await db.insert("Project", { orgId, name: value });
+  }
+
+  return (
+    <section className="space-y-3">
+      <h2 className="text-sm font-semibold">Projects</h2>
+      <form onSubmit={add} className="flex items-center gap-2">
+        <input
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="New project…"
+          aria-label="Project name"
+          className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        />
+        <Button type="submit" size="sm">
+          Add
+        </Button>
+      </form>
+      {projects.length === 0 ? (
+        <p className="text-sm text-muted-foreground">No projects yet.</p>
+      ) : (
+        <ul className="space-y-1.5">
+          {projects.map((p) => (
+            <li
+              key={p.id}
+              className="flex items-center justify-between rounded-md border px-3 py-2 text-sm"
+            >
+              <span className="truncate">{p.name}</span>
+              <button
+                type="button"
+                aria-label="Delete project"
+                onClick={() => db.delete("Project", p.id)}
+                className="text-muted-foreground/40 transition-colors hover:text-red-600"
+              >
+                ✕
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+      <p className="text-xs text-muted-foreground">
+        Tenant-scoped: only this org&apos;s projects, enforced by policy — switch
+        orgs and the list changes.
+      </p>
+    </section>
+  );
+}
+
+// Membership + invites go through the framework's /api/auth/orgs/:id endpoints
+// (the @pylonsync/client helpers). The framework gates invites to org admins,
+// so a member calling createInvite gets a 403 — real RBAC, no extra code.
+function Members({ orgId }: { orgId: string }) {
+  const [members, setMembers] = useState<OrgMember[] | null>(null);
+  const [email, setEmail] = useState("");
+  const [note, setNote] = useState("");
+
+  const refresh = useCallback(() => {
+    void listOrgMembers(orgId).then(setMembers);
+  }, [orgId]);
+
+  useEffect(() => {
+    setMembers(null);
+    refresh();
+  }, [refresh]);
+
+  async function invite(e: React.FormEvent) {
+    e.preventDefault();
+    const value = email.trim();
+    if (!value) return;
+    setEmail("");
+    setNote("");
+    try {
+      await createInvite(orgId, value, "member");
+      setNote(`Invited ${value}.`);
+      refresh();
+    } catch {
+      setNote("Only org admins can invite members.");
+    }
+  }
+
+  return (
+    <section className="space-y-3">
+      <h2 className="text-sm font-semibold">Members</h2>
+      {members === null ? (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      ) : (
+        <ul className="space-y-1.5">
+          {members.map((m) => (
+            <li
+              key={m.user_id}
+              className="flex items-center justify-between rounded-md border px-3 py-2 text-sm"
+            >
+              <span className="truncate font-mono text-xs">
+                {shortId(m.user_id)}
+              </span>
+              <span className="text-xs text-muted-foreground">{m.role}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+      <form onSubmit={invite} className="flex items-center gap-2">
+        <input
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="invite by email…"
+          aria-label="Invite email"
+          className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        />
+        <Button type="submit" size="sm" variant="outline">
+          Invite
+        </Button>
+      </form>
+      {note && <p className="text-xs text-muted-foreground">{note}</p>}
+    </section>
+  );
+}
+
+function shortId(id: string) {
+  return id.replace(/^user_/, "").slice(0, 10);
+}