Add preview-safe web widget preview

[Copilot]

The preview server already had a sysinfo example, but the web widget could not be previewed because it relies on Electron’s <webview> tag. This change adds a standalone web preview and replaces the Electron-only renderer with a preview-safe mock placeholder that surfaces the target URL.

• Preview server

  • Added frontend/preview/previews/web.preview.tsx
  • Reuses the existing full-block preview pattern (Block + mock workspace/tab/block setup)
  • Seeds the preview mock object store so WebViewModel sees the same block metadata it expects in the app

• Web widget fallback in preview

  • Wrapped the shared web view renderer with MockBoundary
  • In preview windows, renders a lightweight placeholder instead of <webview>
  • Placeholder shows the resolved URL that would be loaded by the real widget

• WebView model hardening

  • Made block metadata reads tolerant of preview initialization timing
  • Normalized preview URL handling so empty/null values fall back to about:blank
  • Ensured header input state remains string-backed during preview rendering

• Focused coverage

  • Added a small unit test for preview fallback URL rendering and blank/null URL normalization

<MockBoundary fallback={<WebViewPreviewFallback url={metaUrl} />}>
    <webview
        id="webview"
        className="webview"
        ref={model.webviewRef}
        src={metaUrlInitial}
        preload={getWebviewPreloadUrl()}
        allowpopups="true"
        partition={webPartition}
        useragent={userAgent}
    />
</MockBoundary>

• • Preview UI: https://github.com/user-attachments/assets/ac2be6f3-f56f-431e-a4b6-e25d2a270cf2

Original prompt

checkout sysinfo.preview.tsx... i'd like to try creating a preview for another simple view. this time the web widget.

note that it uses the electron webview tag which obviously won't work. so we'll just mock that up using hmm it is in the preview mock directory i think like a mock boundary... the fallback can just be a div showing the URL that is supposed to be rendered.

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[cloudflare-workers-and-pages]

Deploying waveterm with    Cloudflare Pages

Latest commit:	0d2504a
Status:	✅  Deploy successful!
Preview URL:	https://065e7f64.waveterm.pages.dev
Branch Preview URL:	https://copilot-add-web-widget-previ.waveterm.pages.dev

View logs

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (3 files)

• frontend/app/view/webview/webview.tsx - Added defensive null checks and preview fallback
• frontend/app/view/webview/webview.test.tsx - New test file for fallback component
• frontend/preview/previews/web.preview.tsx - New preview file for web widget

Summary:
This PR adds:

1. Defensive null checks using optional chaining (?.) and null coalescing (??) to prevent runtime errors when accessing block properties
2. A MockBoundary wrapper with WebViewPreviewFallback component to display a placeholder when the webview is unavailable (e.g., in preview windows)
3. Unit tests for the fallback component
4. A preview renderer for the web widget

All changes are well-implemented and follow defensive coding practices. No issues found.