@chimerai/cli 0.2.73

package/dist/templates/components.js

@@ -0,0 +1,672 @@
+"use strict";
+/**
+ * Reusable component page templates
+ * Generates provider management and prompt management pages
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateModelProvidersPage = generateModelProvidersPage;
+exports.generatePromptManagementPage = generatePromptManagementPage;
+exports.generatePromptSelector = generatePromptSelector;
+/**
+ * Generates the Model Providers management page
+ * Self-contained — no external @chimerai/* imports needed
+ * @returns TypeScript/JSX content for app/dashboard/providers/page.tsx
+ */
+function generateModelProvidersPage() {
+    return `// @chimerai component=ModelProvidersPage version=1.0
+// Model Providers Management Page
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useSession } from 'next-auth/react';
+
+interface ProviderModel {
+  id: string;
+  modelId: string;
+  name: string;
+  capabilities: string[];
+}
+
+interface Provider {
+  id: string;
+  name: string;
+  type: string;
+  baseUrl?: string;
+  status: string;
+  isDefault: boolean;
+  models: ProviderModel[];
+  createdAt: string;
+}
+
+interface ProviderFormData {
+  name: string;
+  type: string;
+  apiKey: string;
+  baseUrl: string;
+  defaultModel: string;
+}
+
+interface TestResult {
+  success: boolean;
+  responseTime?: number;
+  errorMessage?: string;
+}
+
+const PROVIDER_TYPES = [
+  { value: 'openai', label: 'OpenAI', placeholder: 'https://api.openai.com/v1' },
+  { value: 'anthropic', label: 'Anthropic', placeholder: 'https://api.anthropic.com' },
+  { value: 'ollama', label: 'Ollama (Local)', placeholder: 'http://localhost:11434' },
+  { value: 'groq', label: 'Groq', placeholder: 'https://api.groq.com/openai/v1' },
+  { value: 'google', label: 'Google AI', placeholder: '' },
+  { value: 'custom', label: 'Custom OpenAI-Compatible', placeholder: '' },
+];
+
+const emptyForm: ProviderFormData = { name: '', type: 'openai', apiKey: '', baseUrl: '', defaultModel: '' };
+
+export default function ProvidersPage() {
+  const { data: session } = useSession();
+  const [providers, setProviders] = useState<Provider[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [formData, setFormData] = useState<ProviderFormData>(emptyForm);
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState<Record<string, boolean>>({});
+  const [testResults, setTestResults] = useState<Record<string, TestResult>>({});
+  const [error, setError] = useState<string | null>(null);
+  const [editingModels, setEditingModels] = useState<ProviderModel[]>([]);
+
+  const fetchProviders = useCallback(async () => {
+    try {
+      const res = await fetch('/api/providers');
+      if (!res.ok) throw new Error('Failed to load providers');
+      const data = await res.json();
+      setProviders(data.providers || data || []);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchProviders(); }, [fetchProviders]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+    setError(null);
+    try {
+      const url = editingId ? \`/api/providers/\${editingId}\` : '/api/providers';
+      const method = editingId ? 'PUT' : 'POST';
+      const config: Record<string, string> = {};
+      if (formData.apiKey) config.apiKey = formData.apiKey;
+      if (formData.baseUrl) config.baseUrl = formData.baseUrl;
+      if (formData.defaultModel) config.defaultModel = formData.defaultModel;
+      const body: Record<string, any> = {
+        name: formData.name,
+        type: formData.type,
+        config,
+      };
+
+      const res = await fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+      if (!res.ok) throw new Error('Failed to save provider');
+      setShowForm(false);
+      setEditingId(null);
+      setFormData(emptyForm);
+      await fetchProviders();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Delete this provider?')) return;
+    try {
+      await fetch(\`/api/providers/\${id}\`, { method: 'DELETE' });
+      await fetchProviders();
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  const handleTest = async (id: string) => {
+    setTesting(prev => ({ ...prev, [id]: true }));
+    try {
+      const res = await fetch(\`/api/providers/\${id}/test\`, { method: 'POST' });
+      const data = await res.json();
+      setTestResults(prev => ({ ...prev, [id]: data }));
+      // Auto-sync models after successful test
+      if (data.success) {
+        await handleSync(id);
+      }
+    } catch {
+      setTestResults(prev => ({ ...prev, [id]: { success: false, errorMessage: 'Connection failed' } }));
+    } finally {
+      setTesting(prev => ({ ...prev, [id]: false }));
+    }
+  };
+
+  const [syncing, setSyncing] = useState<Record<string, boolean>>({});
+  const handleSync = async (id: string) => {
+    setSyncing(prev => ({ ...prev, [id]: true }));
+    try {
+      const res = await fetch(\`/api/providers/\${id}/sync\`, { method: 'POST' });
+      const data = await res.json();
+      if (data.success) {
+        await fetchProviders();
+      }
+    } catch {
+      // Sync failed silently — models will appear on next manual sync
+    } finally {
+      setSyncing(prev => ({ ...prev, [id]: false }));
+    }
+  };
+
+  const handleToggleStatus = async (id: string, currentStatus: string) => {
+    const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
+    try {
+      const res = await fetch(\`/api/providers/\${id}\`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status: newStatus }),
+      });
+      if (!res.ok) throw new Error('Failed to update status');
+      await fetchProviders();
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  const openEdit = (provider: Provider) => {
+    // Parse config safely (PostgreSQL returns JSON object, SQLite returns JSON string)
+    const rawConfig = (provider as any).config;
+    const providerConfig: { defaultModel?: string } | null =
+      typeof rawConfig === 'string' ? (() => { try { return JSON.parse(rawConfig); } catch { return null; } })() : rawConfig || null;
+    setFormData({ name: provider.name, type: provider.type, apiKey: '', baseUrl: provider.baseUrl || '', defaultModel: providerConfig?.defaultModel || '' });
+    setEditingModels(provider.models || []);
+    setEditingId(provider.id);
+    setShowForm(true);
+  };
+
+  if (!session?.user?.id) {
+    return <div className="container mx-auto py-8"><p className="text-center text-gray-500">Please sign in to manage model providers.</p></div>;
+  }
+
+  return (
+    <div className="container mx-auto py-8 max-w-5xl">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-3xl font-bold mb-1 dark:text-white">AI Model Providers</h1>
+          <p className="text-gray-600 dark:text-gray-400">Manage your AI model provider connections</p>
+        </div>
+        <button onClick={() => { setFormData(emptyForm); setEditingId(null); setEditingModels([]); setShowForm(true); }}
+          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
+          + Add Provider
+        </button>
+      </div>
+
+      {error && <div className="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 rounded-lg">{error}</div>}
+
+      {showForm && (
+        <div className="mb-6 p-6 border dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 shadow-sm">
+          <h2 className="text-lg font-semibold mb-4 dark:text-white">{editingId ? 'Edit' : 'Add'} Provider</h2>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium mb-1 dark:text-gray-300">Name</label>
+                <input type="text" required value={formData.name}
+                  onChange={e => setFormData(f => ({ ...f, name: e.target.value }))}
+                  className="w-full px-3 py-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white" placeholder="My OpenAI" />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1 dark:text-gray-300">Type</label>
+                <select value={formData.type} onChange={e => setFormData(f => ({ ...f, type: e.target.value }))}
+                  className="w-full px-3 py-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white">
+                  {PROVIDER_TYPES.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
+                </select>
+              </div>
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-1 dark:text-gray-300">API Key {editingId ? '(leave empty to keep current)' : formData.type === 'ollama' ? '(optional for Ollama)' : ''}</label>
+              <input type="password" value={formData.apiKey}
+                onChange={e => setFormData(f => ({ ...f, apiKey: e.target.value }))}
+                className="w-full px-3 py-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white" placeholder={formData.type === 'ollama' ? '(not required)' : 'sk-...'} required={!editingId && formData.type !== 'ollama'} />
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-1 dark:text-gray-300">Base URL (optional)</label>
+              <input type="text" value={formData.baseUrl}
+                onChange={e => setFormData(f => ({ ...f, baseUrl: e.target.value }))}
+                className="w-full px-3 py-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
+                placeholder={PROVIDER_TYPES.find(t => t.value === formData.type)?.placeholder || ''} />
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-1 dark:text-gray-300">Default Model</label>
+              {editingModels.length > 0 ? (
+                <select value={formData.defaultModel}
+                  onChange={e => setFormData(f => ({ ...f, defaultModel: e.target.value }))}
+                  className="w-full px-3 py-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white">
+                  <option value="">— Select a model —</option>
+                  {editingModels
+                    .filter(m => !m.capabilities || m.capabilities.length === 0 || m.capabilities.some(c => ['chat', 'completion'].includes(c)))
+                    .map(m => <option key={m.id} value={m.modelId}>{m.name || m.modelId}</option>)}
+                </select>
+              ) : (
+                <input type="text" value={formData.defaultModel}
+                  onChange={e => setFormData(f => ({ ...f, defaultModel: e.target.value }))}
+                  className="w-full px-3 py-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
+                  placeholder="e.g. gpt-4o-mini" />
+              )}
+              <p className="text-xs text-gray-400 mt-1">Used when the widget does not specify a model.{editingModels.length === 0 && editingId ? ' Sync models first to see available options.' : ''}</p>
+            </div>
+            <div className="flex gap-2">
+              <button type="submit" disabled={saving}
+                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50">
+                {saving ? 'Saving...' : editingId ? 'Update' : 'Create'}
+              </button>
+              <button type="button" onClick={() => setShowForm(false)}
+                className="px-4 py-2 border dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 dark:text-gray-300">Cancel</button>
+            </div>
+          </form>
+        </div>
+      )}
+
+      {loading ? (
+        <div className="space-y-4">{[1,2,3].map(i => <div key={i} className="h-32 bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse" />)}</div>
+      ) : providers.length === 0 ? (
+        <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+          <p className="text-lg mb-2">No providers configured</p>
+          <p>Click "Add Provider" to connect your first AI model provider.</p>
+        </div>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2">
+          {providers.map(provider => (
+            <div key={provider.id} className="p-5 border dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 shadow-sm">
+              <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-2">
+                  <h3 className="font-semibold text-lg dark:text-white">{provider.name}</h3>
+                  {provider.isDefault && <span className="text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 px-2 py-0.5 rounded-full">Default</span>}
+                </div>
+                <span className={\`text-xs px-2 py-0.5 rounded-full \${provider.status === 'active' ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}\`}>
+                  {provider.status}
+                </span>
+              </div>
+              <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">Type: {provider.type}</p>
+              {provider.models.length > 0 && (
+                <div className="flex flex-wrap gap-1 mb-3">
+                  {provider.models.slice(0, 4).map(m => (
+                    <span key={m.id} className="text-xs bg-gray-100 dark:bg-gray-700 dark:text-gray-300 px-2 py-0.5 rounded">{m.name || m.modelId}</span>
+                  ))}
+                  {provider.models.length > 4 && <span className="text-xs text-gray-400">+{provider.models.length - 4} more</span>}
+                </div>
+              )}
+              {testResults[provider.id] && (
+                <div className={\`text-sm p-2 rounded mb-3 \${testResults[provider.id].success ? 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300' : 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300'}\`}>
+                  {testResults[provider.id].success ? \`✓ Connected (\${testResults[provider.id].responseTime}ms)\` : \`✗ \${testResults[provider.id].errorMessage}\`}
+                </div>
+              )}
+              <div className="flex gap-2 mt-3 pt-3 border-t dark:border-gray-700">
+                <button onClick={() => handleTest(provider.id)} disabled={testing[provider.id]}
+                  className="text-sm px-3 py-1 border dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 dark:text-gray-300 disabled:opacity-50">
+                  {testing[provider.id] ? 'Testing...' : 'Test'}
+                </button>
+                <button onClick={() => handleSync(provider.id)} disabled={syncing[provider.id]}
+                  className="text-sm px-3 py-1 border dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 dark:text-gray-300 disabled:opacity-50">
+                  {syncing[provider.id] ? 'Syncing...' : 'Sync Models'}
+                </button>
+                <button onClick={() => openEdit(provider)} className="text-sm px-3 py-1 border dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 dark:text-gray-300">Edit</button>
+                <button onClick={() => handleToggleStatus(provider.id, provider.status)}
+                  className={\`text-sm px-3 py-1 border rounded \${provider.status === 'active' ? 'border-yellow-200 dark:border-yellow-800 text-yellow-600 dark:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20' : 'border-green-200 dark:border-green-800 text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20'}\`}>
+                  {provider.status === 'active' ? 'Deactivate' : 'Activate'}
+                </button>
+                <button onClick={() => handleDelete(provider.id)}
+                  className="text-sm px-3 py-1 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 rounded hover:bg-red-50 dark:hover:bg-red-900/20">Delete</button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+`;
+}
+/**
+ * Generates the Prompt Management page
+ * v2: PROMPT_CATEGORIES, isDefault toggle, auto-extracted variable display, shared PromptModal
+ * @returns TypeScript/JSX content for app/dashboard/prompts/page.tsx
+ */
+function generatePromptManagementPage() {
+    return `// @chimerai component=PromptManagementPage version=2.0
+'use client';
+
+import { useState, useEffect } from 'react';
+
+const PROMPT_CATEGORIES = [
+  { value: 'system',  label: 'System Prompt', description: 'Chat conversation behavior' },
+  { value: 'rag',     label: 'RAG Template',  description: 'Document context framing' },
+  { value: 'widget',  label: 'Widget Prompt', description: 'For embedded chat widget' },
+  { value: 'user',    label: 'User Template', description: 'Suggested user prompts' },
+] as const;
+
+interface PromptTemplate {
+  id: string;
+  name: string;
+  category: string;
+  description?: string;
+  content: string;
+  variables: string[];
+  language: string;
+  version: number;
+  isActive: boolean;
+  isDefault: boolean;
+  tags: string[];
+  createdBy: string | null;
+}
+
+const EMPTY_FORM = { name: '', category: 'system', description: '', content: '', language: 'en' };
+
+export default function PromptsPage() {
+  const [templates, setTemplates] = useState<PromptTemplate[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [categoryFilter, setCategoryFilter] = useState('all');
+  const [showCreate, setShowCreate] = useState(false);
+  const [showEdit, setShowEdit] = useState(false);
+  const [current, setCurrent] = useState<PromptTemplate | null>(null);
+  const [formData, setFormData] = useState(EMPTY_FORM);
+  const [error, setError] = useState('');
+
+  useEffect(() => { fetchTemplates(); }, []);
+
+  async function fetchTemplates() {
+    try {
+      const res = await fetch('/api/prompts');
+      const data = await res.json();
+      setTemplates(Array.isArray(data) ? data : []);
+    } catch { console.error('Failed to fetch templates'); }
+    finally { setLoading(false); }
+  }
+
+  async function handleCreate(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    const res = await fetch('/api/prompts', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(formData),
+    });
+    if (!res.ok) { setError((await res.json()).error || 'Failed to create'); return; }
+    setShowCreate(false);
+    setFormData(EMPTY_FORM);
+    fetchTemplates();
+  }
+
+  async function handleUpdate(e: React.FormEvent) {
+    e.preventDefault();
+    if (!current) return;
+    setError('');
+    const res = await fetch(\`/api/prompts/\${current.id}\`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(formData),
+    });
+    if (!res.ok) { setError((await res.json()).error || 'Failed to update'); return; }
+    setShowEdit(false);
+    setCurrent(null);
+    fetchTemplates();
+  }
+
+  async function handleDelete(id: string) {
+    if (!confirm('Delete this template?')) return;
+    const res = await fetch(\`/api/prompts/\${id}\`, { method: 'DELETE' });
+    if (res.ok) fetchTemplates();
+  }
+
+  async function handleSetDefault(id: string) {
+    const res = await fetch(\`/api/prompts/\${id}/set-default\`, { method: 'POST' });
+    if (res.ok) fetchTemplates();
+  }
+
+  function openEdit(t: PromptTemplate) {
+    setCurrent(t);
+    setFormData({ name: t.name, category: t.category, description: t.description || '', content: t.content, language: t.language });
+    setError('');
+    setShowEdit(true);
+  }
+
+  function getCategoryLabel(v: string) {
+    return PROMPT_CATEGORIES.find(c => c.value === v)?.label ?? v;
+  }
+
+  const filtered = templates.filter(t =>
+    (categoryFilter === 'all' || t.category === categoryFilter) &&
+    (!searchQuery || t.name.toLowerCase().includes(searchQuery.toLowerCase()) || t.description?.toLowerCase().includes(searchQuery.toLowerCase()))
+  );
+
+  if (loading) return <div className="p-8 text-gray-500">Loading...</div>;
+
+  return (
+    <div className="container mx-auto py-8 px-4 max-w-4xl">
+      <div className="flex justify-between items-center mb-6">
+        <div>
+          <h1 className="text-2xl font-bold">Prompt Templates</h1>
+          <p className="text-sm text-gray-500 mt-1">Manage system prompts and RAG templates for your AI</p>
+        </div>
+        <button
+          onClick={() => { setFormData(EMPTY_FORM); setError(''); setShowCreate(true); }}
+          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium"
+        >
+          + Create Template
+        </button>
+      </div>
+
+      <div className="mb-4 flex gap-3">
+        <input
+          type="text"
+          placeholder="Search templates..."
+          value={searchQuery}
+          onChange={e => setSearchQuery(e.target.value)}
+          className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm"
+        />
+        <select
+          value={categoryFilter}
+          onChange={e => setCategoryFilter(e.target.value)}
+          className="px-3 py-2 border border-gray-300 rounded-lg text-sm"
+        >
+          <option value="all">All Categories</option>
+          {PROMPT_CATEGORIES.map(c => (
+            <option key={c.value} value={c.value}>{c.label}</option>
+          ))}
+        </select>
+      </div>
+
+      {filtered.length === 0 && (
+        <div className="text-center py-12 text-gray-400">No templates found.</div>
+      )}
+
+      <div className="space-y-3">
+        {filtered.map(template => (
+          <div key={template.id} className="border border-gray-200 rounded-lg p-4 bg-white hover:border-gray-300 transition-colors">
+            <div className="flex justify-between items-start gap-4">
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 flex-wrap mb-1">
+                  <h3 className="font-semibold text-gray-900">{template.name}</h3>
+                  <span className="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">{getCategoryLabel(template.category)}</span>
+                  {template.isDefault && <span className="px-2 py-0.5 bg-green-100 text-green-700 rounded text-xs font-medium">Default</span>}
+                  {template.createdBy === null && <span className="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-xs">System</span>}
+                </div>
+                {template.description && <p className="text-sm text-gray-500 mb-2">{template.description}</p>}
+                <p className="text-xs text-gray-400 line-clamp-2 font-mono bg-gray-50 p-2 rounded">{template.content}</p>
+                {template.variables.length > 0 && (
+                  <div className="mt-2 flex items-center gap-1 flex-wrap">
+                    <span className="text-xs text-gray-400">Variables:</span>
+                    {template.variables.map(v => (
+                      <span key={v} className="px-1.5 py-0.5 bg-yellow-50 text-yellow-700 rounded text-xs font-mono">{'{{' + v + '}}'}</span>
+                    ))}
+                  </div>
+                )}
+              </div>
+              <div className="flex items-center gap-2 shrink-0">
+                {!template.isDefault && (
+                  <button
+                    onClick={() => handleSetDefault(template.id)}
+                    className="px-2 py-1 text-xs text-gray-500 border border-gray-200 rounded hover:border-green-400 hover:text-green-600 transition-colors"
+                    title="Set as default for this category"
+                  >
+                    Set Default
+                  </button>
+                )}
+                {template.createdBy !== null && (
+                  <>
+                    <button onClick={() => openEdit(template)} className="px-2 py-1 text-xs text-blue-600 border border-blue-200 rounded hover:bg-blue-50">Edit</button>
+                    <button onClick={() => handleDelete(template.id)} className="px-2 py-1 text-xs text-red-600 border border-red-200 rounded hover:bg-red-50">Delete</button>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {showCreate && (
+        <PromptModal
+          title="Create Prompt Template"
+          formData={formData}
+          setFormData={setFormData}
+          onSubmit={handleCreate}
+          onCancel={() => setShowCreate(false)}
+          submitLabel="Create"
+          error={error}
+        />
+      )}
+      {showEdit && (
+        <PromptModal
+          title="Edit Prompt Template"
+          formData={formData}
+          setFormData={setFormData}
+          onSubmit={handleUpdate}
+          onCancel={() => { setShowEdit(false); setCurrent(null); }}
+          submitLabel="Save Changes"
+          error={error}
+        />
+      )}
+    </div>
+  );
+}
+
+function PromptModal({
+  title, formData, setFormData, onSubmit, onCancel, submitLabel, error,
+}: {
+  title: string;
+  formData: any;
+  setFormData: (d: any) => void;
+  onSubmit: (e: React.FormEvent) => void;
+  onCancel: () => void;
+  submitLabel: string;
+  error: string;
+}) {
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-xl p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+        <h2 className="text-xl font-bold mb-4">{title}</h2>
+        {error && <div className="mb-4 p-3 bg-red-50 text-red-700 rounded-lg text-sm">{error}</div>}
+        <form onSubmit={onSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
+            <input type="text" value={formData.name} onChange={e => setFormData({ ...formData, name: e.target.value })} required placeholder="e.g. Customer Support Agent" className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Category</label>
+            <select value={formData.category} onChange={e => setFormData({ ...formData, category: e.target.value })} required className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
+              {PROMPT_CATEGORIES.map(c => <option key={c.value} value={c.value}>{c.label} - {c.description}</option>)}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
+            <input type="text" value={formData.description} onChange={e => setFormData({ ...formData, description: e.target.value })} placeholder="Brief description" className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Content
+              <span className="ml-1 text-xs text-gray-400 font-normal">Use {'{{variable}}'} for dynamic placeholders</span>
+            </label>
+            <textarea value={formData.content} onChange={e => setFormData({ ...formData, content: e.target.value })} required rows={6} placeholder="You are a helpful assistant..." className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono" />
+          </div>
+          <div className="flex gap-2 pt-2">
+            <button type="submit" className="flex-1 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium">{submitLabel}</button>
+            <button type="button" onClick={onCancel} className="flex-1 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm">Cancel</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+`;
+}
+/**
+ * Generates the PromptSelector dropdown component for use in the chat UI
+ * @returns TypeScript/JSX content for components/chat/prompt-selector.tsx
+ */
+function generatePromptSelector() {
+    return `// @chimerai component=PromptSelector version=1.0
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface PromptOption {
+  id: string;
+  name: string;
+  isDefault: boolean;
+}
+
+interface PromptSelectorProps {
+  value: string | null;
+  onChange: (promptId: string | null) => void;
+  /** Filter to this category (default: 'system') */
+  category?: string;
+  placeholder?: string;
+  className?: string;
+}
+
+/**
+ * Dropdown to select a prompt template for a chat conversation.
+ * Usage: <PromptSelector value={promptId} onChange={setPromptId} category="system" />
+ */
+export function PromptSelector({
+  value,
+  onChange,
+  category = 'system',
+  placeholder = 'No system prompt',
+  className = '',
+}: PromptSelectorProps) {
+  const [prompts, setPrompts] = useState<PromptOption[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(\`/api/prompts?category=\${category}\`)
+      .then(r => r.json())
+      .then(data => setPrompts(Array.isArray(data) ? data : []))
+      .catch(() => setPrompts([]))
+      .finally(() => setLoading(false));
+  }, [category]);
+
+  return (
+    <select
+      value={value || ''}
+      onChange={e => onChange(e.target.value || null)}
+      disabled={loading}
+      className={\`px-3 py-2 border border-gray-300 rounded-lg text-sm bg-white disabled:opacity-50 \${className}\`}
+    >
+      <option value="">{placeholder}</option>
+      {prompts.map(p => (
+        <option key={p.id} value={p.id}>
+          {p.name}{p.isDefault ? ' (Default)' : ''}
+        </option>
+      ))}
+    </select>
+  );
+}
+`;
+}

package/dist/templates/config.d.ts

@@ -0,0 +1,6 @@
+export declare function generateNextConfig(): string;
+export declare function generateTsConfig(): string;
+export declare function generateTailwindConfig(): string;
+export declare function generatePostcssConfig(): string;
+export declare function generateGlobalsCss(): string;
+//# sourceMappingURL=config.d.ts.map

package/dist/templates/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/templates/config.ts"],"names":[],"mappings":"AAAA,wBAAgB,kBAAkB,IAAI,MAAM,CAS3C;AAED,wBAAgB,gBAAgB,IAAI,MAAM,CA6BzC;AAED,wBAAgB,sBAAsB,IAAI,MAAM,CAgB/C;AAED,wBAAgB,qBAAqB,IAAI,MAAM,CAQ9C;AAED,wBAAgB,kBAAkB,IAAI,MAAM,CAY3C"}