Can I vibe code Chatra?

Build a custom, lightweight live chat widget and agent admin console tailored for an e-commerce platform using Next.js, Supabase, and Tailwind CSS.

1. DATA MODEL & ARCHITECTURE:
- Storefront Visitors: session_id, visitor_name, email, current_page_url, cart_summary (JSONB: items, total_price, currency), browser_info, created_at.
- Chat Conversations: id, visitor_id, assigned_agent_id, status (open, pending, closed), created_at, updated_at.
- Chat Messages: id, conversation_id, sender_type (visitor, agent, system), message_text, attachments (JSONB), created_at.
- Agents: id, email, full_name, role, status (online, offline, busy).

2. STORE FRONT WIDGET (EMBEDDABLE JS):
- Create an embeddable React/JS widget bundle (< 30KB minified) rendered via iframe or isolated shadow DOM.
- Maintain persistent visitor session_id in localStorage.
- Establish a WebSocket channel using Supabase Realtime to broadcast messages and listen for replies.
- Automatically sync current URL and cart object (via window.Shopify.cart or custom API) to the server whenever cart state changes.
- Implement a typing indicator emitting throttled status events over WebSockets.

3. AGENT ADMIN DASHBOARD:
- Split-view interface: left sidebar shows active conversations sorted by last activity; center displays message thread; right sidebar renders live customer context (current cart items, browsing path, geo-location).
- Web Notification API integration to alert agents when a new conversation starts or a message arrives.
- Quick-reply canned macros interface accessible via '/ key trigger.
- Ability to close conversation, re-assign agent, or tag conversation.

4. EDGE CASES & FAILURE MODES:
- Offline Fallback: If no agents are online, switch widget UI to 'Leave a message' form collecting email; send via Postmark API.
- Reconnection Logic: Exponential backoff on WebSocket disconnects with visual connection status indicator in widget.
- Input Sanitization: Strip HTML/script tags on both client and server before rendering chat bubbles.

5. OUT OF SCOPE:
- Native mobile apps (use web notifications and Slack webhooks for alerts instead).
- Complex AI bot workflows (keep logic strictly human agent + canned messages).

$ each button prefixes agent-specific run instructions · build your own product, never copy proprietary code, trademarks or designs