From 6b366e0620635a7f64a369577e60ee65e76d398b Mon Sep 17 00:00:00 2001
From: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Date: Tue, 30 Jun 2026 12:00:06 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat(spec,lint):=20ADR-0081=20=E2=80=94=20k?=
 =?UTF-8?q?ind:'html'=20(rename)=20+=20trusted=20kind:'react'=20tier?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- spec: PageSchema.kind gains 'html' (the renamed constrained tier; 'jsx'
  kept as a deprecated alias) and 'react' (trusted real-React, executed at
  render, host-capability gated). Completeness gate requires source for all three.
- lint: validate-jsx-pages lints html/jsx; skips react (real JS, not
  constrained JSX). +tests.
- examples: command-center page moves to kind:'html'.
- docs: ADR-0081.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .changeset/sdui-react-page-tier.md            | 14 ++++
 docs/adr/0081-trusted-react-page-tier.md      | 65 +++++++++++++++++++
 .../src/pages/command-center-jsx.page.ts      |  9 +--
 packages/lint/src/validate-jsx-pages.test.ts  |  8 +++
 packages/lint/src/validate-jsx-pages.ts       | 15 +++--
 packages/spec/src/ui/page.zod.ts              | 21 ++++--
 6 files changed, 117 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/sdui-react-page-tier.md
 create mode 100644 docs/adr/0081-trusted-react-page-tier.md

diff --git a/.changeset/sdui-react-page-tier.md b/.changeset/sdui-react-page-tier.md
new file mode 100644
index 0000000000..f8980d7c2b
--- /dev/null
+++ b/.changeset/sdui-react-page-tier.md
@@ -0,0 +1,14 @@
+---
+"@objectstack/spec": minor
+"@objectstack/lint": minor
+---
+
+ADR-0081: split the AI page-authoring surface into honest tiers.
+
+- `PageSchema.kind` gains `'html'` and `'react'`. `'html'` is the constrained
+  parse-never-execute tier (the renamed `'jsx'`, kept as a deprecated alias);
+  `'react'` is the trusted real-React tier (executed at render by
+  `@object-ui/react-runtime`, gated behind a host capability, enterprise/private
+  only). The completeness gate now requires `source` for all three.
+- `validate-jsx-pages` lints `html`/`jsx` (constrained parse) and intentionally
+  skips `react` (real JS, not constrained JSX).
diff --git a/docs/adr/0081-trusted-react-page-tier.md b/docs/adr/0081-trusted-react-page-tier.md
new file mode 100644
index 0000000000..a0b58d396f
--- /dev/null
+++ b/docs/adr/0081-trusted-react-page-tier.md
@@ -0,0 +1,65 @@
+# ADR-0081: A trusted `kind:'react'` page tier — real React executed in the main tree, gated by a host capability; and renaming `kind:'jsx'` → `kind:'html'`
+
+**Status**: Proposed (2026-06-30)
+**Deciders**: ObjectStack Protocol Architects
+**Builds on**: [ADR-0080](./0080-ai-authored-ui-jsx-source.md) (AI authors a *constrained* JSX text, parsed-never-executed, into the SDUI tree; the component registry is the contract; capability ≠ contract), [ADR-0033](./0033-ai-assisted-metadata-authoring.md) (AI writes metadata via draft-gated `saveMetaItem` — the human-review boundary), [ADR-0077](./0077-authoring-surface-boundary-hook-flow-validation.md) (route by intent; verifiability tier = friction tier; **code is the flagged escape hatch**), [ADR-0078](./0078-no-silently-inert-metadata.md) (no silently-inert metadata).
+**Consumers**: `@objectstack/spec` (`packages/spec/src/ui/page.zod.ts` — `kind` gains `'html'` and `'react'`; `'jsx'` kept as a deprecated alias), `@objectstack/lint` (`validate-jsx-pages` — lints `html`/`jsx`, **skips** `react`), `../objectui` `@object-ui/react-runtime` (**new** — the trusted runtime-React executor) + `@object-ui/core` (the host capability gate) + `@object-ui/components` (PageRenderer routing + the full HTML tag set).
+
+**Premise**: ADR-0080 shipped `kind:'jsx'` — a *constrained* JSX dialect parsed (never executed) into the SDUI tree. In practice that name oversold it: authors expected "JSX" to mean *any* HTML and *any* JavaScript (`useState`, `.map`, `onClick`), and the constrained, no-execution model categorically cannot do that. Two distinct things were conflated under one name. This ADR splits them: it makes the safe constrained tier **live up to a narrower, honest name (`html`)**, and adds a separate, explicitly-trusted **`react`** tier for the full-power case — available only where the operator accepts running author code.
+
+> **Trigger**: testing the merged `kind:'jsx'` feature, the author found it "名不副实" (misnamed) — basic HTML tags didn't render and scripts were impossible — and recognized that the real-React capability belongs behind a switch, enabled only in a trusted private/enterprise deployment where "running unsandboxed author code in the main React app" is an acceptable, deliberate trust decision.
+
+---
+
+## TL;DR
+
+1. **[rename] `kind:'jsx'` → `kind:'html'`.** The constrained, parse-never-execute tier (ADR-0080) is renamed to match what it is: author-written **HTML + Tailwind** (expressed as constrained JSX) compiled to the SDUI tree. `'jsx'` stays as a **deprecated alias** (already-saved pages keep loading); all authored examples/docs move to `'html'`.
+2. **[capability] The `html` tier now resolves the full safe native HTML tag set.** Previously only `div/span/table/code/label` + semantic sectioning tags were registered, so `<h1>/<p>/<a>/<ul>/<li>/<img>/<blockquote>…` failed as `unknown-component`. They are now registered as passthrough renderers — the tier is finally honest about "HTML".
+3. **[new tier] `kind:'react'` executes real React.** Its `source` is real JS/JSX (hooks, `.map`, event handlers, expressions), transpiled (Sucrase) and evaluated **in the main React tree — no sandbox** — by the new `@object-ui/react-runtime`. This is `parse = execute`: the categorical opposite of the `html` tier.
+4. **[security = trust, not sandbox] `react` is gated by a host capability, default OFF.** `CAP_REACT_PAGES` is flipped only by the *host process* (`enableCapability('react-pages')`), never by authored metadata. Open-source / multi-tenant builds ship it **off**; enterprise / private deployments — where authors are trusted and changes pass human review (draft-gating, ADR-0033) — opt in. A sandbox (iframe/worker) is the tool for *untrusted* execution; we deliberately choose **trust + review** instead, which keeps the author's code a first-class citizen of the app (shared React tree, real components, real data) at the cost of requiring the operator's explicit consent.
+5. **[runtime] Vendored, not depended.** `@object-ui/react-runtime` inlines the ~150-LOC react-runner core (MIT) so we fully own the injected **scope/imports surface** (the actual capability ceiling) and can **lazy-load** it — the transpiler ships in a separate chunk fetched only when a `react` page renders *with the capability on*.
+6. **[scope] Inject data blocks + React; leave layout to HTML.** The runtime scope exposes `React`, the curated **public data blocks** (`<ObjectTable>`, `<ObjectForm>`, charts, metrics — each a prop-driven wrapper over `SchemaRenderer`), a `<Block type=…/>` escape hatch, and the page `data`. Layout/structure is plain HTML + Tailwind (React's strength) — we do **not** bridge React children into schema-children renderers.
+7. **[lint] `react` is not linted by the constrained parser.** `validate-jsx-pages` (ADR-0080's build gate) validates `html`/`jsx` only; running the constrained JSX parser over real React source would false-error on hooks and expressions. The `react` tier's safety boundary is the **capability + human review**, not a static gate.
+
+---
+
+## The three tiers
+
+| | `kind:'html'` (was `jsx`) | `kind:'react'` (new) |
+|---|---|---|
+| Source | constrained JSX = HTML + Tailwind + registered components | real React/JSX: hooks, `.map`, `onClick`, expressions |
+| Processing | **parsed**, never executed → SDUI tree | transpiled + **executed** in the main React tree |
+| JavaScript | none (static literals) | full |
+| Safety model | safe by construction (no execution) | **trust** (capability + review); no sandbox |
+| Where it runs | OSS default ON | enterprise/private only, capability default **OFF** |
+| Author-time gate | `os build` constrained-parse lint | none (real JS); error boundary at render |
+| Contract | registry `inputs` (ADR-0080) | injected scope = the ceiling |
+
+The dividing line is exactly ADR-0080 §2's "parse ≠ execute". `html` keeps the property that *a stored string that is parsed is still data*; `react` deliberately crosses it, and pays for the crossing with an explicit operator opt-in.
+
+---
+
+## Decision
+
+### 1. Rename, with a back-compat alias
+`PageSchema.kind` becomes `enum(['full','slotted','html','react','jsx'])`. `'html'` is the canonical constrained tier; `'jsx'` is accepted as a silent **deprecated alias** so metadata saved during ADR-0080's window keeps rendering. The PageRenderer treats `html` and `jsx` identically; lint and the completeness gate (ADR-0078) treat both as source-required.
+
+### 2. Make `html` honest
+Register the safe native HTML flow/inline set (`h1–h6, p, a, ul/ol/li, dl/dt/dd, blockquote, pre, strong/em/b/i/u/small/mark/sub/sup, figure/figcaption, img, hr, br, time, address, …`) as passthrough renderers that forward standard attributes and recurse children. Excluded: anything already registered, and anything that can execute or escape (`script/style/iframe/object/embed/link/meta/form/input`, plus `button` which is the component). Defense-in-depth even though this tier never executes JS: strip `on*` handlers and `dangerouslySetInnerHTML`, neutralize `javascript:`/`data:` URLs on `<a href>`. Unknown attributes are warnings (the page still renders), per the ADR-0080 validator.
+
+### 3. Add `react` as a capability, not a default
+- **Gate**: `@object-ui/core` gains `enableCapability`/`disableCapability`/`isCapabilityEnabled` + `CAP_REACT_PAGES`. Default-closed. Host-only (a global pre-seed `globalThis.__OBJECTUI_CAPABILITIES__` is also honored for HTML-bootstrap hosts). It is structurally impossible to enable from authored metadata.
+- **Renderer**: PageRenderer routes `kind:'react'` to a renderer that — only when the capability is on — lazy-imports `@object-ui/react-runtime`, builds the scope, and renders via its error-boundaried `ReactRunner`. Capability off → a clear "this page requires the React-pages capability" notice, not a crash.
+
+### 4. Vendor the runtime; own the scope
+`@object-ui/react-runtime` inlines react-runner: `transform` (Sucrase `jsx`+`typescript`+`imports`, production), `generateElement` (eval with injected scope; `createRequire` resolves `require()` only against an explicit `imports` map — a control point), and `ReactRunner` (a component with `getDerivedStateFromError`). The capability ceiling is precisely the injected scope/imports — owning that file is why we vendor rather than depend.
+
+---
+
+## Consequences
+
+- **Honest names.** `html` does HTML; `react` does React. The conflation that made the first cut feel "鸡肋" is gone.
+- **Two safety stories, each clean.** `html` is safe by construction and stays the OSS/multi-tenant default. `react` is safe by *trust*, opt-in, and obviously so (you typed `enableCapability`).
+- **No build/deploy for either.** `html` compiles at save; `react` transpiles at render (lazy chunk). Neither needs a bundler in the author loop.
+- **AI fit.** AI writes both fluently. For `react`, correctness is bounded by the injected scope + human review (ADR-0033), not by hoping the model never writes a bad effect.
+- **Cost.** `react` runs author code in the main tree: a thrown render is caught by the error boundary, but an author can still write a slow/incorrect page. That is the accepted price of the trusted tier and the reason it is off by default. Revisit if a future need arises for *untrusted* rich pages — that would be a *different* ADR (sandboxed execution), not this one.
diff --git a/examples/app-showcase/src/pages/command-center-jsx.page.ts b/examples/app-showcase/src/pages/command-center-jsx.page.ts
index 950f0316f4..a3278078d4 100644
--- a/examples/app-showcase/src/pages/command-center-jsx.page.ts
+++ b/examples/app-showcase/src/pages/command-center-jsx.page.ts
@@ -3,8 +3,9 @@
 import { definePage } from '@objectstack/spec/ui';
 
 /**
- * Command Center — a `kind:'jsx'` page (ADR-0080). The entire layout is
- * authored as a constrained JSX + Tailwind *string*; at save time
+ * Command Center — a `kind:'html'` page (ADR-0080; formerly `kind:'jsx'`).
+ * The entire layout is authored as a constrained JSX/HTML + Tailwind *string*;
+ * at save time
  * `@objectstack/sdui-parser` compiles it (parse, never execute) into the SDUI
  * tree, which the normal PageRenderer / SchemaRenderer renders. Every tag is a
  * real registered component — `flex`, `grid`, `card`, `text`, `badge`, `stack`.
@@ -14,9 +15,9 @@ import { definePage } from '@objectstack/spec/ui';
  */
 export const CommandCenterJsxPage = definePage({
   name: 'showcase_command_center_jsx',
-  label: 'Command Center (JSX)',
+  label: 'Command Center (HTML)',
   type: 'home',
-  kind: 'jsx',
+  kind: 'html',
   source: `
 <flex direction="col" className="min-h-screen gap-10 bg-gradient-to-br from-slate-50 via-white to-indigo-50 p-10">
 
diff --git a/packages/lint/src/validate-jsx-pages.test.ts b/packages/lint/src/validate-jsx-pages.test.ts
index 269673b3c0..9ba2e721fa 100644
--- a/packages/lint/src/validate-jsx-pages.test.ts
+++ b/packages/lint/src/validate-jsx-pages.test.ts
@@ -23,6 +23,14 @@ describe('validateJsxPages (ADR-0080 build gate)', () => {
   it('ignores non-jsx pages', () => {
     expect(validateJsxPages({ pages: [{ name: 'full', kind: 'full', regions: [] }] })).toEqual([]);
   });
+  it('validates kind:\'html\' (the renamed tier) too', () => {
+    expect(validateJsxPages({ pages: [{ name: 'cc', kind: 'html', source: '<flex><text content="hi" /></flex>' }] })).toEqual([]);
+    expect(validateJsxPages({ pages: [{ name: 'cc', kind: 'html' }] }).some((f) => f.rule === 'jsx-page-empty-source')).toBe(true);
+  });
+  it('does NOT lint kind:\'react\' (real JS, not constrained JSX)', () => {
+    const stack = { pages: [{ name: 'rx', kind: 'react', source: 'function P(){const[n]=React.useState(0);return <div>{n}</div>}' }] };
+    expect(validateJsxPages(stack)).toEqual([]);
+  });
 });
 
 describe('validateJsxPages — full validation with a manifest', () => {
diff --git a/packages/lint/src/validate-jsx-pages.ts b/packages/lint/src/validate-jsx-pages.ts
index 7cfd6311f1..c85ea61203 100644
--- a/packages/lint/src/validate-jsx-pages.ts
+++ b/packages/lint/src/validate-jsx-pages.ts
@@ -1,9 +1,15 @@
 // Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
 //
-// Build-time diagnostics for AI-authored JSX-source pages (ADR-0080).
+// Build-time diagnostics for AI-authored HTML-source pages (ADR-0080).
+//
+// Applies to `kind:'html'` (and its deprecated alias `kind:'jsx'`) — the tier
+// whose `source` is constrained JSX/HTML parsed (never executed) to the tree.
+// `kind:'react'` (ADR-0081) is intentionally NOT linted here: its source is
+// real JavaScript, not constrained JSX, so the constrained parser would
+// false-error on hooks / expressions.
 //
 // A pure `(stack) => Finding[]` rule (ADR-0019), run from `os validate` / `os
-// build`. A `kind:'jsx'` page's `source` is a constrained JSX/Tailwind string
+// build`. An html page's `source` is a constrained JSX/Tailwind string
 // compiled (parsed, never executed) to the SDUI tree at save time. This gate
 // parses it at author time so malformed source fails loudly (ADR-0078) instead
 // of being stored and breaking only at render.
@@ -37,7 +43,8 @@ export function validateJsxPages(stack: AnyRec, opts: { manifest?: Manifest } =
   const pages = asArray(stack.pages);
   for (let p = 0; p < pages.length; p++) {
     const page = pages[p];
-    if (!page || page.kind !== 'jsx') continue;
+    // html tier (+ deprecated 'jsx' alias). react pages are not constrained JSX.
+    if (!page || (page.kind !== 'html' && page.kind !== 'jsx')) continue;
     const name = String(page.name ?? `#${p}`);
     const source = page.source;
     if (typeof source !== 'string' || source.trim() === '') {
@@ -47,7 +54,7 @@ export function validateJsxPages(stack: AnyRec, opts: { manifest?: Manifest } =
         rule: 'jsx-page-empty-source',
         where: `page "${name}"`,
         path: `pages[${p}].source`,
-        message: "kind:'jsx' page has no `source`.",
+        message: `kind:'${page.kind}' page has no \`source\`.`,
         hint: 'Author the page as a constrained JSX/Tailwind string in `source`.',
       });
       continue;
diff --git a/packages/spec/src/ui/page.zod.ts b/packages/spec/src/ui/page.zod.ts
index 1d63266b11..5a8f3b992d 100644
--- a/packages/spec/src/ui/page.zod.ts
+++ b/packages/spec/src/ui/page.zod.ts
@@ -358,8 +358,14 @@ export const PageSchema = lazySchema(() => z.object({
    *
    * Only meaningful when `type === 'record'`. Ignored otherwise.
    */
-  kind: z.enum(['full', 'slotted', 'jsx']).default('full')
-    .describe('Page override mode: full | slotted | jsx (ADR-0080 JSX-source authoring)'),
+  kind: z.enum(['full', 'slotted', 'html', 'react', 'jsx']).default('full')
+    .describe(
+      "Page override mode. full | slotted = structured authoring; " +
+      "html = author-written constrained JSX/HTML+Tailwind compiled (parsed, never " +
+      "executed) to the tree (ADR-0080; the legacy value 'jsx' is a deprecated alias); " +
+      "react = TRUSTED real-React source executed at render by the runtime (ADR-0081), " +
+      "gated to enterprise/private deployments.",
+    ),
 
   /**
    * Slot override map for slotted record pages.
@@ -393,18 +399,19 @@ export const PageSchema = lazySchema(() => z.object({
    * wins on any mismatch). For `full`/`slotted` pages `source` is unused.
    */
   source: z.string().optional()
-    .describe("JSX-source page text — authoritative when kind==='jsx'; compiled to the tree by @objectstack/sdui-parser at save time (parse, never execute)"),
+    .describe("Page source text. For kind==='html' (alias 'jsx') it is constrained JSX/HTML+Tailwind compiled to the tree by @objectstack/sdui-parser at save time (parse, never execute). For kind==='react' it is real React/JSX executed at render by @object-ui/react-runtime (trusted tier). Authoritative over `regions` in both."),
   /** Plugin namespaces the JSX source references — inferred at compile, checked at save AND load (ADR-0048 provenance). */
   requires: z.array(z.string()).optional()
     .describe('Plugin namespaces the JSX source references (validated at save and load)'),
 }).superRefine((page, ctx) => {
-  // ADR-0080 + ADR-0078 (completeness): a `kind:'jsx'` page with no `source`
-  // is silently inert — fail loudly at author time, do not render an empty page.
-  if (page.kind === 'jsx' && !(typeof page.source === 'string' && page.source.trim().length > 0)) {
+  // ADR-0080/0081 + ADR-0078 (completeness): an html/react/jsx page with no
+  // `source` is silently inert — fail loudly at author time, never render empty.
+  const sourceKinds = ['html', 'react', 'jsx'];
+  if (sourceKinds.includes(page.kind) && !(typeof page.source === 'string' && page.source.trim().length > 0)) {
     ctx.addIssue({
       code: 'custom',
       path: ['source'],
-      message: "A jsx page requires a non-empty `source` (ADR-0080: JSX is the source-of-truth).",
+      message: `A ${page.kind} page requires a non-empty \`source\` (the source is the source-of-truth).`,
     });
   }
 }));

From b2e6925aaf1ed75df30716d444befd4ef258d6a3 Mon Sep 17 00:00:00 2001
From: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Date: Tue, 30 Jun 2026 12:38:05 +0800
Subject: [PATCH 2/5] =?UTF-8?q?feat(examples):=20CRM=20Workbench=20?=
 =?UTF-8?q?=E2=80=94=20a=20kind:'react'=20master/detail=20showcase=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A complete real-React example (ADR-0081 trusted tier): composes the platform's
real <ListView> + <ObjectForm> with React state to build a master/detail
workbench (row click → controlled recordId; save → list refresh; live KPIs via
useAdapter). Browser-verified through the real PageRenderer. Renders behind the
host capability CAP_REACT_PAGES (a trusted deployment enables it); otherwise it
shows the enterprise-capability notice. Also renames the JSX nav label to (HTML).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 examples/app-showcase/objectstack.config.ts   |   4 +-
 examples/app-showcase/src/apps/index.ts       |   3 +-
 .../src/pages/crm-workbench.page.ts           | 116 ++++++++++++++++++
 examples/app-showcase/src/pages/index.ts      |   1 +
 4 files changed, 121 insertions(+), 3 deletions(-)
 create mode 100644 examples/app-showcase/src/pages/crm-workbench.page.ts

diff --git a/examples/app-showcase/objectstack.config.ts b/examples/app-showcase/objectstack.config.ts
index 545fdf2a8d..b67dcab765 100644
--- a/examples/app-showcase/objectstack.config.ts
+++ b/examples/app-showcase/objectstack.config.ts
@@ -22,7 +22,7 @@ import { ChartGalleryDashboard, OpsDashboard } from './src/dashboards/index.js';
 import { ShowcaseTaskDataset, ShowcaseProjectDataset } from './src/datasets/index.js';
 import { allReports } from './src/reports/index.js';
 import { allActions } from './src/actions/index.js';
-import { ComponentGalleryPage, ProjectWorkspacePage, ProjectDetailPage, TaskWorkbenchPage, TaskTriagePage, TaskBoardPage, TaskCalendarPage, TaskGalleryPage, TaskSchedulePage, TaskTimelinePage, TaskMapPage, TaskAllViewsPage, ActiveProjectsPage, TaskDetailPage, AccountDetailPage, ReviewQueuePage, NewProjectWizardPage, MyWorkPage, SettingsPage, StylingGalleryPage, CommandCenterPage, CommandCenterJsxPage, PageVariablesPage, ContactFormPage } from './src/pages/index.js';
+import { ComponentGalleryPage, ProjectWorkspacePage, ProjectDetailPage, TaskWorkbenchPage, TaskTriagePage, TaskBoardPage, TaskCalendarPage, TaskGalleryPage, TaskSchedulePage, TaskTimelinePage, TaskMapPage, TaskAllViewsPage, ActiveProjectsPage, TaskDetailPage, AccountDetailPage, ReviewQueuePage, NewProjectWizardPage, MyWorkPage, SettingsPage, StylingGalleryPage, CommandCenterPage, CommandCenterJsxPage, CrmWorkbenchPage, PageVariablesPage, ContactFormPage } from './src/pages/index.js';
 import { allFlows } from './src/flows/index.js';
 import { allWebhooks } from './src/webhooks/index.js';
 import { allHooks } from './src/hooks/index.js';
@@ -154,7 +154,7 @@ export default defineStack({
   apps: [ShowcaseApp],
   portals: allPortals,
   views: [TaskViews, ProjectViews, InquiryViews, BusinessUnitViews],
-  pages: [ComponentGalleryPage, ProjectWorkspacePage, ProjectDetailPage, TaskWorkbenchPage, TaskTriagePage, TaskBoardPage, TaskCalendarPage, TaskGalleryPage, TaskSchedulePage, TaskTimelinePage, TaskMapPage, TaskAllViewsPage, ActiveProjectsPage, TaskDetailPage, AccountDetailPage, ReviewQueuePage, NewProjectWizardPage, MyWorkPage, SettingsPage, StylingGalleryPage, CommandCenterPage, CommandCenterJsxPage, PageVariablesPage, ContactFormPage],
+  pages: [ComponentGalleryPage, ProjectWorkspacePage, ProjectDetailPage, TaskWorkbenchPage, TaskTriagePage, TaskBoardPage, TaskCalendarPage, TaskGalleryPage, TaskSchedulePage, TaskTimelinePage, TaskMapPage, TaskAllViewsPage, ActiveProjectsPage, TaskDetailPage, AccountDetailPage, ReviewQueuePage, NewProjectWizardPage, MyWorkPage, SettingsPage, StylingGalleryPage, CommandCenterPage, CommandCenterJsxPage, CrmWorkbenchPage, PageVariablesPage, ContactFormPage],
   dashboards: [ChartGalleryDashboard, OpsDashboard],
   books: allBooks,
   datasets: [ShowcaseTaskDataset, ShowcaseProjectDataset],
diff --git a/examples/app-showcase/src/apps/index.ts b/examples/app-showcase/src/apps/index.ts
index 66940318b5..38bc657768 100644
--- a/examples/app-showcase/src/apps/index.ts
+++ b/examples/app-showcase/src/apps/index.ts
@@ -65,7 +65,8 @@ export const ShowcaseApp = App.create({
       icon: 'layout',
       children: [
         { id: 'nav_gallery', type: 'page', pageName: 'showcase_component_gallery', label: 'Component Gallery', icon: 'layout-template' },
-        { id: 'nav_command_center_jsx', type: 'page', pageName: 'showcase_command_center_jsx', label: 'Command Center (JSX)', icon: 'code' },
+        { id: 'nav_command_center_jsx', type: 'page', pageName: 'showcase_command_center_jsx', label: 'Command Center (HTML)', icon: 'code' },
+        { id: 'nav_crm_workbench', type: 'page', pageName: 'showcase_crm_workbench', label: 'CRM Workbench (React)', icon: 'layout-dashboard' },
         { id: 'nav_styling_gallery', type: 'page', pageName: 'showcase_styling_gallery', label: 'Styling (ADR-0065)', icon: 'palette' },
         { id: 'nav_page_variables', type: 'page', pageName: 'showcase_page_variables', label: 'Page Variables', icon: 'mouse-pointer-click' },
         { id: 'nav_contact_form', type: 'page', pageName: 'showcase_contact_form', label: 'Contact Form', icon: 'mail-plus' },
diff --git a/examples/app-showcase/src/pages/crm-workbench.page.ts b/examples/app-showcase/src/pages/crm-workbench.page.ts
new file mode 100644
index 0000000000..5d4780a850
--- /dev/null
+++ b/examples/app-showcase/src/pages/crm-workbench.page.ts
@@ -0,0 +1,116 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+import { definePage } from '@objectstack/spec/ui';
+
+/**
+ * CRM Workbench — a `kind:'react'` page (ADR-0081, the TRUSTED tier).
+ *
+ * The whole page is REAL React executed at render by `@object-ui/react-runtime`
+ * (hooks, event handlers, arbitrary JS) — NOT the constrained parse-never-execute
+ * `kind:'html'` tier. It demonstrates exactly what a real customer business UI
+ * needs: a master/detail workbench that COMPOSES the platform's real data
+ * components — `<ListView>` (the object table) and `<ObjectForm>` — with React
+ * state to wire complex interaction the fixed page schema cannot express:
+ *
+ *   - click a project row  → load that record into the editor (controlled `recordId`)
+ *   - save the form        → refresh the list (`onSuccess` bumps a remount key)
+ *   - "New project"        → the same editor in create mode
+ *   - a live KPI strip     → `useAdapter()` queries the object directly
+ *
+ * The injected scope exposes `React`, `useAdapter`, and the curated public data
+ * blocks as PascalCase components (`ListView`, `ObjectForm`, `ObjectMetric`, …),
+ * each a real registered renderer. Layout is plain HTML + Tailwind.
+ *
+ * NOTE: `kind:'react'` executes author code, so it is gated behind the host
+ * capability `CAP_REACT_PAGES` (default OFF). A trusted/enterprise deployment
+ * enables it from its host bootstrap — e.g. `enableCapability('react-pages')`
+ * or `globalThis.__OBJECTUI_CAPABILITIES__ = ['react-pages']`. Until then this
+ * page renders an "enterprise capability required" notice rather than executing.
+ */
+export const CrmWorkbenchPage = definePage({
+  name: 'showcase_crm_workbench',
+  label: 'CRM Workbench (React)',
+  type: 'home',
+  kind: 'react',
+  source: `
+function Page() {
+  const adapter = useAdapter();
+  const [selected, setSelected] = React.useState(null);
+  const [mode, setMode] = React.useState('edit');
+  const [reloadKey, setReloadKey] = React.useState(0);
+  const [stats, setStats] = React.useState({ total: 0, active: 0 });
+
+  const refreshStats = React.useCallback(async () => {
+    if (!adapter) return;
+    try {
+      const all = await adapter.find('showcase_project', { top: 200 });
+      const rows = Array.isArray(all) ? all : (all && all.records) || [];
+      setStats({ total: rows.length, active: rows.filter((r) => r.status === 'active').length });
+    } catch (e) { /* ignore in demo */ }
+  }, [adapter]);
+
+  React.useEffect(() => { refreshStats(); }, [refreshStats, reloadKey]);
+
+  const openNew = () => { setSelected(null); setMode('create'); };
+  const onRowClick = (rec) => { setSelected(rec); setMode('edit'); };
+  const afterSave = () => { setSelected(null); setMode('edit'); setReloadKey((k) => k + 1); };
+
+  const editing = mode === 'create' || selected;
+
+  return (
+    <div className="mx-auto max-w-6xl space-y-6 p-8">
+      <header className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight text-slate-900">CRM Workbench</h1>
+          <p className="mt-1 text-sm text-slate-500">Master/detail over <code>showcase_project</code> — real <code>&lt;ListView&gt;</code> + <code>&lt;ObjectForm&gt;</code> wired with React state.</p>
+        </div>
+        <button onClick={openNew} className="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">+ New project</button>
+      </header>
+
+      <div className="grid grid-cols-3 gap-4">
+        <div className="rounded-xl border border-slate-200 bg-white p-4">
+          <div className="text-xs font-medium uppercase tracking-wide text-slate-400">Total projects</div>
+          <div className="mt-1 text-3xl font-bold text-slate-900">{stats.total}</div>
+        </div>
+        <div className="rounded-xl border border-slate-200 bg-white p-4">
+          <div className="text-xs font-medium uppercase tracking-wide text-slate-400">Active</div>
+          <div className="mt-1 text-3xl font-bold text-emerald-600">{stats.active}</div>
+        </div>
+        <div className="rounded-xl border border-slate-200 bg-white p-4">
+          <div className="text-xs font-medium uppercase tracking-wide text-slate-400">Editing</div>
+          <div className="mt-1 truncate text-lg font-semibold text-slate-700">{mode === 'create' ? 'New project' : selected ? (selected.name || selected.id) : '—'}</div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-5 gap-6">
+        <section className="col-span-3 rounded-xl border border-slate-200 bg-white p-2">
+          <ListView
+            key={reloadKey}
+            objectName="showcase_project"
+            fields={['name', 'status', 'health', 'budget', 'owner']}
+            navigation={{ mode: 'none' }}
+            onRowClick={onRowClick}
+          />
+        </section>
+        <section className="col-span-2 rounded-xl border border-slate-200 bg-white p-5">
+          {editing ? (
+            <ObjectForm
+              key={(mode === 'create' ? 'new' : selected && selected.id) + ':' + reloadKey}
+              objectName="showcase_project"
+              mode={mode}
+              recordId={mode === 'edit' && selected ? selected.id : undefined}
+              onSuccess={afterSave}
+              onCancel={() => { setSelected(null); }}
+            />
+          ) : (
+            <div className="flex h-full min-h-[240px] flex-col items-center justify-center text-center text-slate-400">
+              <div className="text-4xl">🗂️</div>
+              <p className="mt-2 text-sm">Select a project to edit, or create a new one.</p>
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}`,
+});
diff --git a/examples/app-showcase/src/pages/index.ts b/examples/app-showcase/src/pages/index.ts
index 96a2e874fa..83be3b380c 100644
--- a/examples/app-showcase/src/pages/index.ts
+++ b/examples/app-showcase/src/pages/index.ts
@@ -16,6 +16,7 @@ export { SettingsPage } from './settings.page.js';
 export { StylingGalleryPage } from './styling-gallery.page.js';
 export { CommandCenterPage } from './command-center.page.js';
 export { CommandCenterJsxPage } from './command-center-jsx.page.js';
+export { CrmWorkbenchPage } from './crm-workbench.page.js';
 export { PageVariablesPage } from './page-variables.page.js';
 export { ContactFormPage } from './contact-form.page.js';
 export {

From 5fcebf62643a986293cd56a77071bccc1b0ee76e Mon Sep 17 00:00:00 2001
From: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Date: Tue, 30 Jun 2026 12:46:36 +0800
Subject: [PATCH 3/5] feat: kind:'react' defaults ON, disable server-side via
 OS_DISABLE_REACT_PAGES
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per platform-author decision the react tier is no longer enterprise-gated/
default-off. It runs author JS, so it stays behind a host capability — but that
capability defaults ON (trusted, reviewed, draft-gated authors). A deployment
that does not trust its authors disables it with one env var:

- cli: console serving injects window.__OBJECTUI_CAPABILITIES_DISABLED__ =
  ['react-pages'] into the served HTML when OS_DISABLE_REACT_PAGES is set
  (read per request, no rebuild).
- spec: kind describe reframed (default-on, OS_DISABLE_REACT_PAGES opt-out).
- ADR-0081 + showcase comment reframed away from enterprise-only.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .changeset/sdui-react-page-tier.md            | 11 +++++---
 docs/adr/0081-trusted-react-page-tier.md      | 15 +++++------
 .../src/pages/crm-workbench.page.ts           | 10 ++++----
 packages/cli/src/utils/console.ts             | 25 ++++++++++++++++---
 packages/spec/src/ui/page.zod.ts              |  5 ++--
 5 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/.changeset/sdui-react-page-tier.md b/.changeset/sdui-react-page-tier.md
index f8980d7c2b..7bd816899c 100644
--- a/.changeset/sdui-react-page-tier.md
+++ b/.changeset/sdui-react-page-tier.md
@@ -1,14 +1,19 @@
 ---
 "@objectstack/spec": minor
 "@objectstack/lint": minor
+"@objectstack/cli": minor
 ---
 
 ADR-0081: split the AI page-authoring surface into honest tiers.
 
 - `PageSchema.kind` gains `'html'` and `'react'`. `'html'` is the constrained
   parse-never-execute tier (the renamed `'jsx'`, kept as a deprecated alias);
-  `'react'` is the trusted real-React tier (executed at render by
-  `@object-ui/react-runtime`, gated behind a host capability, enterprise/private
-  only). The completeness gate now requires `source` for all three.
+  `'react'` is the real-React tier (executed at render by
+  `@object-ui/react-runtime`). It runs author JS, so it is gated by a host
+  capability that **defaults ON** (the platform trusts reviewed, draft-gated
+  authors) and is disabled **server-side** via the `OS_DISABLE_REACT_PAGES`
+  env var. The completeness gate now requires `source` for all three kinds.
+- `@objectstack/cli` console serving injects the disable global into the served
+  HTML when `OS_DISABLE_REACT_PAGES` is set (read per request, no rebuild).
 - `validate-jsx-pages` lints `html`/`jsx` (constrained parse) and intentionally
   skips `react` (real JS, not constrained JSX).
diff --git a/docs/adr/0081-trusted-react-page-tier.md b/docs/adr/0081-trusted-react-page-tier.md
index a0b58d396f..cd5e3a8119 100644
--- a/docs/adr/0081-trusted-react-page-tier.md
+++ b/docs/adr/0081-trusted-react-page-tier.md
@@ -7,7 +7,7 @@
 
 **Premise**: ADR-0080 shipped `kind:'jsx'` — a *constrained* JSX dialect parsed (never executed) into the SDUI tree. In practice that name oversold it: authors expected "JSX" to mean *any* HTML and *any* JavaScript (`useState`, `.map`, `onClick`), and the constrained, no-execution model categorically cannot do that. Two distinct things were conflated under one name. This ADR splits them: it makes the safe constrained tier **live up to a narrower, honest name (`html`)**, and adds a separate, explicitly-trusted **`react`** tier for the full-power case — available only where the operator accepts running author code.
 
-> **Trigger**: testing the merged `kind:'jsx'` feature, the author found it "名不副实" (misnamed) — basic HTML tags didn't render and scripts were impossible — and recognized that the real-React capability belongs behind a switch, enabled only in a trusted private/enterprise deployment where "running unsandboxed author code in the main React app" is an acceptable, deliberate trust decision.
+> **Trigger**: testing the merged `kind:'jsx'` feature, the author found it "名不副实" (misnamed) — basic HTML tags didn't render and scripts were impossible — and recognized that the real-React capability belongs behind a switch. The platform trusts its (reviewed, draft-gated) page authors, so that switch defaults ON; a deployment that does not trust its authors turns it off server-side. "Running author code in the main React app" is an accepted, default trust decision, reversible per deployment — not an enterprise-only feature.
 
 ---
 
@@ -16,7 +16,7 @@
 1. **[rename] `kind:'jsx'` → `kind:'html'`.** The constrained, parse-never-execute tier (ADR-0080) is renamed to match what it is: author-written **HTML + Tailwind** (expressed as constrained JSX) compiled to the SDUI tree. `'jsx'` stays as a **deprecated alias** (already-saved pages keep loading); all authored examples/docs move to `'html'`.
 2. **[capability] The `html` tier now resolves the full safe native HTML tag set.** Previously only `div/span/table/code/label` + semantic sectioning tags were registered, so `<h1>/<p>/<a>/<ul>/<li>/<img>/<blockquote>…` failed as `unknown-component`. They are now registered as passthrough renderers — the tier is finally honest about "HTML".
 3. **[new tier] `kind:'react'` executes real React.** Its `source` is real JS/JSX (hooks, `.map`, event handlers, expressions), transpiled (Sucrase) and evaluated **in the main React tree — no sandbox** — by the new `@object-ui/react-runtime`. This is `parse = execute`: the categorical opposite of the `html` tier.
-4. **[security = trust, not sandbox] `react` is gated by a host capability, default OFF.** `CAP_REACT_PAGES` is flipped only by the *host process* (`enableCapability('react-pages')`), never by authored metadata. Open-source / multi-tenant builds ship it **off**; enterprise / private deployments — where authors are trusted and changes pass human review (draft-gating, ADR-0033) — opt in. A sandbox (iframe/worker) is the tool for *untrusted* execution; we deliberately choose **trust + review** instead, which keeps the author's code a first-class citizen of the app (shared React tree, real components, real data) at the cost of requiring the operator's explicit consent.
+4. **[security = trust, not sandbox] `react` is gated by a host capability that defaults ON.** `CAP_REACT_PAGES` is controlled only by the *host*, never by authored metadata. It defaults ON because ObjectStack pages are authored by trusted authors and pass human review (draft-gating, ADR-0033). A deployment that does NOT trust its authors disables it **server-side** — the ObjectStack runtime injects the disable global when `OS_DISABLE_REACT_PAGES` is set (one env var, no rebuild). A sandbox (iframe/worker) is the tool for *untrusted* execution; we deliberately choose **trust + review** instead, which keeps the author's code a first-class citizen of the app (shared React tree, real components, real data). This is NOT an enterprise-only feature.
 5. **[runtime] Vendored, not depended.** `@object-ui/react-runtime` inlines the ~150-LOC react-runner core (MIT) so we fully own the injected **scope/imports surface** (the actual capability ceiling) and can **lazy-load** it — the transpiler ships in a separate chunk fetched only when a `react` page renders *with the capability on*.
 6. **[scope] Inject data blocks + React; leave layout to HTML.** The runtime scope exposes `React`, the curated **public data blocks** (`<ObjectTable>`, `<ObjectForm>`, charts, metrics — each a prop-driven wrapper over `SchemaRenderer`), a `<Block type=…/>` escape hatch, and the page `data`. Layout/structure is plain HTML + Tailwind (React's strength) — we do **not** bridge React children into schema-children renderers.
 7. **[lint] `react` is not linted by the constrained parser.** `validate-jsx-pages` (ADR-0080's build gate) validates `html`/`jsx` only; running the constrained JSX parser over real React source would false-error on hooks and expressions. The `react` tier's safety boundary is the **capability + human review**, not a static gate.
@@ -31,7 +31,7 @@
 | Processing | **parsed**, never executed → SDUI tree | transpiled + **executed** in the main React tree |
 | JavaScript | none (static literals) | full |
 | Safety model | safe by construction (no execution) | **trust** (capability + review); no sandbox |
-| Where it runs | OSS default ON | enterprise/private only, capability default **OFF** |
+| Where it runs | OSS default ON | default ON; disable server-side via `OS_DISABLE_REACT_PAGES` |
 | Author-time gate | `os build` constrained-parse lint | none (real JS); error boundary at render |
 | Contract | registry `inputs` (ADR-0080) | injected scope = the ceiling |
 
@@ -47,9 +47,10 @@ The dividing line is exactly ADR-0080 §2's "parse ≠ execute". `html` keeps th
 ### 2. Make `html` honest
 Register the safe native HTML flow/inline set (`h1–h6, p, a, ul/ol/li, dl/dt/dd, blockquote, pre, strong/em/b/i/u/small/mark/sub/sup, figure/figcaption, img, hr, br, time, address, …`) as passthrough renderers that forward standard attributes and recurse children. Excluded: anything already registered, and anything that can execute or escape (`script/style/iframe/object/embed/link/meta/form/input`, plus `button` which is the component). Defense-in-depth even though this tier never executes JS: strip `on*` handlers and `dangerouslySetInnerHTML`, neutralize `javascript:`/`data:` URLs on `<a href>`. Unknown attributes are warnings (the page still renders), per the ADR-0080 validator.
 
-### 3. Add `react` as a capability, not a default
-- **Gate**: `@object-ui/core` gains `enableCapability`/`disableCapability`/`isCapabilityEnabled` + `CAP_REACT_PAGES`. Default-closed. Host-only (a global pre-seed `globalThis.__OBJECTUI_CAPABILITIES__` is also honored for HTML-bootstrap hosts). It is structurally impossible to enable from authored metadata.
-- **Renderer**: PageRenderer routes `kind:'react'` to a renderer that — only when the capability is on — lazy-imports `@object-ui/react-runtime`, builds the scope, and renders via its error-boundaried `ReactRunner`. Capability off → a clear "this page requires the React-pages capability" notice, not a crash.
+### 3. Add `react` behind a host capability that defaults ON
+- **Gate**: `@object-ui/core` gains `enableCapability`/`disableCapability`/`isCapabilityEnabled` + `CAP_REACT_PAGES`. `react-pages` defaults ON. Host-only — it reads `globalThis.__OBJECTUI_CAPABILITIES_DISABLED__` (force off) and `__OBJECTUI_CAPABILITIES__` (force on); it is structurally impossible to flip from authored metadata.
+- **Server opt-out**: the ObjectStack console serving (framework `cli/utils/console.ts`) injects the disable global into the served HTML when `OS_DISABLE_REACT_PAGES` is set — one env var, read per request, no rebuild. This is the single server-side switch a deployment uses to turn the tier off.
+- **Renderer**: PageRenderer routes `kind:'react'` to a renderer that — when the capability is on — lazy-imports `@object-ui/react-runtime`, builds the scope, and renders via its error-boundaried `ReactRunner`. Capability off → a clear "React pages are disabled on this deployment" notice, not a crash.
 
 ### 4. Vendor the runtime; own the scope
 `@object-ui/react-runtime` inlines react-runner: `transform` (Sucrase `jsx`+`typescript`+`imports`, production), `generateElement` (eval with injected scope; `createRequire` resolves `require()` only against an explicit `imports` map — a control point), and `ReactRunner` (a component with `getDerivedStateFromError`). The capability ceiling is precisely the injected scope/imports — owning that file is why we vendor rather than depend.
@@ -62,4 +63,4 @@ Register the safe native HTML flow/inline set (`h1–h6, p, a, ul/ol/li, dl/dt/d
 - **Two safety stories, each clean.** `html` is safe by construction and stays the OSS/multi-tenant default. `react` is safe by *trust*, opt-in, and obviously so (you typed `enableCapability`).
 - **No build/deploy for either.** `html` compiles at save; `react` transpiles at render (lazy chunk). Neither needs a bundler in the author loop.
 - **AI fit.** AI writes both fluently. For `react`, correctness is bounded by the injected scope + human review (ADR-0033), not by hoping the model never writes a bad effect.
-- **Cost.** `react` runs author code in the main tree: a thrown render is caught by the error boundary, but an author can still write a slow/incorrect page. That is the accepted price of the trusted tier and the reason it is off by default. Revisit if a future need arises for *untrusted* rich pages — that would be a *different* ADR (sandboxed execution), not this one.
+- **Cost.** `react` runs author code in the main tree: a thrown render is caught by the error boundary, but an author can still write a slow/incorrect page. That is the accepted price of the trusted tier; a deployment that does not trust its authors flips `OS_DISABLE_REACT_PAGES`. Revisit if a future need arises for *untrusted* rich pages — that would be a *different* ADR (sandboxed execution), not this one.
diff --git a/examples/app-showcase/src/pages/crm-workbench.page.ts b/examples/app-showcase/src/pages/crm-workbench.page.ts
index 5d4780a850..ba72b792e9 100644
--- a/examples/app-showcase/src/pages/crm-workbench.page.ts
+++ b/examples/app-showcase/src/pages/crm-workbench.page.ts
@@ -21,11 +21,11 @@ import { definePage } from '@objectstack/spec/ui';
  * blocks as PascalCase components (`ListView`, `ObjectForm`, `ObjectMetric`, …),
  * each a real registered renderer. Layout is plain HTML + Tailwind.
  *
- * NOTE: `kind:'react'` executes author code, so it is gated behind the host
- * capability `CAP_REACT_PAGES` (default OFF). A trusted/enterprise deployment
- * enables it from its host bootstrap — e.g. `enableCapability('react-pages')`
- * or `globalThis.__OBJECTUI_CAPABILITIES__ = ['react-pages']`. Until then this
- * page renders an "enterprise capability required" notice rather than executing.
+ * NOTE: `kind:'react'` executes author code, so it is gated by the host
+ * capability `CAP_REACT_PAGES`, which defaults ON (the platform trusts its
+ * reviewed, draft-gated authors). A deployment that does not trust its authors
+ * turns it off server-side by setting `OS_DISABLE_REACT_PAGES`, in which case
+ * this page renders a "disabled on this deployment" notice instead of executing.
  */
 export const CrmWorkbenchPage = definePage({
   name: 'showcase_crm_workbench',
diff --git a/packages/cli/src/utils/console.ts b/packages/cli/src/utils/console.ts
index 9200d99305..d41d561f08 100644
--- a/packages/cli/src/utils/console.ts
+++ b/packages/cli/src/utils/console.ts
@@ -292,6 +292,17 @@ export function createConsoleStaticPlugin(distPath: string, options?: { isDev?:
         return;
       }
 
+      // A deployment that does not trust its page authors disables the
+      // `kind:'react'` tier (which executes author JS in the main React tree)
+      // by setting `OS_DISABLE_REACT_PAGES`. We inject the disable global the
+      // console's capability gate reads; the flag is ON by default otherwise.
+      // Read per request (env can change without a rebuild — index.html is
+      // re-read on every fallback hit too).
+      const reactPagesDisabled = (): boolean => {
+        const v = String(process.env.OS_DISABLE_REACT_PAGES ?? '').trim().toLowerCase();
+        return v === '1' || v === 'true' || v === 'yes' || v === 'on';
+      };
+
       const readIndexHtml = () => {
         const raw = fs.readFileSync(indexPath, 'utf-8');
         // Inject <base href="${CONSOLE_PATH}/"> so:
@@ -302,9 +313,17 @@ export function createConsoleStaticPlugin(distPath: string, options?: { isDev?:
         //      build from being pinned to a specific mount.
         //
         // Idempotent — bails if the build already shipped a <base>.
-        if (/<base\s/i.test(raw)) return raw;
-        const baseTag = `<base href="${CONSOLE_PATH}/">`;
-        return raw.replace(/<head(\s[^>]*)?>/i, (m) => `${m}\n    ${baseTag}`);
+        let html = raw;
+        if (!/<base\s/i.test(html)) {
+          const baseTag = `<base href="${CONSOLE_PATH}/">`;
+          html = html.replace(/<head(\s[^>]*)?>/i, (m) => `${m}\n    ${baseTag}`);
+        }
+        if (reactPagesDisabled()) {
+          const capTag =
+            `<script>window.__OBJECTUI_CAPABILITIES_DISABLED__=(window.__OBJECTUI_CAPABILITIES_DISABLED__||[]).concat('react-pages');</script>`;
+          html = html.replace(/<head(\s[^>]*)?>/i, (m) => `${m}\n    ${capTag}`);
+        }
+        return html;
       };
 
       // The Console is the default end-user surface — root `/` redirects
diff --git a/packages/spec/src/ui/page.zod.ts b/packages/spec/src/ui/page.zod.ts
index 5a8f3b992d..39ee737f2b 100644
--- a/packages/spec/src/ui/page.zod.ts
+++ b/packages/spec/src/ui/page.zod.ts
@@ -363,8 +363,9 @@ export const PageSchema = lazySchema(() => z.object({
       "Page override mode. full | slotted = structured authoring; " +
       "html = author-written constrained JSX/HTML+Tailwind compiled (parsed, never " +
       "executed) to the tree (ADR-0080; the legacy value 'jsx' is a deprecated alias); " +
-      "react = TRUSTED real-React source executed at render by the runtime (ADR-0081), " +
-      "gated to enterprise/private deployments.",
+      "react = real-React source executed at render by the runtime (ADR-0081); it " +
+      "runs author JS, so it is gated by a host capability that defaults ON and is " +
+      "disabled server-side via OS_DISABLE_REACT_PAGES.",
     ),
 
   /**

From 301ca81e473c3967fe627761907a21b4169230d1 Mon Sep 17 00:00:00 2001
From: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Date: Tue, 30 Jun 2026 13:06:44 +0800
Subject: [PATCH 4/5] refactor: rename env toggle OS_DISABLE_REACT_PAGES ->
 OS_PAGE_REACT (off disables)

Page-namespaced toggle reads cleaner than an OS_DISABLE_* flag: default on,
OS_PAGE_REACT=off disables. Updates cli console injection logic, spec describe,
ADR-0081, showcase comment, changeset.
---
 .changeset/sdui-react-page-tier.md               |  6 +++---
 docs/adr/0081-trusted-react-page-tier.md         |  8 ++++----
 .../app-showcase/src/pages/crm-workbench.page.ts |  2 +-
 packages/cli/src/utils/console.ts                | 16 ++++++++--------
 packages/spec/src/ui/page.zod.ts                 |  2 +-
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/.changeset/sdui-react-page-tier.md b/.changeset/sdui-react-page-tier.md
index 7bd816899c..cb58754a07 100644
--- a/.changeset/sdui-react-page-tier.md
+++ b/.changeset/sdui-react-page-tier.md
@@ -11,9 +11,9 @@ ADR-0081: split the AI page-authoring surface into honest tiers.
   `'react'` is the real-React tier (executed at render by
   `@object-ui/react-runtime`). It runs author JS, so it is gated by a host
   capability that **defaults ON** (the platform trusts reviewed, draft-gated
-  authors) and is disabled **server-side** via the `OS_DISABLE_REACT_PAGES`
-  env var. The completeness gate now requires `source` for all three kinds.
+  authors) and is disabled **server-side** via the `OS_PAGE_REACT=off`
+  env toggle. The completeness gate now requires `source` for all three kinds.
 - `@objectstack/cli` console serving injects the disable global into the served
-  HTML when `OS_DISABLE_REACT_PAGES` is set (read per request, no rebuild).
+  HTML when `OS_PAGE_REACT=off` (read per request, no rebuild).
 - `validate-jsx-pages` lints `html`/`jsx` (constrained parse) and intentionally
   skips `react` (real JS, not constrained JSX).
diff --git a/docs/adr/0081-trusted-react-page-tier.md b/docs/adr/0081-trusted-react-page-tier.md
index cd5e3a8119..1b4dcc80f9 100644
--- a/docs/adr/0081-trusted-react-page-tier.md
+++ b/docs/adr/0081-trusted-react-page-tier.md
@@ -16,7 +16,7 @@
 1. **[rename] `kind:'jsx'` → `kind:'html'`.** The constrained, parse-never-execute tier (ADR-0080) is renamed to match what it is: author-written **HTML + Tailwind** (expressed as constrained JSX) compiled to the SDUI tree. `'jsx'` stays as a **deprecated alias** (already-saved pages keep loading); all authored examples/docs move to `'html'`.
 2. **[capability] The `html` tier now resolves the full safe native HTML tag set.** Previously only `div/span/table/code/label` + semantic sectioning tags were registered, so `<h1>/<p>/<a>/<ul>/<li>/<img>/<blockquote>…` failed as `unknown-component`. They are now registered as passthrough renderers — the tier is finally honest about "HTML".
 3. **[new tier] `kind:'react'` executes real React.** Its `source` is real JS/JSX (hooks, `.map`, event handlers, expressions), transpiled (Sucrase) and evaluated **in the main React tree — no sandbox** — by the new `@object-ui/react-runtime`. This is `parse = execute`: the categorical opposite of the `html` tier.
-4. **[security = trust, not sandbox] `react` is gated by a host capability that defaults ON.** `CAP_REACT_PAGES` is controlled only by the *host*, never by authored metadata. It defaults ON because ObjectStack pages are authored by trusted authors and pass human review (draft-gating, ADR-0033). A deployment that does NOT trust its authors disables it **server-side** — the ObjectStack runtime injects the disable global when `OS_DISABLE_REACT_PAGES` is set (one env var, no rebuild). A sandbox (iframe/worker) is the tool for *untrusted* execution; we deliberately choose **trust + review** instead, which keeps the author's code a first-class citizen of the app (shared React tree, real components, real data). This is NOT an enterprise-only feature.
+4. **[security = trust, not sandbox] `react` is gated by a host capability that defaults ON.** `CAP_REACT_PAGES` is controlled only by the *host*, never by authored metadata. It defaults ON because ObjectStack pages are authored by trusted authors and pass human review (draft-gating, ADR-0033). A deployment that does NOT trust its authors disables it **server-side** — the ObjectStack runtime injects the disable global when `OS_PAGE_REACT=off` (one env toggle, no rebuild). A sandbox (iframe/worker) is the tool for *untrusted* execution; we deliberately choose **trust + review** instead, which keeps the author's code a first-class citizen of the app (shared React tree, real components, real data). This is NOT an enterprise-only feature.
 5. **[runtime] Vendored, not depended.** `@object-ui/react-runtime` inlines the ~150-LOC react-runner core (MIT) so we fully own the injected **scope/imports surface** (the actual capability ceiling) and can **lazy-load** it — the transpiler ships in a separate chunk fetched only when a `react` page renders *with the capability on*.
 6. **[scope] Inject data blocks + React; leave layout to HTML.** The runtime scope exposes `React`, the curated **public data blocks** (`<ObjectTable>`, `<ObjectForm>`, charts, metrics — each a prop-driven wrapper over `SchemaRenderer`), a `<Block type=…/>` escape hatch, and the page `data`. Layout/structure is plain HTML + Tailwind (React's strength) — we do **not** bridge React children into schema-children renderers.
 7. **[lint] `react` is not linted by the constrained parser.** `validate-jsx-pages` (ADR-0080's build gate) validates `html`/`jsx` only; running the constrained JSX parser over real React source would false-error on hooks and expressions. The `react` tier's safety boundary is the **capability + human review**, not a static gate.
@@ -31,7 +31,7 @@
 | Processing | **parsed**, never executed → SDUI tree | transpiled + **executed** in the main React tree |
 | JavaScript | none (static literals) | full |
 | Safety model | safe by construction (no execution) | **trust** (capability + review); no sandbox |
-| Where it runs | OSS default ON | default ON; disable server-side via `OS_DISABLE_REACT_PAGES` |
+| Where it runs | OSS default ON | default ON; disable server-side via `OS_PAGE_REACT=off` |
 | Author-time gate | `os build` constrained-parse lint | none (real JS); error boundary at render |
 | Contract | registry `inputs` (ADR-0080) | injected scope = the ceiling |
 
@@ -49,7 +49,7 @@ Register the safe native HTML flow/inline set (`h1–h6, p, a, ul/ol/li, dl/dt/d
 
 ### 3. Add `react` behind a host capability that defaults ON
 - **Gate**: `@object-ui/core` gains `enableCapability`/`disableCapability`/`isCapabilityEnabled` + `CAP_REACT_PAGES`. `react-pages` defaults ON. Host-only — it reads `globalThis.__OBJECTUI_CAPABILITIES_DISABLED__` (force off) and `__OBJECTUI_CAPABILITIES__` (force on); it is structurally impossible to flip from authored metadata.
-- **Server opt-out**: the ObjectStack console serving (framework `cli/utils/console.ts`) injects the disable global into the served HTML when `OS_DISABLE_REACT_PAGES` is set — one env var, read per request, no rebuild. This is the single server-side switch a deployment uses to turn the tier off.
+- **Server opt-out**: the ObjectStack console serving (framework `cli/utils/console.ts`) injects the disable global into the served HTML when `OS_PAGE_REACT=off` — one env toggle, read per request, no rebuild. This is the single server-side switch a deployment uses to turn the tier off.
 - **Renderer**: PageRenderer routes `kind:'react'` to a renderer that — when the capability is on — lazy-imports `@object-ui/react-runtime`, builds the scope, and renders via its error-boundaried `ReactRunner`. Capability off → a clear "React pages are disabled on this deployment" notice, not a crash.
 
 ### 4. Vendor the runtime; own the scope
@@ -63,4 +63,4 @@ Register the safe native HTML flow/inline set (`h1–h6, p, a, ul/ol/li, dl/dt/d
 - **Two safety stories, each clean.** `html` is safe by construction and stays the OSS/multi-tenant default. `react` is safe by *trust*, opt-in, and obviously so (you typed `enableCapability`).
 - **No build/deploy for either.** `html` compiles at save; `react` transpiles at render (lazy chunk). Neither needs a bundler in the author loop.
 - **AI fit.** AI writes both fluently. For `react`, correctness is bounded by the injected scope + human review (ADR-0033), not by hoping the model never writes a bad effect.
-- **Cost.** `react` runs author code in the main tree: a thrown render is caught by the error boundary, but an author can still write a slow/incorrect page. That is the accepted price of the trusted tier; a deployment that does not trust its authors flips `OS_DISABLE_REACT_PAGES`. Revisit if a future need arises for *untrusted* rich pages — that would be a *different* ADR (sandboxed execution), not this one.
+- **Cost.** `react` runs author code in the main tree: a thrown render is caught by the error boundary, but an author can still write a slow/incorrect page. That is the accepted price of the trusted tier; a deployment that does not trust its authors sets `OS_PAGE_REACT=off`. Revisit if a future need arises for *untrusted* rich pages — that would be a *different* ADR (sandboxed execution), not this one.
diff --git a/examples/app-showcase/src/pages/crm-workbench.page.ts b/examples/app-showcase/src/pages/crm-workbench.page.ts
index ba72b792e9..d79ed4c7db 100644
--- a/examples/app-showcase/src/pages/crm-workbench.page.ts
+++ b/examples/app-showcase/src/pages/crm-workbench.page.ts
@@ -24,7 +24,7 @@ import { definePage } from '@objectstack/spec/ui';
  * NOTE: `kind:'react'` executes author code, so it is gated by the host
  * capability `CAP_REACT_PAGES`, which defaults ON (the platform trusts its
  * reviewed, draft-gated authors). A deployment that does not trust its authors
- * turns it off server-side by setting `OS_DISABLE_REACT_PAGES`, in which case
+ * turns it off server-side with `OS_PAGE_REACT=off`, in which case
  * this page renders a "disabled on this deployment" notice instead of executing.
  */
 export const CrmWorkbenchPage = definePage({
diff --git a/packages/cli/src/utils/console.ts b/packages/cli/src/utils/console.ts
index d41d561f08..f20c881f64 100644
--- a/packages/cli/src/utils/console.ts
+++ b/packages/cli/src/utils/console.ts
@@ -292,15 +292,15 @@ export function createConsoleStaticPlugin(distPath: string, options?: { isDev?:
         return;
       }
 
-      // A deployment that does not trust its page authors disables the
-      // `kind:'react'` tier (which executes author JS in the main React tree)
-      // by setting `OS_DISABLE_REACT_PAGES`. We inject the disable global the
-      // console's capability gate reads; the flag is ON by default otherwise.
-      // Read per request (env can change without a rebuild — index.html is
-      // re-read on every fallback hit too).
+      // The `kind:'react'` page tier (executes author JS in the main React
+      // tree) is ON by default. A deployment that does not trust its page
+      // authors turns it off with `OS_PAGE_REACT=off`; we then inject the
+      // disable global the console's capability gate reads. Read per request
+      // (env can change without a rebuild — index.html is re-read on every
+      // fallback hit too).
       const reactPagesDisabled = (): boolean => {
-        const v = String(process.env.OS_DISABLE_REACT_PAGES ?? '').trim().toLowerCase();
-        return v === '1' || v === 'true' || v === 'yes' || v === 'on';
+        const v = String(process.env.OS_PAGE_REACT ?? '').trim().toLowerCase();
+        return v === 'off' || v === '0' || v === 'false' || v === 'no' || v === 'disabled';
       };
 
       const readIndexHtml = () => {
diff --git a/packages/spec/src/ui/page.zod.ts b/packages/spec/src/ui/page.zod.ts
index 39ee737f2b..9768daa532 100644
--- a/packages/spec/src/ui/page.zod.ts
+++ b/packages/spec/src/ui/page.zod.ts
@@ -365,7 +365,7 @@ export const PageSchema = lazySchema(() => z.object({
       "executed) to the tree (ADR-0080; the legacy value 'jsx' is a deprecated alias); " +
       "react = real-React source executed at render by the runtime (ADR-0081); it " +
       "runs author JS, so it is gated by a host capability that defaults ON and is " +
-      "disabled server-side via OS_DISABLE_REACT_PAGES.",
+      "disabled server-side via the OS_PAGE_REACT=off env toggle.",
     ),
 
   /**

From 476b7a4a27e4933b7e53cdcf86511b4053d82f33 Mon Sep 17 00:00:00 2001
From: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Date: Tue, 30 Jun 2026 13:11:38 +0800
Subject: [PATCH 5/5] feat(skill,lint): document html/react page tiers +
 react-source syntax gate
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- objectstack-ui skill: new section on the source-authoring tiers — when to use
  kind:'html' (constrained, parsed) vs kind:'react' (real React, executed), the
  injected react scope (React/useAdapter/ObjectForm/ListView/...), a master-detail
  example, and the OS_PAGE_REACT availability note. The AI build agent now knows
  the tiers exist.
- lint: validate-react-pages transpiles kind:'react' source (Sucrase, never
  executed) so syntax errors fail at os build, not at render. Wired into
  os validate (ADR-0081). +tests (93 lint tests green).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .changeset/sdui-react-page-tier.md            |  5 +-
 packages/cli/src/commands/validate.ts         | 28 +++++-
 packages/lint/package.json                    |  5 +-
 packages/lint/src/index.ts                    |  2 +
 .../lint/src/validate-react-pages.test.ts     | 33 +++++++
 packages/lint/src/validate-react-pages.ts     | 64 +++++++++++++
 pnpm-lock.yaml                                |  3 +
 skills/objectstack-ui/SKILL.md                | 90 +++++++++++++++++++
 8 files changed, 225 insertions(+), 5 deletions(-)
 create mode 100644 packages/lint/src/validate-react-pages.test.ts
 create mode 100644 packages/lint/src/validate-react-pages.ts

diff --git a/.changeset/sdui-react-page-tier.md b/.changeset/sdui-react-page-tier.md
index cb58754a07..17117a8dd3 100644
--- a/.changeset/sdui-react-page-tier.md
+++ b/.changeset/sdui-react-page-tier.md
@@ -15,5 +15,6 @@ ADR-0081: split the AI page-authoring surface into honest tiers.
   env toggle. The completeness gate now requires `source` for all three kinds.
 - `@objectstack/cli` console serving injects the disable global into the served
   HTML when `OS_PAGE_REACT=off` (read per request, no rebuild).
-- `validate-jsx-pages` lints `html`/`jsx` (constrained parse) and intentionally
-  skips `react` (real JS, not constrained JSX).
+- `validate-jsx-pages` lints `html`/`jsx` (constrained parse). A new
+  `validate-react-pages` transpiles `react` source with Sucrase (transpile-only,
+  never executed) so syntax errors fail at `os build` instead of at render.
diff --git a/packages/cli/src/commands/validate.ts b/packages/cli/src/commands/validate.ts
index e0c6084cdf..a8596e0d10 100644
--- a/packages/cli/src/commands/validate.ts
+++ b/packages/cli/src/commands/validate.ts
@@ -11,7 +11,7 @@ import { loadConfig } from '../utils/config.js';
 import { validateStackExpressions } from '@objectstack/lint';
 import { validateWidgetBindings } from '@objectstack/lint';
 import { validateResponsiveStyles } from '@objectstack/lint';
-import { validateJsxPages } from '@objectstack/lint';
+import { validateJsxPages, validateReactPages } from '@objectstack/lint';
 import {
   printHeader,
   printKV,
@@ -214,6 +214,32 @@ export default class Validate extends Command {
         this.exit(1);
       }
 
+      // 3c. React-source pages (ADR-0081) — a kind:'react' page's `source` is
+      //     real React executed at render. Transpile it now (Sucrase, never
+      //     executed) so syntax errors fail loudly at build, not at render.
+      if (!flags.json) printStep('Checking React-source pages (ADR-0081)...');
+      const reactFindings = validateReactPages(result.data as Record<string, unknown>);
+      const reactErrors = reactFindings.filter((f) => f.severity === 'error');
+      if (reactErrors.length > 0) {
+        if (flags.json) {
+          console.log(JSON.stringify({
+            valid: false,
+            errors: reactErrors,
+            warnings: [...widgetWarnings, ...styleWarnings, ...jsxWarnings],
+            duration: timer.elapsed(),
+          }, null, 2));
+          this.exit(1);
+        }
+        console.log('');
+        printError(`React-source page check failed (${reactErrors.length} issue${reactErrors.length > 1 ? 's' : ''})`);
+        for (const f of reactErrors.slice(0, 50)) {
+          console.log(`  \u2022 ${f.where}: ${f.message}`);
+          console.log(chalk.dim(`      ${f.hint}`));
+          console.log(chalk.dim(`      rule: ${f.rule}  at ${f.path}`));
+        }
+        this.exit(1);
+      }
+
       // 4. Collect and display stats
       const stats = collectMetadataStats(config);
 
diff --git a/packages/lint/package.json b/packages/lint/package.json
index 637dd9724a..4cd34fc12f 100644
--- a/packages/lint/package.json
+++ b/packages/lint/package.json
@@ -2,7 +2,7 @@
   "name": "@objectstack/lint",
   "version": "11.3.0",
   "license": "Apache-2.0",
-  "description": "Static, build-time validation for an ObjectStack metadata graph — dashboard widget bindings, CEL/predicate expressions, and more. Pure (stack) => Issue[] functions shared by the CLI's `os validate` and any other consumer (e.g. AI authoring). Depends on @objectstack/spec; never on a runtime.",
+  "description": "Static, build-time validation for an ObjectStack metadata graph \u2014 dashboard widget bindings, CEL/predicate expressions, and more. Pure (stack) => Issue[] functions shared by the CLI's `os validate` and any other consumer (e.g. AI authoring). Depends on @objectstack/spec; never on a runtime.",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,7 +22,8 @@
   "dependencies": {
     "@objectstack/spec": "workspace:*",
     "@objectstack/formula": "workspace:*",
-    "@objectstack/sdui-parser": "workspace:*"
+    "@objectstack/sdui-parser": "workspace:*",
+    "sucrase": "^3.35.0"
   },
   "devDependencies": {
     "@types/node": "^26.0.1",
diff --git a/packages/lint/src/index.ts b/packages/lint/src/index.ts
index c93cf8d5de..f145019e5f 100644
--- a/packages/lint/src/index.ts
+++ b/packages/lint/src/index.ts
@@ -37,6 +37,8 @@ export {
 export type { StyleFinding, StyleSeverity } from './validate-responsive-styles.js';
 export { validateJsxPages } from './validate-jsx-pages.js';
 export type { JsxPageFinding, JsxPageSeverity } from './validate-jsx-pages.js';
+export { validateReactPages } from './validate-react-pages.js';
+export type { ReactPageFinding, ReactPageSeverity } from './validate-react-pages.js';
 
 export {
   validateRecordTitle,
diff --git a/packages/lint/src/validate-react-pages.test.ts b/packages/lint/src/validate-react-pages.test.ts
new file mode 100644
index 0000000000..35274b154f
--- /dev/null
+++ b/packages/lint/src/validate-react-pages.test.ts
@@ -0,0 +1,33 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+import { describe, it, expect } from 'vitest';
+import { validateReactPages } from './validate-react-pages.js';
+
+describe('validateReactPages (ADR-0081 syntax gate)', () => {
+  it('passes a well-formed react page', () => {
+    const stack = {
+      pages: [{
+        name: 'wb', kind: 'react',
+        source: 'function Page(){ const [n,setN]=React.useState(0); return <button onClick={()=>setN(n+1)}>{n}</button>; }',
+      }],
+    };
+    expect(validateReactPages(stack)).toEqual([]);
+  });
+
+  it('flags an empty source', () => {
+    const f = validateReactPages({ pages: [{ name: 'wb', kind: 'react' }] });
+    expect(f.some((x) => x.rule === 'react-page-empty-source')).toBe(true);
+  });
+
+  it('flags a syntax error (unterminated JSX), at the source path', () => {
+    const f = validateReactPages({ pages: [{ name: 'wb', kind: 'react', source: 'function Page(){ return <div>oops; }' }] });
+    expect(f.some((x) => x.rule === 'react-page-syntax' && x.severity === 'error')).toBe(true);
+    expect(f.every((x) => x.path === 'pages[0].source')).toBe(true);
+  });
+
+  it('ignores non-react pages (html/full)', () => {
+    expect(validateReactPages({ pages: [
+      { name: 'h', kind: 'html', source: '<flex/>' },
+      { name: 'f', kind: 'full', regions: [] },
+    ] })).toEqual([]);
+  });
+});
diff --git a/packages/lint/src/validate-react-pages.ts b/packages/lint/src/validate-react-pages.ts
new file mode 100644
index 0000000000..67b4ffa527
--- /dev/null
+++ b/packages/lint/src/validate-react-pages.ts
@@ -0,0 +1,64 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+//
+// Build-time syntax gate for `kind:'react'` pages (ADR-0081).
+//
+// A react page's `source` is REAL JavaScript/JSX executed at render by the
+// runtime — so the constrained JSX parser (validate-jsx-pages) cannot check it.
+// We instead transpile it with Sucrase (the same transpiler the runtime uses),
+// transpile-ONLY — never executed — to surface syntax errors at `os build`
+// instead of at render (ADR-0078: fail loudly at author time). It does NOT
+// validate runtime behaviour (a transpiling page can still throw at render);
+// the render-time error boundary owns that.
+
+import { transform } from 'sucrase';
+
+export type ReactPageSeverity = 'error' | 'warning';
+
+export interface ReactPageFinding {
+  severity: ReactPageSeverity;
+  rule: string;
+  where: string;
+  path: string;
+  message: string;
+  hint: string;
+}
+
+type AnyRec = Record<string, unknown>;
+const asArray = (v: unknown): AnyRec[] => (Array.isArray(v) ? (v as AnyRec[]) : []);
+
+export function validateReactPages(stack: AnyRec): ReactPageFinding[] {
+  const findings: ReactPageFinding[] = [];
+  const pages = asArray(stack.pages);
+  for (let p = 0; p < pages.length; p++) {
+    const page = pages[p];
+    if (!page || page.kind !== 'react') continue;
+    const name = String(page.name ?? `#${p}`);
+    const source = page.source;
+    if (typeof source !== 'string' || source.trim() === '') {
+      findings.push({
+        severity: 'error',
+        rule: 'react-page-empty-source',
+        where: `page "${name}"`,
+        path: `pages[${p}].source`,
+        message: "kind:'react' page has no `source`.",
+        hint: 'Author the page as a real React component string in `source`.',
+      });
+      continue;
+    }
+    try {
+      // transpile-only (no eval) — catches syntax errors, unterminated JSX, etc.
+      transform(source, { transforms: ['jsx', 'typescript'], production: true });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      findings.push({
+        severity: 'error',
+        rule: 'react-page-syntax',
+        where: `page "${name}"`,
+        path: `pages[${p}].source`,
+        message: `kind:'react' source has a syntax error: ${message.split('\n')[0]}`,
+        hint: 'The source is transpiled (never executed) at build to catch syntax errors early — fix the JS/JSX.',
+      });
+    }
+  }
+  return findings;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f56409ba46..3079677d9d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -792,6 +792,9 @@ importers:
       '@objectstack/spec':
         specifier: workspace:*
         version: link:../spec
+      sucrase:
+        specifier: ^3.35.0
+        version: 3.35.1
     devDependencies:
       '@types/node':
         specifier: ^26.0.1
diff --git a/skills/objectstack-ui/SKILL.md b/skills/objectstack-ui/SKILL.md
index b7fe0bd9c9..afbd12808d 100644
--- a/skills/objectstack-ui/SKILL.md
+++ b/skills/objectstack-ui/SKILL.md
@@ -721,6 +721,96 @@ export const LeadDetailPage = definePage({
 > `page:header.properties.actions`; do **not** create a sibling action node.
 > The header renders them inline in the action slot.
 
+### AI-authored *source* pages — `kind:'html'` and `kind:'react'` (ADR-0080/0081)
+
+Besides the structured `regions` model above, a page's whole body can be written
+as a *source string* in `source`, with `kind` choosing the authoring tier. Pick
+by what the page needs:
+
+| `kind` | Author writes | JS runs? | Use when |
+|:--|:--|:--|:--|
+| `full` / `slotted` | structured `regions` / `slots` (no `source`) | — | record/detail/home layouts from the component catalogue |
+| `html` | constrained JSX = HTML + Tailwind + registered components, **parsed, never executed** | no | free-form layout / landing / dashboard that just *composes* blocks — AI's HTML+Tailwind strength, no interactivity |
+| `react` | **real React** (hooks, `.map`, `onClick`, expressions) | yes (main React tree) | complex interactive business UIs — master/detail, wizards, state-driven filters |
+
+`source` is the source-of-truth in both source tiers; `regions` is ignored. A
+`kind:'html'`/`'react'` page with no `source` fails the build (ADR-0078). The legacy
+value `kind:'jsx'` is a deprecated alias for `kind:'html'`.
+
+#### `kind:'html'` — constrained JSX, parsed (safe by construction)
+
+Tags are the **registered components** (bare names: `<flex>`, `<grid>`, `<card>`,
+`<object-table>`, `<object-form>`, `<object-metric>`, …) **plus the safe native HTML
+set** (`<h1>`–`<h6>`, `<p>`, `<a>`, `<ul>/<ol>/<li>`, `<img>`, `<blockquote>`, `<strong>`,
+…). Props come from each component's registry `inputs` (e.g. `<text content=…>`,
+`<badge label=…>`). **No JavaScript** — `onClick`, `{expr}` logic and `.map()` are NOT
+available; use `kind:'react'` for those. `os build` parses the source and fails loudly
+on unknown tags / missing required props / forbidden constructs (event handlers,
+`dangerouslySetInnerHTML`).
+
+```typescript
+export const ReleaseNotesPage = definePage({
+  name: 'release_notes', type: 'home', kind: 'html',
+  source: `
+<section className="mx-auto max-w-3xl p-10">
+  <h1 className="text-4xl font-bold">Release Notes</h1>
+  <object-metric objectName="ticket" aggregate="count" label="Open tickets" className="mt-6" />
+</section>`,
+});
+```
+
+#### `kind:'react'` — real React, executed (trusted tier)
+
+The source is real React executed at render by the runtime. The injected scope are
+**closure variables (NOT props)** — reference them directly:
+
+- `React` — hooks (`React.useState`, `React.useEffect`, …)
+- `useAdapter()` — live data: `adapter.find('obj', {…})` / `.findOne` / `.create` / `.update`
+- the public **data blocks as PascalCase components** — `<ObjectForm>`, `<ListView>`,
+  `<ObjectMetric>`, `<ObjectChart>`, `<ObjectKanban>`, … each rendering the real registered
+  component; `<Block type="…" …/>` is the escape hatch for any other type
+- `data` / `variables` / `page`
+
+Compose **layout with plain HTML + Tailwind** (React's strength); use the injected
+blocks for data. Real component props/callbacks flow through — e.g. `<ObjectForm>` honors
+`objectName` / `mode` / `recordId` / `onSuccess` / `onCancel`; `<ListView>` honors
+`objectName` / `fields` / `onRowClick` / `navigation`.
+
+Master/detail (click a row → edit it → save refreshes the list):
+
+```tsx
+export const CrmWorkbenchPage = definePage({
+  name: 'crm_workbench', type: 'home', kind: 'react',
+  source: `
+function Page() {
+  const [sel, setSel] = React.useState(null);
+  const [reload, setReload] = React.useState(0);
+  return (
+    <div className="grid grid-cols-5 gap-6 p-8">
+      <div className="col-span-3">
+        <ListView key={reload} objectName="project"
+          fields={['name','status','owner']} navigation={{ mode: 'none' }}
+          onRowClick={(r) => setSel(r)} />
+      </div>
+      <div className="col-span-2">
+        {sel
+          ? <ObjectForm objectName="project" mode="edit" recordId={sel.id}
+              onSuccess={() => { setSel(null); setReload((k) => k + 1); }} />
+          : <p className="text-slate-400">Select a project to edit.</p>}
+      </div>
+    </div>
+  );
+}`,
+});
+```
+
+**Safety / availability.** `kind:'react'` executes author code in the app, so it is gated
+by the host capability `react-pages` — **ON by default** (the platform trusts reviewed,
+draft-gated authors). A deployment that does not trust its authors turns it off server-side
+with `OS_PAGE_REACT=off`; the page then shows a "disabled" notice instead of executing.
+`os build` does NOT lint react source (it is real JS, not constrained JSX) — errors surface
+at render behind an error boundary, so always test a react page in the browser.
+
 ### Styling a page (ADR-0065) — `responsiveStyles`, NOT `className`
 
 To style a metadata-authored block, give it a **`responsiveStyles`** object — a