feat: demo gallery prompt collection

[GeneralJerel]

Summary

• Adds a demo gallery drawer accessible via a "Demos" button in the header bar
• Gallery displays 10 curated prompt cards (3D, data viz, diagrams, interactive, UI components) with category filtering
• Clicking a card sends the prompt directly to the chat using the v2 sendMessage API

Test plan

• Click "Demos" button in header — drawer slides in from right
• Verify category filter chips work (All, 3D/Animation, etc.)
• Click a demo card — drawer closes and prompt appears in chat
• Verify the agent responds to the submitted prompt

🤖 Generated with Claude Code

[GeneralJerel]

PR #68 Review: Demo Gallery Prompt Collection

Issues

1. useCopilotChatInternal is an internal/private API — High severity

The import in page.tsx uses useCopilotChatInternal from @copilotkit/react-core (the v1 module). This is clearly an internal hook — the name says so, and it's not part of the documented public API. The commit message mentions this was a workaround for an isResultMessage is not a function error with the public useCopilotChat API.

The safer approach would be to use useCopilotChat (the public v1 hook) and call its sendMessage, or use the useCopilotChatHeadless_c hook which documents sendMessage with the exact { id, role, content } shape this PR uses. Either way, relying on an Internal hook means this could break silently on any CopilotKit update.

2. Mixing v1 and v2 APIs — Medium severity

page.tsx imports CopilotChat from @copilotkit/react-core/v2 but useCopilotChatInternal from @copilotkit/react-core (v1). Mixing API versions is fragile — if v2 evolves its message format or context providers, the v1 internal hook may not see the right context.

3. Keyboard accessibility: no Escape-to-close on drawer — Low severity

The drawer in index.tsx closes via backdrop click but has no keyboard handler for Escape. Also, when the drawer opens, focus isn't trapped — a keyboard user can tab behind the backdrop.

4. SVG icon duplication — Nit

The 4-square grid icon SVG is duplicated verbatim in page.tsx (Demos button) and index.tsx (drawer header). Could extract to a small component or constant.

Things done well

• Clean separation: demo-data.ts for content, demo-card.tsx / category-filter.tsx / index.tsx for UI — easy to extend.
• Category filter with the gradient active state matches the existing design system nicely.
• The DemoCard is a <button> (not a <div> with an onClick), which is correct for accessibility.
• Drawer width is capped at 90vw for mobile responsiveness.

Recommendation

The useCopilotChatInternal usage is the main blocker. If useCopilotChat genuinely throws isResultMessage is not a function, that's likely a CopilotKit bug worth reporting upstream — but the fix shouldn't be to reach into internals. Try useCopilotChatHeadless_c or investigate the root cause of the error. Everything else looks solid.