Skip to content

docs(showcase): dogfood the react-tier authoring loop + golden Renewals page (ADR-0081)#2489

Merged
os-zhuang merged 1 commit into
mainfrom
chore/react-dogfood
Jun 30, 2026
Merged

docs(showcase): dogfood the react-tier authoring loop + golden Renewals page (ADR-0081)#2489
os-zhuang merged 1 commit into
mainfrom
chore/react-dogfood

Conversation

@os-zhuang

Copy link
Copy Markdown
Contributor

What

End-to-end proof that the react-tier authoring loop closes — the thing the tier was built for: an author (human or AI) writes a kind:'react' page knowing every component's props from the contract, and os validate catches them when they don't.

Not "the gate has unit tests" — a real run through the real CLI on the real showcase app.

The loop

  1. Generated contractskills/objectstack-ui/references/react-blocks.md (generated from the spec schemas) lists every injected block and the exact props it accepts.
  2. Author reads it — new examples/app-showcase/src/pages/renewals-pipeline.page.ts: a Renewals Pipeline scenario exercising five server-connected blocks (ListView, RecordHighlights, ObjectChart, RecordRelatedList, ObjectForm as a drawer), every prop taken straight from the contract.
  3. Validate enforces itos validate step 3d (validateReactPageProps, ADR-0081 Phase 2) parses the real JSX and checks usage against the contract.

Evidence (in the audit doc)

Authored correctly → passes:

→ Checking React-source page props (ADR-0081)...
✓ Validation passed (98ms)            # exit 0

Authored wrong → caught (dropped required objectName on <ObjectChart>, onSucces typo on <ObjectForm>):

⚠ <ObjectForm>: has prop "onSucces" — did you mean "onSuccess"?
✗ React-source page prop check failed (1 issue)
  • <ObjectChart>: missing the required prop "objectName".
      rule: react-prop-missing-required               # exit 1

Changes

  • renewals-pipeline.page.ts — the golden, validated example page (stays in the showcase).
  • pages/index.ts + objectstack.config.ts — wire it into the stack.
  • docs/audits/2026-06-react-tier-authoring-dogfood.md — the dogfood writeup + captured runs.

Validates clean; tsc --noEmit green.

🤖 Generated with Claude Code

…ls page (ADR-0081)

End-to-end proof that the react-tier loop closes: a kind:'react' page authored
straight from the generated component contract (react-blocks.md) passes
`os validate`, and the same page with a wrong prop is caught.

- examples/app-showcase: add renewals-pipeline.page.ts — a Renewals Pipeline
  scenario exercising five server-connected blocks (ListView, RecordHighlights,
  ObjectChart, RecordRelatedList, ObjectForm-as-drawer), every prop taken from
  the contract. Wired into the stack; validates clean; typechecks.
- docs/audits/2026-06-react-tier-authoring-dogfood.md: captures the run — clean
  page → "Validation passed" (exit 0); injecting a missing required objectName
  on <ObjectChart> + an onSucces typo on <ObjectForm> → prop gate flags the
  error (exit 1) and the typo warning. Demonstrates generated contract → author
  reads it → validate enforces it compose into a working loop.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 30, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
spec Ready Ready Preview, Comment Jun 30, 2026 2:17pm

Request Review

@github-actions github-actions Bot added documentation Improvements or additions to documentation size/m labels Jun 30, 2026
@os-zhuang
os-zhuang merged commit b0510ce into main Jun 30, 2026
15 checks passed
@os-zhuang
os-zhuang deleted the chore/react-dogfood branch June 30, 2026 14:24
os-zhuang added a commit that referenced this pull request Jun 30, 2026
Records the model that the spec↔contract↔conformance↔prop-gate work converged
on (now implemented + merged across framework #2478/#2480/#2482/#2484/#2485/#2488/
#2489 and objectui #2113/#2115), so future contributors don't re-litigate it:

- the spec zod schema is the protocol source of truth; the AI-facing contract is
  GENERATED from it (zero-drift), never hand-authored;
- registry inputs are the designer palette (a curated subset) — spec-only is a
  soft signal, frontend-only is the actionable one;
- React-interaction props (callbacks/controlled/binding escape-hatches) live in a
  thin overlay, not the spec; declaring a genuine binding there is how a
  frontend-only prop is closed (baseline now 0 frontend-only);
- conformance is a build-time baseline ratchet (build-console.sh, warn-only),
  not a per-PR gate — the manifest only exists at console-build time;
- authoring correctness is a hard gate at os validate (missing-required = error,
  typo = warning); and the dogfood golden page proves the chain closes.

Captures the alternatives rejected (copy props into spec / per-PR hard gate /
hand-authored contract / registry-as-source).

Co-authored-by: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation size/m

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant