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

vercelBot commented Jun 30, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
specReadyReadyPreview, CommentJun 30, 2026 2:17pm

Request Review

@github-actionsgithub-actionsBot added documentation Improvements or additions to documentation size/m labels Jun 30, 2026
@os-zhuang
os-zhuang merged commit b0510ce into mainJun 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>
@github-actionsgithub-actionsBot mentioned this pull request Jul 14, 2026
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentationImprovements or additions to documentationsize/m

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@os-zhuang