feat(cli): style device-id cert callback page with grid background

[jchris]

Summary

• Replace the plaintext Certificate received successfully. You can close this window. response on localhost:PORT/cert (the vibes-diy login callback) with a small styled HTML page: graph-paper grid background, centered card, dark-mode aware.
• One self-contained certSuccessHtml() helper in cli/cmds/device-id-cmd.ts; no new deps; c.text(...) -> c.html(...).
• Refs VibesDIY/vibes.diy#1616, which has the longer-term plan to flip the protocol so vibes can own the success page entirely. This PR is the stopgap so the last screen of onboarding isn't raw text/plain in the meantime.

Test plan

• pnpm install && pnpm lint && pnpm build from repo root
• Run vibes-diy login end-to-end against vibes.diy and confirm the localhost callback page renders the styled card with the grid background (light + dark)
• Confirm cert is still received by the CLI (vibes-diy continues past the login step)
• Hit http://localhost:PORT/cert without a cert= query and confirm the existing 400 error path is unchanged

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Enhanced the device registration flow to display an HTML confirmation page when the certificate is received, replacing the previous plain text response. Users now see a clearer message indicating successful certificate receipt with an option to close the page.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a089692a-e9a3-45d7-9cd4-97bc87104f26

📥 Commits

Reviewing files that changed from the base of the PR and between 404e6c5 and 7cc0185.

📒 Files selected for processing (1)

• cli/cmds/device-id-cmd.ts

---

Walkthrough

This PR adds an HTML response helper function for the device certificate registration flow. A new certSuccessHtml() function generates a success confirmation page, which the local Hono server's /cert route now renders instead of plain text when the CA redirects with a certificate.

Changes

Certificate Success HTML Response

Layer / File(s)	Summary
HTML Rendering Helper cli/cmds/device-id-cmd.ts	New certSuccessHtml() function creates a complete HTML page informing users that their certificate was received and can close the browser window.
Route Handler Integration cli/cmds/device-id-cmd.ts	The /cert route handler now renders the HTML page via c.html(certSuccessHtml()) instead of returning plain text.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

🚥 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	The title 'feat(cli): style device-id cert callback page with grid background' accurately reflects the primary change: adding styling with a grid background to the device-id certificate callback page.
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.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch jchris/cert-success-grid

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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.}