Skip to content

feat: add preview launch configuration#129

Merged
EvanBacon merged 5 commits into
EvanBacon:mainfrom
gsabran:gsabran/server-initial-state-params
Jul 16, 2026
Merged

feat: add preview launch configuration#129
EvanBacon merged 5 commits into
EvanBacon:mainfrom
gsabran:gsabran/server-initial-state-params

Conversation

@gsabran

@gsabran gsabran commented Jul 11, 2026

Copy link
Copy Markdown
Contributor

Adds launch-time controls for the serve-sim preview: --panes, --fit, and --theme light|dark. Startup state flows through middleware to the browser, including the empty-device view; the theme is applied to the simulator after boot. Tools and DevTools are mutually exclusive at launch, and fit is applied only on the first size restore. Includes validation, documentation, and test coverage.

Summary by CodeRabbit

  • New Features
    • Added serve-sim CLI options to seed the preview UI: --panes <panes> (devices/tools/devtools or none), --fit, and --theme <light|dark>.
    • The preview now initializes with the requested right-side pane and applies initial fit sizing; theme is applied to the simulator UI when provided.
  • Tests
    • Added Bun test coverage for pane parsing/validation, theme parsing, initial pane selection precedence, and initial-state propagation.
  • Documentation
    • Updated the serve-sim README/examples to include --panes, --fit, and --theme dark.

@coderabbitai

coderabbitai Bot commented Jul 11, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 24f047d0-a125-4910-bdfe-7ae97d829e20

📥 Commits

Reviewing files that changed from the base of the PR and between a849938 and e8510ca.

📒 Files selected for processing (5)
  • packages/serve-sim/src/__tests__/middleware-selection.test.ts
  • packages/serve-sim/src/client/client.tsx
  • packages/serve-sim/src/client/utils/sim-endpoint.ts
  • packages/serve-sim/src/index.ts
  • packages/serve-sim/src/middleware.ts
🚧 Files skipped from review as they are similar to previous changes (5)
  • packages/serve-sim/src/client/utils/sim-endpoint.ts
  • packages/serve-sim/src/tests/middleware-selection.test.ts
  • packages/serve-sim/src/client/client.tsx
  • packages/serve-sim/src/middleware.ts
  • packages/serve-sim/src/index.ts

📝 Walkthrough

Walkthrough

The preview CLI accepts pane, theme, and fit settings, passes them through serve-sim middleware, and injects them into browser configuration. The client uses these settings to initialize visible panels and simulator sizing.

Changes

Preview startup state

Layer / File(s) Summary
Preview state contract and CLI parsing
packages/serve-sim/src/preview-initial-state.ts, packages/serve-sim/src/index.ts, packages/serve-sim/src/__tests__/preview-initial-state.test.ts, packages/serve-sim/README.md
Defines supported panes and themes, validates the new CLI options, constructs initial state, and documents usage examples.
Preview configuration propagation
packages/serve-sim/src/index.ts, packages/serve-sim/src/middleware.ts, packages/serve-sim/src/__tests__/middleware-selection.test.ts
Passes initial state through serve and middleware into injected, API, and SSE preview configurations, while applying the selected theme to target devices.
Client pane and fit initialization
packages/serve-sim/src/client/utils/sim-endpoint.ts, packages/serve-sim/src/client/client.tsx, packages/serve-sim/src/client/hooks/use-simulator-resize.ts
Uses configured panes for initial panel visibility and fit for initial simulator sizing.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant CLI
  participant serve
  participant simMiddleware
  participant PreviewClient
  CLI->>serve: Build initialState from --panes and --fit
  serve->>serve: Apply --theme to target devices
  serve->>simMiddleware: Pass initialState
  simMiddleware->>PreviewClient: Inject preview configuration
  PreviewClient->>PreviewClient: Initialize panes and simulator fit
Loading

Possibly related PRs

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 66.67% 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 The title clearly matches the main change: adding launch-time preview configuration for serve-sim.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

@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: 2

🧹 Nitpick comments (2)
packages/serve-sim/src/middleware.ts (1)

819-865: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚖️ Poor tradeoff

Growing positional-parameter list on previewConfigForState.

The function now takes 7 positional params (codec/proxyHelpers optional with defaults, initialState trailing). Every call site must pass undefined/false placeholders to reach initialState, which is easy to get wrong as more options get added later.

♻️ Suggested direction: collapse trailing options into a single object
-export function previewConfigForState(
-  state: ServeSimState,
-  base: string,
-  serveSimBin: string,
-  execToken: string,
-  codec?: string,
-  proxyHelpers = false,
-  initialState?: PreviewInitialState,
-): ServeSimState & { ... } {
+export function previewConfigForState(
+  state: ServeSimState,
+  base: string,
+  serveSimBin: string,
+  execToken: string,
+  opts: { codec?: string; proxyHelpers?: boolean; initialState?: PreviewInitialState } = {},
+): ServeSimState & { ... } {
+  const { codec, proxyHelpers = false, initialState } = opts;

This would require updating all call sites and the test file, so weigh against the current low churn.

🤖 Prompt for 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.

In `@packages/serve-sim/src/middleware.ts` around lines 819 - 865, Refactor
previewConfigForState to replace the trailing positional codec, proxyHelpers,
and initialState parameters with a single options object, preserving their
defaults and return behavior. Update every call site and related tests to pass
named options, and verify existing endpoint and state construction remains
unchanged.
packages/serve-sim/src/client/utils/sim-endpoint.ts (1)

34-38: 🗄️ Data Integrity & Integration | 🔵 Trivial | ⚡ Quick win

Reuse the shared preview state type

initialState should use PreviewInitialState from preview-initial-state.ts instead of inlining the pane union, so the client-side window shape stays aligned with the server contract.

🤖 Prompt for 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.

In `@packages/serve-sim/src/client/utils/sim-endpoint.ts` around lines 34 - 38,
Replace the inline initialState shape in the relevant client endpoint type with
the shared PreviewInitialState type imported from preview-initial-state.ts,
keeping the client and server preview state contracts aligned.
🤖 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/serve-sim/src/client/client.tsx`:
- Line 96: The initial state derivation does not enforce mutual exclusivity
between the tools and devtools panes, allowing both right-edge panels to open
initially. Update the logic around `initialState` to detect when
`initialState.panes` contains both `tools` and `devtools`, then apply the
existing exclusivity rule so only the appropriate pane remains open before the
first render.

In `@packages/serve-sim/src/client/hooks/use-simulator-resize.ts`:
- Around line 44-52: Update the resize restoration logic around
`readRestoredWidth()` so the `initialFit` option is consumed only once, rather
than recalculating the fit-to-viewport width whenever `defaultWidth` changes.
Track whether the initial restore has already occurred, preserve the user’s
resized width for subsequent device switches, and keep normal default-width
updates working after that first restore.

---

Nitpick comments:
In `@packages/serve-sim/src/client/utils/sim-endpoint.ts`:
- Around line 34-38: Replace the inline initialState shape in the relevant
client endpoint type with the shared PreviewInitialState type imported from
preview-initial-state.ts, keeping the client and server preview state contracts
aligned.

In `@packages/serve-sim/src/middleware.ts`:
- Around line 819-865: Refactor previewConfigForState to replace the trailing
positional codec, proxyHelpers, and initialState parameters with a single
options object, preserving their defaults and return behavior. Update every call
site and related tests to pass named options, and verify existing endpoint and
state construction remains unchanged.
🪄 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: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 84c0fb0a-db66-4114-9dac-75afb95dd47c

📥 Commits

Reviewing files that changed from the base of the PR and between af681b8 and 02f5e9c.

📒 Files selected for processing (9)
  • packages/serve-sim/README.md
  • packages/serve-sim/src/__tests__/middleware-selection.test.ts
  • packages/serve-sim/src/__tests__/preview-initial-state.test.ts
  • packages/serve-sim/src/client/client.tsx
  • packages/serve-sim/src/client/hooks/use-simulator-resize.ts
  • packages/serve-sim/src/client/utils/sim-endpoint.ts
  • packages/serve-sim/src/index.ts
  • packages/serve-sim/src/middleware.ts
  • packages/serve-sim/src/preview-initial-state.ts

Comment thread packages/serve-sim/src/client/client.tsx
Comment thread packages/serve-sim/src/client/hooks/use-simulator-resize.ts
@gsabran
gsabran marked this pull request as draft July 11, 2026 04:36
@gsabran
gsabran marked this pull request as ready for review July 14, 2026 15:30
@gsabran gsabran changed the title feat: add preview startup state flags feat: add preview launch configuration Jul 14, 2026

@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: 1

🤖 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/serve-sim/src/client/hooks/use-simulator-resize.ts`:
- Around line 68-73: Update readRestoredWidth so it remains pure during render
and no longer mutates initialFitConsumedRef.current. Move the one-time ref
mutation into an empty-dependency useEffect that runs after the initial mount
commits, while preserving the existing initialFit sizing behavior for the first
visible render.
🪄 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: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 3c4b417a-9a42-41a9-bfce-258df8976e44

📥 Commits

Reviewing files that changed from the base of the PR and between 02f5e9c and e0f7ce3.

📒 Files selected for processing (6)
  • packages/serve-sim/README.md
  • packages/serve-sim/src/__tests__/preview-initial-state.test.ts
  • packages/serve-sim/src/client/client.tsx
  • packages/serve-sim/src/client/hooks/use-simulator-resize.ts
  • packages/serve-sim/src/index.ts
  • packages/serve-sim/src/preview-initial-state.ts
🚧 Files skipped from review as they are similar to previous changes (3)
  • packages/serve-sim/src/tests/preview-initial-state.test.ts
  • packages/serve-sim/src/preview-initial-state.ts
  • packages/serve-sim/src/client/client.tsx

Comment thread packages/serve-sim/src/client/hooks/use-simulator-resize.ts
@EvanBacon
EvanBacon merged commit 8e0cdd9 into EvanBacon:main Jul 16, 2026
1 check passed
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.

2 participants