feat(app): frame a device capture as the device

[vishnuv688]

What & why

Type of change

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Polish (an improvement to an existing feature)
• Breaking change (existing behavior changes for users)
• Documentation
• Internal (build, CI, dependencies, tooling)

Packages touched

• shared (types and contracts)
• core (framework-agnostic capture/reporting)
• elements (published element/snapshot API — @wdio/elements)
• service (WebdriverIO adapter)
• nightwatch-devtools (Nightwatch adapter)
• selenium-devtools (Selenium adapter)
• selenium-devtools-py (Selenium Python adapter)
• backend (server)
• app (UI)
• script (page-injected runtime)
• trace (Trace mode)

Notes for reviewers

Screenshots / recordings

[greptile-apps]

Greptile Summary

The PR frames native-device screenshots according to their decoded dimensions and replaces desktop browser chrome with a device label.

• Adds capture-aware frame geometry that includes header, padding, and border dimensions.
• Preserves browser framing for sessions with DOM mutations or URL metadata.
• Prevents deferred device sizing from overriding screencast sizing.
• Adds unit and UI coverage for geometry, chrome selection, browser classification, and mode transitions.

Confidence Score: 5/5

The PR appears safe to merge; the previously outstanding deferred-sizing issue is fixed and no new actionable failures were found.

The deferred callback now verifies that snapshot mode is still active before applying device dimensions, and frame geometry now includes section borders. The earlier empty-mutation classification thread was manually resolved without explanation; under the current thread state it is not outstanding.

Important Files Changed

Filename	Overview
packages/app/src/components/browser/snapshot.ts	Selects device framing for native screenshots, guards deferred sizing against mode changes, and retains browser framing when URL or DOM evidence exists.
packages/app/src/components/browser/device-frame.ts	Implements device chrome, computed frame insets, and capture-aspect-aware geometry.
packages/app/src/components/browser/snapshot-styles.ts	Adds styling for the device-specific header and label.
packages/app/test-ui/workbench/player/snapshot.test.ts	Covers device chrome, capture geometry, screencast transitions, and mobile-browser classification.
packages/app/tests/device-frame.test.ts	Verifies frame fitting and padding-plus-border inset calculations.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
  A[Captured screenshot] --> B{Device metadata present?}
  B -- No --> C[Render browser chrome]
  B -- Yes --> D{DOM mutations or metadata URL?}
  D -- Yes --> C
  D -- No --> E[Decode screenshot dimensions]
  E --> F[Render device chrome]
  F --> G[Fit capture within pane]
  G --> H[Add header, padding, and borders]
  H --> I[Set device-shaped section size]

Loading

_{Reviews (2): Last reviewed commit: "fix(app): correct three defects in the d..." | Re-trigger Greptile}