feat: Add share buttons to RoastCard & improve AI roast prompt

[devin-ai-integration]

Summary

Share Features (RoastCard)

Adds two sharing features to the RoastCard component:

1. Share Link — copies https://kooked.vercel.app/roast/[id] to clipboard. The roast ID is now captured from the Supabase insert response in page.tsx (changed from fire-and-forget to .select("id").single()), stored in state, and passed as an optional roastId prop to RoastCard. The button only renders when roastId is available.

2. Share as Image — exports the card as a 2x PNG using html-to-image (toPng). The exported region includes the header, roast text, saving grace, and a new Kooked branding footer.

Additional changes in RoastCard:

• The grade prop (previously accepted but unused) is now displayed as a badge in the card header.
• A "Kooked / kooked.vercel.app" branding footer is added to the bottom of the card (always visible, not just in exports).
• roastId is also passed on the roast/[id] detail page so the share button works there too.

AI Prompt Rewrite (Edge Function)

Rewrote the system prompt in supabase/functions/roast/index.ts to produce better roasts:

• Shorter: Enforces 1–3 sentences max per roast point instead of long paragraphs.
• Less repetitive: Each roast must target a different angle (design/visuals, content/copy, UX/functionality).
• Darker & more specific: Requires references to actual site elements; generic insults are discouraged.
• Harsher grading: Most sites should get D or F; only genuinely impressive sites get above C.
• Backhanded Saving Grace: The compliment should still sting.

Review & Testing Checklist for Human

• Supabase Edge Function redeployment: The prompt change is in supabase/functions/roast/index.ts. Merging this PR updates the repo, but you may need to manually redeploy the edge function via the Supabase CLI or dashboard for the prompt change to take effect.
• Test new prompt output: Roast a few real URLs and verify the AI produces shorter (1–3 sentence) roasts that target different angles, not repetitive paragraphs. Also verify the response still matches the parseRoast regex format (Grade: ... / Roast 1: ... / Roast 2: ... / Roast 3: ... / Saving Grace: ...).
• Supabase .select("id").single() after insert: Confirm this works with existing RLS policies. If the table only allows INSERT but not SELECT for anon users, the insert will succeed but setRoastId will never fire (Share Link button won't appear). Check the Supabase dashboard to verify.
• Image export in light mode: The toPng call hardcodes backgroundColor: "#000000" (black). Since the card uses CSS variable-based colors, verify the exported PNG looks correct in both light and dark mode — light-mode text on a black background may be unreadable.
• Image export with cross-origin favicon: html-to-image can fail or produce blank areas when rendering cross-origin images (the favicon from icon.horse). Test export with a real roast to confirm the favicon renders in the PNG.

Suggested test plan: Roast a real URL on the deployed preview → verify the grade badge appears and roasts are short/varied → click "Share Link" and confirm the clipboard contains the correct URL → click "Share as Image" and verify the downloaded PNG includes all content with correct colors → toggle to the other theme and repeat the image export test.

Notes

• The share URL is hardcoded to https://kooked.vercel.app/roast/... — this won't resolve correctly in local dev or Vercel preview deployments.
• The clipboard fallback uses the deprecated document.execCommand("copy") for older browser support.
• New dependency: html-to-image@^1.11.13

Link to Devin session: https://app.devin.ai/sessions/c0222eddeab348589a28ca1397ffa906
Requested by: @iamovi

---

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
kooked	Ready	Preview, Comment	Apr 12, 2026 3:24pm