fix: add timeout template for OpenCerts

[rongquan1]

Summary by CodeRabbit

• New Features
  • Enhanced connection-failure experience for opencerts.io with a styled failure notice that shows the source URL when a connection times out.
  • Added a Storybook entry to preview the connection-failure state (decorated preview with example source).

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: cf90debc-cb20-4878-bb44-96228b1d1fcc

📥 Commits

Reviewing files that changed from the base of the PR and between 180b921 and a104a68.

📒 Files selected for processing (1)

• src/components/frame/FrameConnector.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/frame/FrameConnector.tsx

---

📝 Walkthrough

Walkthrough

Adds a ConnectionFailure UI and story, plus FrameConnector logic to render it on connection timeouts when running on opencerts.io; existing DefaultTemplate behavior remains unchanged otherwise.

Changes

Cohort / File(s)	Summary
DefaultTemplate Component src/DefaultTemplate.tsx	Adds ConnectionFailureProps interface and ConnectionFailureTemplate React component that renders a styled connection-failure message and optional source URL.
Storybook Story src/DefaultTemplate.stories.ts	Adds ConnectionFailure story using ConnectionFailureTemplate, with decorator centering/padding and args.source set to http://localhost:3000.
Frame Connector Integration src/components/frame/FrameConnector.tsx	Imports ConnectionFailureTemplate, adds isOpenCerts hostname check, and conditionally renders the new template on timeouts for opencerts.io while preserving the original timeout UI for other hosts.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I thumped my foot when networks stall,
A friendly notice now greets all.
With source displayed and timeout tamed,
No more blank frames — the page reclaimed.
Hoppity hops for tidy UI! 🥕

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The pull request description is entirely missing. No description was provided by the author despite the repository having a standard template.	Add a pull request description following the repository template with Summary, Changes, and Issues sections to explain the background, modifications, and related issues.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The pull request title 'fix: add timeout template for OpenCerts' clearly and concisely describes the main change: adding a new timeout template specifically for OpenCerts.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/opencerts-timeout-template

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/frame/FrameConnector.tsx`:
- Line 89: The current isOpenCerts check can match unrelated hosts; update the
detection so it only returns true for the root domain or its subdomains: keep
the typeof window !== "undefined" guard, then compute const host =
window.location.hostname and set isOpenCerts to true only when host ===
"opencerts.io" or host.endsWith(".opencerts.io"); replace the existing
endsWith("opencerts.io") usage in FrameConnector.tsx (isOpenCerts) with this
stricter check to avoid false positives like evilopencerts.io.

In `@src/DefaultTemplate.tsx`:
- Line 30: The span that renders Template URL currently uses props.source
directly (the element containing Template URL: "{props.source}"), which can
display "undefined"; update DefaultTemplate.tsx to guard against a missing
source by either conditionally rendering that span only when props.source is
truthy or by providing a clear fallback (e.g., "N/A" or "Unknown") instead of
undefined; locate the span element that uses props.source and change it to
render props.source ?? 'N/A' or wrap it in a conditional check so users never
see "undefined".

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: bd3c727c-859c-4964-886a-20c954ea8a08

📥 Commits

Reviewing files that changed from the base of the PR and between d259efe and 180b921.

📒 Files selected for processing (3)

• src/DefaultTemplate.stories.ts
• src/DefaultTemplate.tsx
• src/components/frame/FrameConnector.tsx

[github-actions]

🎉 This PR is included in version 1.0.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀