Skip to content

feat: generate Astryx UI profiles for Vite apps - #1328

Merged
kang-heewon merged 5 commits into
trunkfrom
feat/1268-astryx-ui-profile
Jul 11, 2026
Merged

feat: generate Astryx UI profiles for Vite apps#1328
kang-heewon merged 5 commits into
trunkfrom
feat/1268-astryx-ui-profile

Conversation

@kang-heewon

@kang-heewon kang-heewon commented Jul 11, 2026

Copy link
Copy Markdown
Member

Fixes #1268.

Summary

  • Generated ddd-fullstack Vite SPAs can opt into a beta Astryx UI profile with provider, shell, Problem, and auth-state primitives; explicit none remains isolated and omitting --ui preserves the legacy output.
  • Unsupported presets and presentation runtimes now reject UI requests before filesystem writes across CLI, prompt, and direct generator paths.
  • UI profile metadata is explicit, validated against the canonical presentation contract, and exercised through packed-package and generated-app smoke evidence.

Verification

  • pnpm check passed, including architecture, strict-contract, static-misuse, public API, lint, and formatting gates.
  • pnpm typecheck passed: 226/226 tasks.
  • pnpm test passed: 227/227 tasks.
  • CROCO_GENERATED_SMOKE_CASES=graphql-vite-spa-astryx pnpm create-croco-app:smoke passed install, workspace build, GraphQL contract and snapshot, metadata, typecheck, Vite build, render, and drift canaries.
  • The packed @croco/ui-astryx artifact includes runtime files, type declarations, and the exported CSS subpath.

Self-review gates

  • Correctness and regression: PASS — omitted, none, Astryx, and invalid no-write paths are covered.
  • API and release contract: PASS — exports, catalog, docs, changeset, public API, and strict baseline are synchronized.
  • Maintainability and boundaries: PASS — @croco/frontend-react remains provider-neutral, with no production meta-vite or StyleX compiler/plugin coupling.

Review and QA

  • Independent code review: APPROVE after invalid preset handling and full session-union compatibility were strengthened.
  • Independent architecture review: CLEAR after canonical metadata drift, direct-generator validation, and discriminated auth contracts were enforced.
  • Adversarial QA: PASS after fixing interactive meta-vite UI request loss; the hostile regression matrix now rejects it explicitly.

Residual risk

Astryx remains beta and opt-in. This change proves the Vite SPA path; meta-vite SSR/hydration support and promotion to a default profile remain deferred until dedicated evidence exists.

Summary by CodeRabbit

  • 새 기능
    • Astryx UI 프로필을 제공하는 @croco/ui-astryx가 추가되었습니다.
    • create-croco-app에서 --ui none|astryx 옵션으로 Vite SPA UI를 선택할 수 있습니다.
    • Astryx 앱 셸, 테마, 인증 상태 및 문제 복구 UI를 지원합니다.
    • 생성 앱에 관련 스타일, 의존성, 프레젠테이션 프로필과 스모크 테스트가 포함됩니다.
  • 문서
    • 패키지 카탈로그, 런타임 지원 정보 및 API 문서가 업데이트되었습니다.
  • 품질 개선
    • UI 프로필 메타데이터와 생성 결과의 일치 여부를 자동 검증합니다.

@coderabbitai

coderabbitai Bot commented Jul 11, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@kang-heewon, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 8 seconds

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 5e950560-806c-4062-ae62-20f060568665

📥 Commits

Reviewing files that changed from the base of the PR and between 619cd81 and ae4faa4.

📒 Files selected for processing (8)
  • packages/create-croco-app/README.md
  • packages/ui-astryx/src/index.ts
  • packages/ui-astryx/src/libs/AstryxAuthState.tsx
  • packages/ui-astryx/src/tests/AstryxUi.spec.ts
  • scripts/first-success-verify.mts
  • scripts/package-entrypoint-smoke.mts
  • scripts/tests/first-success-verify.spec.ts
  • scripts/tests/package-entrypoint-smoke.spec.ts
📝 Walkthrough

Walkthrough

Astryx UI 지원이 추가되었습니다. @croco/ui-astryx 패키지와 UI 프로필 계약을 도입하고, create-croco-app에서 --ui none|astryx를 처리하며, Vite SPA 생성물·런타임 프로필·스모크 검증·카탈로그 문서를 갱신합니다.

Changes

Astryx UI profile

Layer / File(s) Summary
Astryx UI package
packages/ui-astryx/*
Astryx provider, 앱 셸, 인증 상태, Problem Details 뷰, 세션 타입, CSS 엔트리와 패키지 테스트를 추가했습니다.
Presentation profile contract and validation
packages/presentation-preset/*, packages/docs/src/content/docs/api/presentation-preset/*
생성 런타임 프로필에 선택적 UI 메타데이터를 추가하고, 프로필·StyleX 설정·성숙도·smoke case 일치 여부를 검증합니다.
create-croco-app UI option and installation
packages/create-croco-app/src/*, packages/create-croco-app/templates/addons/ui-astryx-vite-spa/*
`--ui none
Generated smoke and coverage evidence
scripts/create-croco-app-generated-smoke*, scripts/tests/create-croco-app-generated-smoke.spec.ts
Astryx 생성 앱의 타입체크·빌드·렌더 smoke와 런타임 프로필 비교, UI 옵션 커버리지 검증을 추가합니다.
Catalog, documentation, and release wiring
README.md, docs/*, packages/docs/*, croco.arch.json, .changeset/*, public-api-surface.snapshot.json, .github/workflows/ci.yml
새 패키지를 아키텍처 그룹, 카탈로그, API 문서, 공개 API 스냅샷, CI 경로 필터와 changeset에 등록합니다.
Package validation and typecheck baselines
scripts/package-entrypoint-smoke.mts, scripts/tests/package-entrypoint-smoke.spec.ts, tsconfig/contract-strict.baseline.json
CSS 정적 자산 export 검증을 추가하고 관련 타입 진단 기준을 갱신합니다.

Estimated code review effort: 4 (Complex) | ~60 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Developer
  participant CreateCrocoApp
  participant UiAstryx
  participant GeneratedSmoke
  participant RuntimeCatalog
  Developer->>CreateCrocoApp: select --ui astryx
  CreateCrocoApp->>UiAstryx: install profile and template
  UiAstryx-->>CreateCrocoApp: write app metadata and dependencies
  CreateCrocoApp->>GeneratedSmoke: run presentation smoke
  GeneratedSmoke->>RuntimeCatalog: compare generated profile
  RuntimeCatalog-->>GeneratedSmoke: validate runtime and UI metadata
Loading

Possibly related PRs

Suggested reviewers: ddarkr, croco-admin

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목이 Astryx UI 프로필을 Vite 앱용으로 생성한다는 핵심 변경을 정확히 요약합니다.
Linked Issues check ✅ Passed 전용 UI 패키지, --ui astryx 지원, UI 메타데이터, 테스트/스모크, 문서 반영이 요구사항과 대체로 일치합니다.
Out of Scope Changes check ✅ Passed 변경은 Astryx UI 프로필 추가라는 목표에 맞춰 패키지·CLI·문서·검증을 확장하며, 명백한 무관 변경은 보이지 않습니다.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/1268-astryx-ui-profile

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Jul 11, 2026

Copy link
Copy Markdown

📊 Benchmark Results

✅ All benchmarks passed

Benchmark p75 Threshold Baseline vs Baseline Status Notes
CrocoApp constructor 9.7μs 30.0ms 8.2μs +18.7% -
CrocoApp lambdaHandler (10 controllers) 295.0μs 50.0ms 258.4μs +14.1% -
Lambda cold-start simulation 453.9μs 80.0ms 418.1μs +8.6% -
Lambda cold-start with headers 434.1μs 80.0ms 369.7μs +17.4% -
Lambda cold-start with binary body 420.9μs 80.0ms 339.1μs +24.1% -
Lambda cold-start with query params 349.1μs 80.0ms 301.3μs +15.9% -
Lambda cold-start with authorizer context 340.7μs 80.0ms 299.8μs +13.6% -
Lambda cold-start realistic scenario 334.9μs 80.0ms 299.2μs +11.9% -
EventBusConfig.start (10 handlers) 2.1μs 10.0ms 1.4μs +45.4% -
EventPublisher.publishNow single event 2.3μs 2.0ms 1.7μs +39.1% -
DefaultHandlerResolver.resolve × 10 0.1μs 5.0ms 0.1μs -16.2% -
Container.get singleton (cold) 73.9μs 5.0ms 70.3μs +5.2% -
Container.register × 50 components 3.8ms 10.0ms 3.2ms +18.8% -
Container.validate (50 components) 4.3ms 20.0ms 3.4ms +25.9% -
Container.get singleton (warm) 2.0μs 500.0μs 1.6μs +21.1% -
TelemetryRuntime.init (lambda preset) 2.2μs 200.0ms 1.1ms -99.8% -
lambdaPreset config creation 1.4μs 2.0ms 1.4μs -1.0% -

Updated: 2026-07-11T18:12:18.305Z · Commit: 7815eeb

@kang-heewon
kang-heewon force-pushed the feat/1268-astryx-ui-profile branch from 143422c to 7a41fde Compare July 11, 2026 16:09
@kang-heewon
kang-heewon force-pushed the feat/1268-astryx-ui-profile branch from 7a41fde to 619cd81 Compare July 11, 2026 17:14

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/ui-astryx/src/index.ts`:
- Around line 1-14: Reorder the exports in the barrel index so all
component/value exports, including AstryxAppShell, AstryxAuthState,
AstryxProblemView, and AstryxProvider, come first; move every type-only export
group, including the crocoUiTypes exports, to the final group while preserving
their existing exports.

In `@packages/ui-astryx/src/libs/AstryxAuthState.tsx`:
- Around line 1-8: Reorganize the imports in AstryxAuthState.tsx so value
imports come first, followed by a separate type-only import section. Preserve
the grouping order of external packages, `@croco/`* imports, and relative imports,
ensuring BadgeVariant is not mixed with the Badge, Button, and Card value
imports.
- Around line 90-112: Update AstryxAuthState to filter recoveryActions by each
AstryxRecoveryAction’s problemCodes using the same matching rules as
AstryxProblemView, based on problem?.code. Only render actions applicable to the
current problem, and render no problem-specific actions when no problem is
present; keep the existing actionButton rendering for the filtered list.

In `@scripts/package-entrypoint-smoke.mts`:
- Around line 983-989: Update the conditional exports handling around
isStaticAssetTargetPath so CSS values under both import and require branches are
treated as static assets. Route them through validateStaticAssetTarget and
return before pushStringTarget, ensuring they are not classified as module
targets.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: a34bac27-180c-4e9e-8e80-99c5431936b4

📥 Commits

Reviewing files that changed from the base of the PR and between 0590a47 and 619cd81.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (64)
  • .changeset/astryx-vite-ui-profile.md
  • .github/workflows/ci.yml
  • README.md
  • croco.arch.json
  • docs/package-catalog.json
  • docs/package-docs-report.md
  • packages/create-croco-app/README.md
  • packages/create-croco-app/src/cli-program.ts
  • packages/create-croco-app/src/generator.ts
  • packages/create-croco-app/src/goals.ts
  • packages/create-croco-app/src/helpers/croco-ranges.ts
  • packages/create-croco-app/src/installers/index.ts
  • packages/create-croco-app/src/installers/ui-profile.ts
  • packages/create-croco-app/src/options.ts
  • packages/create-croco-app/src/prompts.ts
  • packages/create-croco-app/src/supported-options.ts
  • packages/create-croco-app/src/tests/e2e-vite-spa.spec.ts
  • packages/create-croco-app/src/tests/options.spec.ts
  • packages/create-croco-app/src/tests/prompts.spec.ts
  • packages/create-croco-app/src/types.ts
  • packages/create-croco-app/templates/addons/ui-astryx-vite-spa/src/App.tsx.hbs
  • packages/create-croco-app/templates/addons/ui-astryx-vite-spa/src/main.tsx
  • packages/create-croco-app/templates/addons/ui-astryx-vite-spa/src/presentation-smoke.tsx
  • packages/docs/astro.config.mjs
  • packages/docs/package.json
  • packages/docs/src/content/docs/api/presentation-preset/src/type-aliases/GeneratedRuntimeProfile.md
  • packages/docs/src/content/docs/api/presentation-preset/src/type-aliases/GeneratedUiProfileMaturity.md
  • packages/docs/src/content/docs/api/presentation-preset/src/type-aliases/GeneratedUiProfileMetadata.md
  • packages/docs/src/content/docs/api/presentation-preset/src/type-aliases/GeneratedUiProfileName.md
  • packages/docs/src/content/docs/api/presentation-preset/src/type-aliases/GeneratedUiStyleEngine.md
  • packages/docs/src/content/docs/api/ui-astryx/src/type-aliases/AstryxProblemRecoveryAction.md
  • packages/docs/src/content/docs/api/ui-astryx/src/type-aliases/AstryxRecoveryAction.md
  • packages/docs/src/content/docs/api/ui-astryx/src/type-aliases/AstryxSession.md
  • packages/docs/src/content/docs/api/ui-astryx/src/type-aliases/AstryxSessionState.md
  • packages/docs/src/content/docs/en/guides/getting-started.mdx
  • packages/docs/src/content/docs/en/index.mdx
  • packages/docs/src/content/docs/en/reference/extension-matrix.md
  • packages/docs/src/content/docs/en/reference/presentation-runtime-support.md
  • packages/docs/tsconfig.typedoc.json
  • packages/presentation-preset/README.md
  • packages/presentation-preset/runtime-profiles.json
  • packages/presentation-preset/src/__tests__/output-contract-validator.spec.ts
  • packages/presentation-preset/src/index.ts
  • packages/presentation-preset/src/output-contract-validator.ts
  • packages/presentation-preset/src/output-contract.ts
  • packages/ui-astryx/README.md
  • packages/ui-astryx/package.json
  • packages/ui-astryx/src/index.ts
  • packages/ui-astryx/src/libs/AstryxAppShell.tsx
  • packages/ui-astryx/src/libs/AstryxAuthState.tsx
  • packages/ui-astryx/src/libs/AstryxProblemView.tsx
  • packages/ui-astryx/src/libs/AstryxProvider.tsx
  • packages/ui-astryx/src/libs/crocoUiTypes.ts
  • packages/ui-astryx/src/tests/AstryxUi.spec.ts
  • packages/ui-astryx/styles.css
  • packages/ui-astryx/tsconfig.json
  • public-api-surface.snapshot.json
  • scripts/create-croco-app-generated-smoke-matrix.mts
  • scripts/create-croco-app-generated-smoke.mts
  • scripts/package-entrypoint-smoke.mts
  • scripts/static-misuse-raw-error-allowlist.json
  • scripts/tests/create-croco-app-generated-smoke.spec.ts
  • scripts/tests/package-entrypoint-smoke.spec.ts
  • tsconfig/contract-strict.baseline.json

Comment thread packages/ui-astryx/src/index.ts Outdated
Comment thread packages/ui-astryx/src/libs/AstryxAuthState.tsx Outdated
Comment thread packages/ui-astryx/src/libs/AstryxAuthState.tsx Outdated
Comment thread scripts/package-entrypoint-smoke.mts
@kang-heewon

Copy link
Copy Markdown
Member Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Jul 11, 2026

Copy link
Copy Markdown
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@kang-heewon
kang-heewon merged commit e0c11de into trunk Jul 11, 2026
9 checks passed
@kang-heewon
kang-heewon deleted the feat/1268-astryx-ui-profile branch July 11, 2026 18:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[presentation] Add StyleX/Astryx as the default generated UI profile

1 participant