@chimerai/cli 0.2.73

package/dist/templates/widget.js

@@ -0,0 +1,1360 @@
+"use strict";
+/**
+ * Widget Template Generators
+ *
+ * Generates the embeddable chat widget (Web Component + Shadow DOM)
+ * and the API-Key Management UI for external integrations.
+ *
+ * SPEC: COMPONENT_PORTABILITY_SPEC.md — Phase 1.5 + 1.6
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateWidgetBundle = generateWidgetBundle;
+exports.generateWidgetLoader = generateWidgetLoader;
+exports.generateApiKeyManagementPage = generateApiKeyManagementPage;
+exports.generateApiKeysRoute = generateApiKeysRoute;
+exports.generateApiKeyIdRoute = generateApiKeyIdRoute;
+exports.generateRateLimiter = generateRateLimiter;
+/**
+ * Generates the self-contained chat widget bundle.
+ * Output: public/widget/chat.js
+ *
+ * Features:
+ * - Web Component with Shadow DOM (no CSS leak)
+ * - SSE streaming client
+ * - Inline CSS (dark/light/auto theme)
+ * - No React, no external deps
+ * - ChimerAI.mount() API + data-attribute auto-mount
+ */
+function generateWidgetBundle() {
+    return `// @chimerai component=ChatWidget version=1.0
+// ChimerAI Embeddable Chat Widget — Self-contained Web Component
+// Usage:
+//   <script src="https://your-app.com/widget/chat.js"></script>
+//   <div id="chat"></div>
+//   <script>ChimerAI.mount('#chat', { apiKey: 'sk_live_...', theme: 'dark' });</script>
+
+(function() {
+  'use strict';
+
+  // ── Inline Styles (Shadow DOM isolated) ──────────────────────────
+  const WIDGET_CSS = \`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --chi-bg: #ffffff;
+      --chi-bg-secondary: #f3f4f6;
+      --chi-text: #111827;
+      --chi-text-secondary: #6b7280;
+      --chi-border: #e5e7eb;
+      --chi-primary: #2563eb;
+      --chi-primary-hover: #1d4ed8;
+      --chi-user-bg: #2563eb;
+      --chi-user-text: #ffffff;
+      --chi-assistant-bg: #f3f4f6;
+      --chi-assistant-text: #111827;
+      --chi-error-bg: #fef2f2;
+      --chi-error-text: #dc2626;
+      --chi-radius: 12px;
+    }
+
+    :host([data-theme="dark"]) {
+      --chi-bg: #1f2937;
+      --chi-bg-secondary: #374151;
+      --chi-text: #f9fafb;
+      --chi-text-secondary: #9ca3af;
+      --chi-border: #4b5563;
+      --chi-primary: #3b82f6;
+      --chi-primary-hover: #2563eb;
+      --chi-user-bg: #3b82f6;
+      --chi-user-text: #ffffff;
+      --chi-assistant-bg: #374151;
+      --chi-assistant-text: #f9fafb;
+      --chi-error-bg: #451a1a;
+      --chi-error-text: #fca5a5;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :host([data-theme="auto"]) {
+        --chi-bg: #1f2937;
+        --chi-bg-secondary: #374151;
+        --chi-text: #f9fafb;
+        --chi-text-secondary: #9ca3af;
+        --chi-border: #4b5563;
+        --chi-primary: #3b82f6;
+        --chi-primary-hover: #2563eb;
+        --chi-user-bg: #3b82f6;
+        --chi-user-text: #ffffff;
+        --chi-assistant-bg: #374151;
+        --chi-assistant-text: #f9fafb;
+        --chi-error-bg: #451a1a;
+        --chi-error-text: #fca5a5;
+      }
+    }
+
+    .chi-container {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      min-height: 400px;
+      background: var(--chi-bg);
+      border: 1px solid var(--chi-border);
+      border-radius: var(--chi-radius);
+      overflow: hidden;
+    }
+
+    .chi-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      background: var(--chi-bg-secondary);
+      border-bottom: 1px solid var(--chi-border);
+      flex-shrink: 0;
+    }
+
+    .chi-header-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--chi-text);
+      margin: 0;
+    }
+
+    .chi-header-actions {
+      display: flex;
+      gap: 8px;
+    }
+
+    .chi-btn-icon {
+      background: none;
+      border: none;
+      color: var(--chi-text-secondary);
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+      font-size: 16px;
+      line-height: 1;
+    }
+
+    .chi-btn-icon:hover {
+      color: var(--chi-text);
+      background: var(--chi-border);
+    }
+
+    .chi-messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .chi-message {
+      max-width: 85%;
+      padding: 10px 14px;
+      border-radius: var(--chi-radius);
+      font-size: 14px;
+      line-height: 1.5;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+    }
+
+    .chi-message-user {
+      align-self: flex-end;
+      background: var(--chi-user-bg);
+      color: var(--chi-user-text);
+    }
+
+    .chi-message-assistant {
+      align-self: flex-start;
+      background: var(--chi-assistant-bg);
+      color: var(--chi-assistant-text);
+    }
+
+    .chi-message-error {
+      align-self: center;
+      background: var(--chi-error-bg);
+      color: var(--chi-error-text);
+      font-size: 13px;
+      text-align: center;
+    }
+
+    .chi-typing {
+      align-self: flex-start;
+      padding: 10px 14px;
+      background: var(--chi-assistant-bg);
+      border-radius: var(--chi-radius);
+      display: flex;
+      gap: 4px;
+      align-items: center;
+    }
+
+    .chi-typing-dot {
+      width: 6px;
+      height: 6px;
+      background: var(--chi-text-secondary);
+      border-radius: 50%;
+      animation: chi-bounce 1.4s infinite ease-in-out both;
+    }
+
+    .chi-typing-dot:nth-child(1) { animation-delay: -0.32s; }
+    .chi-typing-dot:nth-child(2) { animation-delay: -0.16s; }
+
+    @keyframes chi-bounce {
+      0%, 80%, 100% { transform: scale(0); }
+      40% { transform: scale(1); }
+    }
+
+    .chi-input-area {
+      display: flex;
+      gap: 8px;
+      padding: 12px 16px;
+      border-top: 1px solid var(--chi-border);
+      background: var(--chi-bg);
+      flex-shrink: 0;
+    }
+
+    .chi-input {
+      flex: 1;
+      padding: 10px 14px;
+      border: 1px solid var(--chi-border);
+      border-radius: 8px;
+      background: var(--chi-bg);
+      color: var(--chi-text);
+      font-size: 14px;
+      font-family: inherit;
+      resize: none;
+      outline: none;
+      max-height: 120px;
+      min-height: 40px;
+    }
+
+    .chi-input:focus {
+      border-color: var(--chi-primary);
+      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+    }
+
+    .chi-input::placeholder {
+      color: var(--chi-text-secondary);
+    }
+
+    .chi-send-btn {
+      padding: 10px 16px;
+      background: var(--chi-primary);
+      color: #ffffff;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      flex-shrink: 0;
+      transition: background 0.15s;
+    }
+
+    .chi-send-btn:hover:not(:disabled) {
+      background: var(--chi-primary-hover);
+    }
+
+    .chi-send-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .chi-empty {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--chi-text-secondary);
+      font-size: 14px;
+      padding: 32px;
+      text-align: center;
+    }
+
+    .chi-powered {
+      text-align: center;
+      padding: 6px;
+      font-size: 11px;
+      color: var(--chi-text-secondary);
+      border-top: 1px solid var(--chi-border);
+    }
+
+    .chi-powered a {
+      color: var(--chi-primary);
+      text-decoration: none;
+    }
+  \`;
+
+  // ── Web Component ────────────────────────────────────────────────
+  class ChimerAIChatWidget extends HTMLElement {
+    constructor() {
+      super();
+      this._shadow = this.attachShadow({ mode: 'open', delegatesFocus: true });
+      this._messages = [];
+      this._conversationId = null;
+      this._abortController = null;
+      this._isStreaming = false;
+      this._config = {};
+    }
+
+    connectedCallback() {
+      this._config = this._readConfig();
+      this._render();
+      this._attachEvents();
+
+      // Notify ready callback
+      if (typeof this._config.onReady === 'function') {
+        this._config.onReady();
+      }
+    }
+
+    disconnectedCallback() {
+      this._abort();
+    }
+
+    // ── Config ───────────────────────────────────────────────────
+    _readConfig() {
+      const endpoint = this.getAttribute('data-endpoint') || this.getAttribute('data-api-endpoint') || '';
+      return {
+        apiKey: this.getAttribute('data-api-key') || this.getAttribute('data-apikey') || '',
+        endpoint: endpoint.replace(/\\/+$/, ''),  // strip trailing slash
+        theme: this.getAttribute('data-theme') || 'auto',
+        model: this.getAttribute('data-model') || '',
+        title: this.getAttribute('data-title') || 'AI Chat',
+        placeholder: this.getAttribute('data-placeholder') || 'Type a message...',
+        // Callbacks set via mount()
+        onReady: this._onReady || null,
+        onError: this._onError || null,
+        onMessageSent: this._onMessageSent || null,
+        onResponseReceived: this._onResponseReceived || null,
+      };
+    }
+
+    // ── Render ───────────────────────────────────────────────────
+    _render() {
+      this.setAttribute('data-theme', this._config.theme);
+
+      this._shadow.innerHTML = \`
+        <style>\${WIDGET_CSS}</style>
+        <div class="chi-container">
+          <div class="chi-header">
+            <span class="chi-header-title">\${this._escapeHtml(this._config.title)}</span>
+            <div class="chi-header-actions">
+              <button class="chi-btn-icon" id="chi-clear" title="Clear chat">🗑️</button>
+            </div>
+          </div>
+          <div class="chi-messages" id="chi-messages">
+            <div class="chi-empty">Start a conversation…</div>
+          </div>
+          <div class="chi-input-area">
+            <textarea
+              class="chi-input"
+              id="chi-input"
+              placeholder="\${this._escapeHtml(this._config.placeholder)}"
+              rows="1"
+            ></textarea>
+            <button class="chi-send-btn" id="chi-send">Send</button>
+          </div>
+          <div class="chi-powered">Powered by <a href="https://github.com/armbur19-collab/chimerai-kickstart" target="_blank" rel="noopener">ChimerAI</a></div>
+        </div>
+      \`;
+    }
+
+    // ── Events ───────────────────────────────────────────────────
+    _attachEvents() {
+      const input = this._shadow.getElementById('chi-input');
+      const sendBtn = this._shadow.getElementById('chi-send');
+      const clearBtn = this._shadow.getElementById('chi-clear');
+
+      sendBtn.addEventListener('click', () => this._handleSend());
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          this._handleSend();
+        }
+      });
+
+      // Auto-resize textarea
+      input.addEventListener('input', () => {
+        input.style.height = 'auto';
+        input.style.height = Math.min(input.scrollHeight, 120) + 'px';
+      });
+
+      clearBtn.addEventListener('click', () => this.clearMessages());
+    }
+
+    // ── Send Message ─────────────────────────────────────────────
+    async _handleSend() {
+      const input = this._shadow.getElementById('chi-input');
+      const content = input.value.trim();
+      if (!content || this._isStreaming) return;
+
+      input.value = '';
+      input.style.height = 'auto';
+
+      // Add user message
+      this._addMessage('user', content);
+
+      // Callback
+      if (typeof this._config.onMessageSent === 'function') {
+        this._config.onMessageSent({ role: 'user', content });
+      }
+
+      // Start streaming
+      await this._streamResponse(content);
+    }
+
+    // ── SSE Streaming ────────────────────────────────────────────
+    async _streamResponse(userMessage) {
+      this._isStreaming = true;
+      this._setInputEnabled(false);
+
+      // Show typing indicator
+      this._showTyping();
+
+      this._abortController = new AbortController();
+
+      const apiUrl = this._config.endpoint
+        ? this._config.endpoint + '/api/v1/chat/stream'
+        : '/api/v1/chat/stream';
+
+      const body = {
+        messages: this._messages.map(m => ({ role: m.role, content: m.content })),
+      };
+      if (this._config.model) body.model = this._config.model;
+      if (this._conversationId) body.conversationId = this._conversationId;
+
+      const headers = {
+        'Content-Type': 'application/json',
+      };
+      if (this._config.apiKey) {
+        headers['x-api-key'] = this._config.apiKey;
+      }
+
+      try {
+        const response = await fetch(apiUrl, {
+          method: 'POST',
+          headers,
+          body: JSON.stringify(body),
+          signal: this._abortController.signal,
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.error || 'Request failed (' + response.status + ')');
+        }
+
+        // Remove typing indicator, add empty assistant message
+        this._hideTyping();
+        const assistantIdx = this._addMessage('assistant', '');
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        let assistantContent = '';
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\\n');
+          buffer = lines.pop() || '';
+
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+            const data = line.slice(6).trim();
+            if (data === '[DONE]') continue;
+
+            try {
+              const parsed = JSON.parse(data);
+
+              if (parsed.type === 'token' && parsed.content) {
+                assistantContent += parsed.content;
+                this._updateMessage(assistantIdx, assistantContent);
+              } else if (parsed.type === 'done') {
+                if (parsed.conversationId) {
+                  this._conversationId = parsed.conversationId;
+                }
+              } else if (parsed.type === 'error') {
+                this._showError(parsed.message || 'Stream error');
+              }
+            } catch { /* skip unparseable */ }
+          }
+        }
+
+        // Callback
+        if (typeof this._config.onResponseReceived === 'function') {
+          this._config.onResponseReceived({ role: 'assistant', content: assistantContent });
+        }
+
+      } catch (err) {
+        this._hideTyping();
+        if (err.name !== 'AbortError') {
+          this._showError(err.message || 'Connection failed');
+          if (typeof this._config.onError === 'function') {
+            this._config.onError(err);
+          }
+        }
+      } finally {
+        this._isStreaming = false;
+        this._abortController = null;
+        this._setInputEnabled(true);
+      }
+    }
+
+    // ── DOM Helpers ──────────────────────────────────────────────
+    _addMessage(role, content) {
+      this._messages.push({ role, content });
+      const container = this._shadow.getElementById('chi-messages');
+
+      // Remove empty state
+      const empty = container.querySelector('.chi-empty');
+      if (empty) empty.remove();
+
+      const div = document.createElement('div');
+      div.className = 'chi-message chi-message-' + role;
+      div.textContent = content;
+      div.setAttribute('data-idx', String(this._messages.length - 1));
+      container.appendChild(div);
+      container.scrollTop = container.scrollHeight;
+
+      return this._messages.length - 1;
+    }
+
+    _updateMessage(idx, content) {
+      const container = this._shadow.getElementById('chi-messages');
+      const el = container.querySelector('[data-idx="' + idx + '"]');
+      if (el) {
+        el.textContent = content;
+        container.scrollTop = container.scrollHeight;
+      }
+      if (this._messages[idx]) {
+        this._messages[idx].content = content;
+      }
+    }
+
+    _showTyping() {
+      const container = this._shadow.getElementById('chi-messages');
+      const typing = document.createElement('div');
+      typing.className = 'chi-typing';
+      typing.id = 'chi-typing';
+      typing.innerHTML = '<div class="chi-typing-dot"></div><div class="chi-typing-dot"></div><div class="chi-typing-dot"></div>';
+      container.appendChild(typing);
+      container.scrollTop = container.scrollHeight;
+    }
+
+    _hideTyping() {
+      const typing = this._shadow.getElementById('chi-typing');
+      if (typing) typing.remove();
+    }
+
+    _showError(message) {
+      const container = this._shadow.getElementById('chi-messages');
+      const div = document.createElement('div');
+      div.className = 'chi-message chi-message-error';
+      div.textContent = '⚠ ' + message;
+      container.appendChild(div);
+      container.scrollTop = container.scrollHeight;
+    }
+
+    _setInputEnabled(enabled) {
+      const input = this._shadow.getElementById('chi-input');
+      const sendBtn = this._shadow.getElementById('chi-send');
+      if (input) input.disabled = !enabled;
+      if (sendBtn) {
+        sendBtn.disabled = !enabled;
+        sendBtn.textContent = enabled ? 'Send' : '...';
+      }
+    }
+
+    _escapeHtml(str) {
+      const div = document.createElement('div');
+      div.textContent = str;
+      return div.innerHTML;
+    }
+
+    _abort() {
+      if (this._abortController) {
+        this._abortController.abort();
+        this._abortController = null;
+      }
+    }
+
+    // ── Public API (called from mount() return) ──────────────────
+    sendMessage(content) {
+      const input = this._shadow.getElementById('chi-input');
+      if (input) {
+        input.value = content;
+        this._handleSend();
+      }
+    }
+
+    clearMessages() {
+      this._messages = [];
+      this._conversationId = null;
+      this._abort();
+      const container = this._shadow.getElementById('chi-messages');
+      if (container) {
+        container.innerHTML = '<div class="chi-empty">Start a conversation…</div>';
+      }
+    }
+
+    setModel(model) {
+      this._config.model = model;
+    }
+  }
+
+  // Register Custom Element
+  if (!customElements.get('chimerai-chat')) {
+    customElements.define('chimerai-chat', ChimerAIChatWidget);
+  }
+
+  // ── Auto-mount from data attributes ─────────────────────────────
+  function autoMount() {
+    document.querySelectorAll('[data-chimerai-chat]').forEach(function(el) {
+      if (el._chimeraiMounted) return;
+      el._chimeraiMounted = true;
+
+      var widget = document.createElement('chimerai-chat');
+      // Copy data-* attributes
+      Array.from(el.attributes).forEach(function(attr) {
+        if (attr.name.startsWith('data-') && attr.name !== 'data-chimerai-chat') {
+          widget.setAttribute(attr.name, attr.value);
+        }
+      });
+      el.appendChild(widget);
+    });
+  }
+
+  // Auto-mount when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', autoMount);
+  } else {
+    autoMount();
+  }
+
+  // ── Global API ──────────────────────────────────────────────────
+  window.ChimerAI = window.ChimerAI || {};
+
+  window.ChimerAI.mount = function(selector, config) {
+    config = config || {};
+    var container = typeof selector === 'string'
+      ? document.querySelector(selector)
+      : selector;
+
+    if (!container) {
+      throw new Error('ChimerAI: Element not found: ' + selector);
+    }
+
+    var widget = document.createElement('chimerai-chat');
+
+    // Set attributes from config
+    if (config.apiKey) widget.setAttribute('data-api-key', config.apiKey);
+    if (config.endpoint) widget.setAttribute('data-endpoint', config.endpoint);
+    if (config.theme) widget.setAttribute('data-theme', config.theme);
+    if (config.model) widget.setAttribute('data-model', config.model);
+    if (config.title) widget.setAttribute('data-title', config.title);
+    if (config.placeholder) widget.setAttribute('data-placeholder', config.placeholder);
+
+    // Set callbacks before appending (connectedCallback reads them)
+    if (config.onReady) widget._onReady = config.onReady;
+    if (config.onError) widget._onError = config.onError;
+    if (config.onMessageSent) widget._onMessageSent = config.onMessageSent;
+    if (config.onResponseReceived) widget._onResponseReceived = config.onResponseReceived;
+
+    // Apply size if given
+    if (config.width) widget.style.width = config.width;
+    if (config.height) widget.style.height = config.height;
+
+    container.appendChild(widget);
+
+    // Return control handle
+    return {
+      sendMessage: function(msg) { widget.sendMessage(msg); },
+      clearMessages: function() { widget.clearMessages(); },
+      setModel: function(model) { widget.setModel(model); },
+      destroy: function() { widget._abort(); widget.remove(); },
+    };
+  };
+
+  window.ChimerAI.version = '1.0.0';
+})();
+`;
+}
+/**
+ * Generates the minimal widget loader script.
+ * Output: public/widget/loader.js
+ *
+ * Allows async loading of the widget bundle.
+ */
+function generateWidgetLoader() {
+    return `// @chimerai component=WidgetLoader version=1.0
+// Async loader for ChimerAI Chat Widget
+// Usage: <script src="https://your-app.com/widget/loader.js" data-api-key="sk_live_..."></script>
+(function() {
+  var script = document.currentScript;
+  var src = script.src.replace('loader.js', 'chat.js');
+  var s = document.createElement('script');
+  s.src = src;
+  s.onload = function() {
+    // Auto-mount if data attributes are on the loader script
+    var apiKey = script.getAttribute('data-api-key');
+    if (apiKey) {
+      var container = document.createElement('div');
+      container.style.position = 'fixed';
+      container.style.bottom = '20px';
+      container.style.right = '20px';
+      container.style.width = '380px';
+      container.style.height = '520px';
+      container.style.zIndex = '99999';
+      document.body.appendChild(container);
+      window.ChimerAI.mount(container, {
+        apiKey: apiKey,
+        theme: script.getAttribute('data-theme') || 'auto',
+        model: script.getAttribute('data-model') || '',
+        title: script.getAttribute('data-title') || 'AI Chat',
+        endpoint: script.getAttribute('data-endpoint') || '',
+      });
+    }
+  };
+  document.head.appendChild(s);
+})();
+`;
+}
+/**
+ * Generates the API-Key Management page.
+ * Output: app/(app)/settings/api-keys/page.tsx
+ *
+ * Features:
+ * - List API keys (prefix, name, scopes, last used, created)
+ * - Create new key (name, scopes selection, expiration)
+ * - Show key once after creation (then never again)
+ * - Revoke key (soft-delete)
+ * - Embed-code generator: select key → copy-paste HTML snippet
+ */
+function generateApiKeyManagementPage() {
+    return `// @chimerai component=ApiKeyManagementPage version=2.0
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+interface ApiKeyItem {
+  id: string;
+  name: string;
+  prefix: string;
+  scopes: string[];
+  revoked: boolean;
+  lastUsedAt: string | null;
+  expiresAt: string | null;
+  createdAt: string;
+}
+
+const SCOPE_TEMPLATES: Record<string, string[]> = {
+  'Chat Widget': ['chat'],
+  'Chat + RAG': ['chat', 'rag'],
+  'Read-Only': ['read'],
+  'Full Access': ['*'],
+};
+
+export default function ApiKeysPage() {
+  const [keys, setKeys] = useState<ApiKeyItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showCreate, setShowCreate] = useState(false);
+  const [newKeyName, setNewKeyName] = useState('');
+  const [newKeyScopes, setNewKeyScopes] = useState<string[]>(['chat']);
+  const [newKeyExpDays, setNewKeyExpDays] = useState(90);
+  const [createdKey, setCreatedKey] = useState<string | null>(null);
+  const [showEmbed, setShowEmbed] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const appUrl = typeof window !== 'undefined' ? window.location.origin : '';
+
+  const fetchKeys = useCallback(async () => {
+    try {
+      const res = await fetch('/api/v1/api-keys');
+      if (!res.ok) throw new Error('Failed to load keys');
+      const data = await res.json();
+      setKeys(data.keys || []);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchKeys(); }, [fetchKeys]);
+
+  const handleCreate = async () => {
+    if (!newKeyName.trim()) return;
+    setError(null);
+    try {
+      const res = await fetch('/api/v1/api-keys', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: newKeyName.trim(),
+          scopes: newKeyScopes,
+          expiresInDays: newKeyExpDays > 0 ? newKeyExpDays : null,
+        }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || 'Failed to create key');
+      }
+      const data = await res.json();
+      setCreatedKey(data.key);
+      setNewKeyName('');
+      setNewKeyScopes(['chat']);
+      setNewKeyExpDays(90);
+      setShowCreate(false);
+      fetchKeys();
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  const handleRevoke = async (id: string) => {
+    if (!confirm('Revoke this API key? This cannot be undone.')) return;
+    try {
+      const res = await fetch('/api/v1/api-keys/' + id, { method: 'DELETE' });
+      if (!res.ok) throw new Error('Failed to revoke key');
+      fetchKeys();
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text).catch(() => {});
+  };
+
+  const embedCode = (prefix: string) => \`<!-- ChimerAI Chat Widget -->
+<script src="\${appUrl}/widget/chat.js"><\\/script>
+<div id="chimerai-chat" style="width: 400px; height: 600px;"></div>
+<script>
+  ChimerAI.mount('#chimerai-chat', {
+    apiKey: '\${prefix}...',  // Use your full API key
+    endpoint: '\${appUrl}',
+    theme: 'auto',
+  });
+<\\/script>\`;
+
+  return (
+    <div className="max-w-4xl mx-auto p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold dark:text-white">API Keys</h1>
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+            Manage API keys for external integrations and widgets.
+          </p>
+        </div>
+        <button
+          onClick={() => setShowCreate(true)}
+          className="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors"
+        >
+          + Create Key
+        </button>
+      </div>
+
+      {/* Error Banner */}
+      {error && (
+        <div className="flex items-center justify-between p-3 mb-4 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 rounded-lg border border-red-200 dark:border-red-800">
+          <span>{error}</span>
+          <button onClick={() => setError(null)} className="ml-2 hover:opacity-70">✕</button>
+        </div>
+      )}
+
+      {/* Created Key Banner — shown ONCE */}
+      {createdKey && (
+        <div className="p-4 mb-4 bg-green-50 dark:bg-green-900/20 border border-green-300 dark:border-green-700 rounded-lg">
+          <p className="font-semibold text-green-800 dark:text-green-300 mb-2">
+            🔑 API Key Created — Copy it now! It won't be shown again.
+          </p>
+          <div className="flex gap-2">
+            <code className="flex-1 p-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm break-all font-mono dark:text-gray-200">
+              {createdKey}
+            </code>
+            <button
+              onClick={() => copyToClipboard(createdKey)}
+              className="px-4 py-2 bg-green-700 hover:bg-green-800 text-white rounded transition-colors text-sm"
+            >
+              Copy
+            </button>
+          </div>
+          <button
+            onClick={() => setCreatedKey(null)}
+            className="mt-2 text-sm text-green-700 dark:text-green-400 underline hover:opacity-70"
+          >
+            I've copied it, dismiss
+          </button>
+        </div>
+      )}
+
+      {/* Create Key Dialog */}
+      {showCreate && (
+        <div className="p-5 mb-4 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+          <h3 className="text-base font-semibold mb-3 dark:text-white">Create New API Key</h3>
+
+          <label className="block mb-1 text-sm font-medium dark:text-gray-300">Name</label>
+          <input
+            type="text"
+            value={newKeyName}
+            onChange={(e) => setNewKeyName(e.target.value)}
+            placeholder="e.g. My Blog Widget"
+            className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded mb-3 bg-white dark:bg-gray-700 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
+          />
+
+          <label className="block mb-1 text-sm font-medium dark:text-gray-300">Scope Template</label>
+          <div className="flex gap-2 flex-wrap mb-3">
+            {Object.entries(SCOPE_TEMPLATES).map(([label, scopes]) => (
+              <button
+                key={label}
+                onClick={() => setNewKeyScopes(scopes)}
+                className={\`px-3 py-1.5 text-sm border rounded transition-colors \${
+                  JSON.stringify(newKeyScopes) === JSON.stringify(scopes)
+                    ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
+                    : 'border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600'
+                }\`}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+
+          <label className="block mb-1 text-sm font-medium dark:text-gray-300">
+            Expiration (days, 0 = never)
+          </label>
+          <input
+            type="number"
+            value={newKeyExpDays}
+            onChange={(e) => setNewKeyExpDays(Number(e.target.value))}
+            min={0}
+            className="w-28 p-2 border border-gray-300 dark:border-gray-600 rounded mb-4 bg-white dark:bg-gray-700 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
+          />
+
+          <div className="flex gap-2">
+            <button
+              onClick={handleCreate}
+              disabled={!newKeyName.trim()}
+              className="px-5 py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded transition-colors font-medium"
+            >
+              Create
+            </button>
+            <button
+              onClick={() => setShowCreate(false)}
+              className="px-5 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-600 dark:text-gray-300 transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Keys Table */}
+      {loading ? (
+        <p className="text-gray-500 dark:text-gray-400">Loading...</p>
+      ) : keys.length === 0 ? (
+        <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+          <p className="text-base mb-1">No API keys yet.</p>
+          <p className="text-sm">Create one to embed ChimerAI chat in external websites.</p>
+        </div>
+      ) : (
+        <div className="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
+          <table className="w-full text-left">
+            <thead>
+              <tr className="border-b-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
+                <th className="px-3 py-2 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name</th>
+                <th className="px-3 py-2 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Key</th>
+                <th className="px-3 py-2 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Scopes</th>
+                <th className="px-3 py-2 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Last Used</th>
+                <th className="px-3 py-2 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Expires</th>
+                <th className="px-3 py-2 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+              {keys.map((k) => (
+                <tr key={k.id} className={\`\${k.revoked ? 'opacity-50' : ''} hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors\`}>
+                  <td className="px-3 py-2.5 text-sm dark:text-gray-200">{k.name}</td>
+                  <td className="px-3 py-2.5 text-xs font-mono dark:text-gray-300">{k.prefix}...</td>
+                  <td className="px-3 py-2.5 text-xs dark:text-gray-300">
+                    {k.scopes.length > 0
+                      ? k.scopes.map((s) => (
+                          <span key={s} className="inline-block mr-1 px-1.5 py-0.5 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded text-xs">
+                            {s}
+                          </span>
+                        ))
+                      : <span className="text-gray-400">unrestricted</span>}
+                  </td>
+                  <td className="px-3 py-2.5 text-xs text-gray-500 dark:text-gray-400">
+                    {k.lastUsedAt ? new Date(k.lastUsedAt).toLocaleDateString() : 'Never'}
+                  </td>
+                  <td className="px-3 py-2.5 text-xs text-gray-500 dark:text-gray-400">
+                    {k.expiresAt ? new Date(k.expiresAt).toLocaleDateString() : 'Never'}
+                  </td>
+                  <td className="px-3 py-2.5">
+                    {k.revoked ? (
+                      <span className="text-xs text-red-600 dark:text-red-400 font-medium">Revoked</span>
+                    ) : (
+                      <div className="flex gap-1">
+                        <button
+                          onClick={() => setShowEmbed(showEmbed === k.id ? null : k.id)}
+                          className="px-2 py-1 text-xs bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 border border-blue-200 dark:border-blue-700 rounded hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors"
+                          title="Embed code"
+                        >
+                          {'</>'}
+                        </button>
+                        <button
+                          onClick={() => handleRevoke(k.id)}
+                          className="px-2 py-1 text-xs bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-400 border border-red-200 dark:border-red-700 rounded hover:bg-red-100 dark:hover:bg-red-900/50 transition-colors"
+                        >
+                          Revoke
+                        </button>
+                      </div>
+                    )}
+                    {showEmbed === k.id && (
+                      <div className="mt-2 p-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md">
+                        <p className="text-xs font-medium mb-1.5 dark:text-gray-300">Embed Code:</p>
+                        <pre className="text-[11px] whitespace-pre-wrap bg-gray-900 text-gray-200 p-3 rounded overflow-auto">
+                          {embedCode(k.prefix)}
+                        </pre>
+                        <button
+                          onClick={() => copyToClipboard(embedCode(k.prefix))}
+                          className="mt-1.5 px-3 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors"
+                        >
+                          Copy
+                        </button>
+                      </div>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+`;
+}
+/**
+ * Generates the API-Key CRUD route.
+ * Output: app/api/v1/api-keys/route.ts
+ *
+ * GET  — list current user's API keys
+ * POST — create a new key
+ */
+function generateApiKeysRoute() {
+    return `// @chimerai component=ApiKeysRoute version=1.0
+import { NextRequest, NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth';
+import { prisma } from '@/lib/prisma';
+import { hashApiKey } from '@/lib/api-key-auth';
+import crypto from 'crypto';
+
+export async function GET() {
+  const session = await getServerSession(authOptions);
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const keys = await (prisma as any).apiKey.findMany({
+    where: { userId: session.user.id },
+    orderBy: { createdAt: 'desc' },
+    select: {
+      id: true,
+      name: true,
+      keyHash: true,
+      scopes: true,
+      revoked: true,
+      lastUsedAt: true,
+      expiresAt: true,
+      createdAt: true,
+    },
+  });
+
+  // Only return prefix (first 12 chars of hash)
+  // Parse scopes from DB string to array for frontend
+  const safeKeys = keys.map((k: any) => ({
+    ...k,
+    scopes: typeof k.scopes === 'string' ? (k.scopes ? k.scopes.split(',') : []) : (k.scopes || []),
+    prefix: 'sk_...' + k.keyHash.slice(0, 8),
+    keyHash: undefined,
+  }));
+
+  return NextResponse.json({ keys: safeKeys });
+}
+
+export async function POST(request: NextRequest) {
+  const session = await getServerSession(authOptions);
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const body = await request.json();
+  const { name, scopes = [], expiresInDays } = body;
+
+  if (!name || typeof name !== 'string') {
+    return NextResponse.json({ error: 'Name is required' }, { status: 400 });
+  }
+
+  // Generate API key
+  const rawKey = 'sk_live_' + crypto.randomBytes(24).toString('hex');
+  const keyHash = hashApiKey(rawKey);
+
+  const expiresAt = expiresInDays
+    ? new Date(Date.now() + expiresInDays * 24 * 60 * 60 * 1000)
+    : null;
+
+  await (prisma as any).apiKey.create({
+    data: {
+      name,
+      keyHash,
+      userId: session.user.id,
+      // SQLite stores scopes as comma-separated String; PostgreSQL as String[]
+      // Detect DB type from DATABASE_URL to pick the right format
+      scopes: process.env.DATABASE_URL?.startsWith('file:')
+        ? (Array.isArray(scopes) ? scopes.join(',') : (scopes || ''))
+        : (Array.isArray(scopes) ? scopes : [scopes || '']),
+      expiresAt,
+    },
+  });
+
+  // Return the full key ONCE — it's never stored/shown again
+  return NextResponse.json({ key: rawKey, message: 'Key created. Copy it now — it will not be shown again.' });
+}
+`;
+}
+/**
+ * Generates the API-Key [id] route for revocation.
+ * Output: app/api/v1/api-keys/[id]/route.ts
+ */
+function generateApiKeyIdRoute() {
+    return `// @chimerai component=ApiKeyIdRoute version=1.0
+import { NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth';
+import { prisma } from '@/lib/prisma';
+
+export async function DELETE(
+  _request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+  const session = await getServerSession(authOptions);
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const key = await (prisma as any).apiKey.findUnique({
+    where: { id: id },
+  });
+
+  if (!key || key.userId !== session.user.id) {
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  }
+
+  await (prisma as any).apiKey.update({
+    where: { id: id },
+    data: { revoked: true },
+  });
+
+  return NextResponse.json({ message: 'Key revoked' });
+}
+`;
+}
+/**
+ * Generates the rate limiter with API-key-specific tier.
+ * Output: lib/rate-limit.ts
+ *
+ * Features:
+ * - In-memory fallback (single-instance)
+ * - Upstash Redis if configured (multi-instance / serverless)
+ * - Separate limits: session-based (per userId) vs API-key (per apiKeyId)
+ * - API-key default: 60 req/min
+ */
+function generateRateLimiter() {
+    return `// @chimerai component=RateLimiter version=1.1
+/**
+ * Rate Limiter with API-Key support
+ *
+ * Supports:
+ * - In-memory fallback (single-instance, dev)
+ * - Upstash Redis (multi-instance, production)
+ * - Per-user rate limits (session auth)
+ * - Per-API-key rate limits (widget/external auth)
+ */
+
+// ── Rate Limit Tiers ─────────────────────────────────────────────
+export const RATE_LIMITS = {
+  session: { maxRequests: 100, windowMs: 60_000 },   // 100 req/min for logged-in users
+  apiKey:  { maxRequests: 60,  windowMs: 60_000 },   // 60 req/min for API keys
+  global:  { maxRequests: 200, windowMs: 60_000 },   // 200 req/min global fallback
+} as const;
+
+export interface RateLimitResult {
+  allowed: boolean;
+  remaining: number;
+  resetAt: number;       // Unix timestamp (ms)
+  retryAfterMs: number;  // 0 if allowed
+}
+
+// ── In-Memory Store ──────────────────────────────────────────────
+const store = new Map<string, { count: number; resetAt: number }>();
+
+// Periodic cleanup to prevent memory leaks
+if (typeof setInterval !== 'undefined') {
+  setInterval(() => {
+    const now = Date.now();
+    for (const [key, record] of store.entries()) {
+      if (record.resetAt < now) store.delete(key);
+    }
+  }, 60_000);
+}
+
+function checkInMemory(
+  key: string,
+  limit: number,
+  windowMs: number
+): RateLimitResult {
+  const now = Date.now();
+  let record = store.get(key);
+
+  if (!record || record.resetAt <= now) {
+    record = { count: 1, resetAt: now + windowMs };
+    store.set(key, record);
+    return { allowed: true, remaining: limit - 1, resetAt: record.resetAt, retryAfterMs: 0 };
+  }
+
+  record.count++;
+  store.set(key, record);
+
+  if (record.count > limit) {
+    return {
+      allowed: false,
+      remaining: 0,
+      resetAt: record.resetAt,
+      retryAfterMs: record.resetAt - now,
+    };
+  }
+
+  return {
+    allowed: true,
+    remaining: Math.max(0, limit - record.count),
+    resetAt: record.resetAt,
+    retryAfterMs: 0,
+  };
+}
+
+// ── Upstash Redis (optional) ─────────────────────────────────────
+let upstashLimiter: any = null;
+let upstashInitDone = false;
+
+async function initUpstash() {
+  if (upstashInitDone) return;
+  upstashInitDone = true;
+
+  if (process.env.UPSTASH_REDIS_REST_URL && process.env.UPSTASH_REDIS_REST_TOKEN) {
+    try {
+      // @ts-ignore — optional dependency, falls back to in-memory if not installed
+      const { Ratelimit } = await import('@upstash/ratelimit');
+      // @ts-ignore — optional dependency
+      const { Redis } = await import('@upstash/redis');
+
+      const redis = new Redis({
+        url: process.env.UPSTASH_REDIS_REST_URL,
+        token: process.env.UPSTASH_REDIS_REST_TOKEN,
+      });
+
+      upstashLimiter = new Ratelimit({
+        redis,
+        limiter: Ratelimit.slidingWindow(60, '1 m'),
+        analytics: false,
+        prefix: 'chimerai:rl',
+      });
+    } catch {
+      // @upstash packages not installed — use in-memory
+    }
+  }
+}
+
+// ── Public API ───────────────────────────────────────────────────
+
+/**
+ * Check rate limit for a session-based user.
+ */
+export async function checkSessionRateLimit(userId: string): Promise<RateLimitResult> {
+  return checkRateLimit('session:' + userId, RATE_LIMITS.session);
+}
+
+/**
+ * Check rate limit for an API-key-based request.
+ */
+export async function checkApiKeyRateLimit(apiKeyId: string): Promise<RateLimitResult> {
+  return checkRateLimit('apikey:' + apiKeyId, RATE_LIMITS.apiKey);
+}
+
+/**
+ * Generic rate limit check. Tries Upstash first, falls back to in-memory.
+ */
+export async function checkRateLimit(
+  identifier: string,
+  config: { maxRequests: number; windowMs: number } = RATE_LIMITS.global
+): Promise<RateLimitResult> {
+  await initUpstash();
+
+  // Try Upstash first
+  if (upstashLimiter) {
+    try {
+      const result = await upstashLimiter.limit(identifier);
+      return {
+        allowed: result.success,
+        remaining: result.remaining,
+        resetAt: result.reset,
+        retryAfterMs: result.success ? 0 : Math.max(0, result.reset - Date.now()),
+      };
+    } catch {
+      // Upstash failed — fall through to in-memory
+    }
+  }
+
+  // In-memory fallback
+  return checkInMemory(identifier, config.maxRequests, config.windowMs);
+}
+
+/**
+ * Adds rate limit headers to a Response.
+ */
+export function withRateLimitHeaders(
+  response: Response,
+  result: RateLimitResult
+): Response {
+  const headers = new Headers(response.headers);
+  headers.set('X-RateLimit-Remaining', String(result.remaining));
+  headers.set('X-RateLimit-Reset', String(Math.ceil(result.resetAt / 1000)));
+  if (!result.allowed) {
+    headers.set('Retry-After', String(Math.ceil(result.retryAfterMs / 1000)));
+  }
+  return new Response(response.body, {
+    status: response.status,
+    statusText: response.statusText,
+    headers,
+  });
+}
+
+// ── Startup Warning ──────────────────────────────────────────────
+if (process.env.NODE_ENV === 'production' && !process.env.UPSTASH_REDIS_REST_URL) {
+  console.warn(
+    '⚠️  UPSTASH_REDIS_REST_URL not configured. Rate-limiting uses in-memory fallback. ' +
+    'This works for single-instance deployments but NOT for serverless (Vercel, AWS Lambda). ' +
+    'For serverless: configure Upstash Redis → https://upstash.com'
+  );
+}
+`;
+}