@chimerai/cli 0.2.73

package/dist/templates/chat.js

@@ -0,0 +1,1979 @@
+"use strict";
+/**
+ * Chat component and API route templates
+ * Generates streaming chat UI, conversation management, and AI model integration
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateChatPage = generateChatPage;
+exports.generateChatStreamRouteWithPersistence = generateChatStreamRouteWithPersistence;
+exports.generateConversationsRoute = generateConversationsRoute;
+exports.generateUseChatHook = generateUseChatHook;
+exports.generateChatMessage = generateChatMessage;
+exports.generateChatInput = generateChatInput;
+exports.generateChatSidebar = generateChatSidebar;
+exports.generateModelSelector = generateModelSelector;
+exports.generateConversationDetailRoute = generateConversationDetailRoute;
+/**
+ * Generates the main chat page component
+ * Displays conversations, allows provider selection, integrates StreamingChat component
+ * @returns TypeScript/JSX content for app/dashboard/chat/page.tsx
+ */
+function generateChatPage() {
+    return `// @chimerai component=ChatPage version=2.0
+'use client';
+
+import { useSession, signOut } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useRef, useState } from 'react';
+import { useAppName } from '@/lib/use-app-name';
+import { useChat } from '@/components/chat/use-chat';
+import { ChatMessage } from '@/components/chat/chat-message';
+import { ChatInput } from '@/components/chat/chat-input';
+import { ChatSidebar } from '@/components/chat/chat-sidebar';
+import { ModelSelector } from '@/components/chat/model-selector';
+import type { MessageActions } from '@/components/chat/chat-message';
+
+export default function ChatPage() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const appName = useAppName();
+
+  const {
+    messages,
+    isStreaming,
+    conversations,
+    selectedConversationId,
+    models,
+    selectedModelId,
+    creditBalance,
+    isLoadingConversation,
+    sendMessage,
+    stopStreaming,
+    selectConversation,
+    startNewChat,
+    deleteConversation,
+    renameConversation,
+    setSelectedModelId,
+    regenerateMessage,
+    editMessage,
+    deleteMessage,
+  } = useChat();
+
+  // Auth redirect
+  useEffect(() => {
+    if (status === 'loading') return;
+    if (status === 'unauthenticated') router.push('/auth/signin');
+  }, [status, router]);
+
+  // Set page title
+  useEffect(() => {
+    document.title = \`Chat \u2014 \${appName}\`;
+  }, [appName]);
+
+  // Auto-scroll
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // Close sidebar on conversation select (mobile)
+  const handleSelectConversation = (id: string) => {
+    selectConversation(id);
+    setSidebarOpen(false);
+  };
+
+  const handleNewChat = () => {
+    startNewChat();
+    setSidebarOpen(false);
+  };
+
+  if (status === 'loading' || !session) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <div className="text-gray-400">Loading...</div>
+      </div>
+    );
+  }
+
+  const messageActions: MessageActions = {
+    onRegenerate: regenerateMessage,
+    onEdit: editMessage,
+    onDelete: deleteMessage,
+  };
+
+  return (
+    <div className="flex h-screen bg-white dark:bg-gray-950 relative">
+      {/* Mobile Overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-30 md:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      {/* Sidebar — fixed on mobile, static on desktop */}
+      <aside className={\`fixed inset-y-0 left-0 z-40 w-72 border-r border-gray-200 dark:border-gray-800 transform transition-transform duration-200 ease-in-out
+        \${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
+        md:relative md:translate-x-0 md:z-auto\`}>
+        <ChatSidebar
+          conversations={conversations}
+          selectedId={selectedConversationId}
+          onSelect={handleSelectConversation}
+          onNewChat={handleNewChat}
+          onDelete={deleteConversation}
+          onRename={renameConversation}
+        />
+      </aside>
+
+      {/* Main Area */}
+      <main className="flex-1 flex flex-col min-w-0">
+        {/* Header */}
+        <div className="flex items-center gap-3 border-b border-gray-200 dark:border-gray-800 px-4 py-2">
+          <button
+            onClick={() => setSidebarOpen(!sidebarOpen)}
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 md:hidden"
+            aria-label="Toggle sidebar"
+          >
+            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+          <ModelSelector
+            models={models}
+            value={selectedModelId}
+            onValueChange={setSelectedModelId}
+            disabled={isStreaming}
+          />
+          <div className="flex-1" />
+          {selectedConversationId && (
+            <span className="text-xs text-gray-400">Conversation active</span>
+          )}
+          <button
+            onClick={() => signOut({ callbackUrl: '/auth/signin' })}
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors"
+            title="Sign out"
+          >
+            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Messages Area */}
+        <div className="flex-1 overflow-y-auto">
+          {isLoadingConversation ? (
+            <div className="flex items-center justify-center h-full">
+              <div className="text-gray-400">Loading conversation...</div>
+            </div>
+          ) : messages.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-full text-center px-4">
+              <svg className="h-12 w-12 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+              </svg>
+              <h2 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-1">Start a conversation</h2>
+              <p className="text-sm text-gray-400">Send a message to begin chatting with AI</p>
+            </div>
+          ) : (
+            <div className="max-w-3xl mx-auto">
+              {messages.map((msg, idx) => (
+                <ChatMessage
+                  key={msg.id || idx}
+                  message={msg}
+                  index={idx}
+                  actions={messageActions}
+                />
+              ))}
+              <div ref={messagesEndRef} />
+            </div>
+          )}
+        </div>
+
+        {/* Input */}
+        <ChatInput
+          onSend={sendMessage}
+          onStop={stopStreaming}
+          isStreaming={isStreaming}
+          creditBalance={creditBalance}
+        />
+      </main>
+    </div>
+  );
+}
+`;
+}
+/**
+ * Generates the streaming Chat API route — Direct LLM provider communication with DB persistence
+ * Handles conversation creation, message saving, multi-provider streaming (OpenAI, Anthropic, Ollama, Groq)
+ * @returns TypeScript content for app/api/v1/chat/stream/route.ts
+ */
+function generateChatStreamRouteWithPersistence() {
+    return `// @chimerai component=ChatStreamRoute version=2.0
+/**
+ * Streaming Chat API Route — Direct Provider Communication with DB Persistence
+ * POST /api/v1/chat/stream
+ *
+ * Communicates DIRECTLY with LLM providers (OpenAI, Anthropic, Ollama, Groq).
+ * Creates/loads conversations, saves messages to DB, streams tokens via SSE.
+ * No external AI Service required.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { resolveAuth } from '@/lib/auth/resolve-auth';
+import { prisma } from '@/lib/prisma';
+import { decrypt } from '@/lib/encryption';
+
+export const dynamic = 'force-dynamic';
+
+/** Default base URLs for known provider types */
+function getDefaultBaseUrl(providerType: string): string {
+  const defaults: Record<string, string> = {
+    openai: 'https://api.openai.com/v1',
+    anthropic: 'https://api.anthropic.com/v1',
+    ollama: 'http://localhost:11434',
+    groq: 'https://api.groq.com/openai/v1',
+    google: 'https://generativelanguage.googleapis.com/v1beta',
+  };
+  return defaults[providerType] || 'https://api.openai.com/v1';
+}
+
+/** Content extractor based on provider type */
+function getContentExtractor(providerType: string) {
+  switch (providerType) {
+    case 'anthropic':
+      return (parsed: any): string => {
+        if (parsed.type === 'content_block_delta') {
+          return parsed.delta?.text || '';
+        }
+        return '';
+      };
+    case 'ollama':
+      return (parsed: any): string => {
+        return parsed.message?.content || '';
+      };
+    case 'openai':
+    case 'groq':
+    case 'custom':
+    default:
+      return (parsed: any): string => {
+        return parsed.choices?.[0]?.delta?.content || '';
+      };
+  }
+}
+
+/** Token estimation as fallback when provider doesn't return exact counts */
+function estimateTokens(text: string, providerType: string): number {
+  const ratios: Record<string, number> = {
+    openai: 4.3,
+    groq: 4.3,
+    anthropic: 4.1,
+    ollama: 4.0,
+    google: 4.0,
+  };
+  const ratio = ratios[providerType] || 4.0;
+  return Math.ceil(text.length / ratio);
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    let auth;
+    try {
+      auth = await resolveAuth(request);
+    } catch (error: any) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: error.status || 401 });
+    }
+
+    // Scope check for API-Key auth
+    if (auth.authMethod === 'api-key' && auth.scopes) {
+      const hasChat = auth.scopes.includes('chat') || auth.scopes.includes('*') || auth.scopes.length === 0;
+      if (!hasChat) {
+        return NextResponse.json({ error: 'Insufficient scope. Required: chat' }, { status: 403 });
+      }
+    }
+
+    const payload = await request.json();
+    const { messages, model, providerId, conversationId, promptId } = payload;
+
+    if (!messages || !Array.isArray(messages) || messages.length === 0) {
+      return NextResponse.json({ error: 'Messages array is required' }, { status: 400 });
+    }
+
+    // --- 1. Load or create conversation ---
+    let conversation;
+    if (conversationId) {
+      conversation = await (prisma as any).conversation.findUnique({
+        where: { id: conversationId, userId: auth.userId },
+      });
+    }
+    if (!conversation) {
+      const firstUserMessage = messages.find((m: any) => m.role === 'user');
+      const title = firstUserMessage?.content?.slice(0, 50) || 'New Chat';
+      conversation = await (prisma as any).conversation.create({
+        data: {
+          userId: auth.userId,
+          title,
+          model: model || undefined,
+          providerId: providerId || undefined,
+        },
+      });
+    }
+
+    // --- 2. Save user message BEFORE streaming ---
+    const lastUserMessage = [...messages].reverse().find((m: any) => m.role === 'user');
+    if (lastUserMessage) {
+      await (prisma as any).message.create({
+        data: {
+          conversationId: conversation.id,
+          role: 'user',
+          content: lastUserMessage.content,
+        },
+      });
+    }
+
+    // --- 2.5. Load system prompt from prompt template ---
+    let systemPrompt: string | undefined;
+    try {
+      if (promptId) {
+        const tmpl = await (prisma as any).promptTemplate.findFirst({
+          where: { id: promptId, isActive: true },
+        });
+        if (tmpl) systemPrompt = tmpl.content;
+      } else {
+        const defaultTmpl = await (prisma as any).promptTemplate.findFirst({
+          where: { category: 'system', isDefault: true, isActive: true },
+        });
+        if (defaultTmpl) systemPrompt = defaultTmpl.content;
+      }
+    } catch { /* promptTemplate table may not exist in this app — continue without */ }
+
+    // Prepend system message (overrides any system message sent by client)
+    const messagesWithSystem = systemPrompt
+      ? [{ role: 'system', content: systemPrompt }, ...messages.filter((m: any) => m.role !== 'system')]
+      : messages;
+
+    // --- 3. Load provider and decrypt API key ---
+    let provider;
+    if (providerId) {
+      provider = await (prisma as any).provider.findUnique({ where: { id: providerId } });
+    }
+    // If a model was specified but no provider, look up which provider owns this model
+    if (!provider && model) {
+      const modelRecord = await (prisma as any).model.findFirst({
+        where: { modelId: model, provider: { status: 'active' } },
+        include: { provider: true },
+      });
+      if (modelRecord?.provider) {
+        provider = modelRecord.provider;
+      }
+    }
+    // Fallback: first active provider
+    if (!provider) {
+      provider = await (prisma as any).provider.findFirst({
+        where: { status: 'active' },
+        orderBy: { createdAt: 'asc' },
+      });
+    }
+    if (!provider) {
+      return NextResponse.json({ error: 'No active provider found. Please configure a provider first.' }, { status: 400 });
+    }
+
+    let apiKey: string | null = null;
+    try {
+      apiKey = provider.apiKey ? decrypt(provider.apiKey) : null;
+    } catch (err) {
+      console.error('Failed to decrypt provider API key:', err);
+      return NextResponse.json({ error: 'Provider API key decryption failed' }, { status: 500 });
+    }
+    const baseUrl = provider.baseUrl || getDefaultBaseUrl(provider.type);
+    const resolvedKey = apiKey || '';
+
+    // --- 4. Resolve model: explicit request > provider default > error ---
+    // Parse config safely (PostgreSQL returns JSON object, SQLite returns JSON string)
+    const rawConfig = provider.config;
+    const providerConfig: { defaultModel?: string } | null =
+      typeof rawConfig === 'string' ? (() => { try { return JSON.parse(rawConfig); } catch { return null; } })() : (rawConfig as any) || null;
+    const modelId = model || providerConfig?.defaultModel;
+
+    if (!modelId) {
+      return NextResponse.json(
+        { error: 'No model specified and no default model configured for this provider. Set a default model in provider settings.' },
+        { status: 400 }
+      );
+    }
+
+    let llmResponse: Response;
+
+    switch (provider.type) {
+      case 'anthropic':
+        llmResponse = await fetch(\`\${baseUrl}/messages\`, {
+          method: 'POST',
+          headers: {
+            'x-api-key': resolvedKey,
+            'anthropic-version': '2023-06-01',
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            model: modelId,
+            max_tokens: 4096,
+            messages: messagesWithSystem.filter((m: any) => m.role !== 'system'),
+            system: messagesWithSystem.find((m: any) => m.role === 'system')?.content || undefined,
+            stream: true,
+          }),
+        });
+        break;
+
+      case 'ollama':
+        llmResponse = await fetch(\`\${baseUrl}/api/chat\`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            model: modelId,
+            messages: messagesWithSystem,
+            stream: true,
+          }),
+        });
+        break;
+
+      case 'openai':
+      case 'groq':
+      case 'custom':
+      default:
+        llmResponse = await fetch(\`\${baseUrl}/chat/completions\`, {
+          method: 'POST',
+          headers: {
+            'Authorization': \`Bearer \${resolvedKey}\`,
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            model: modelId,
+            messages: messagesWithSystem,
+            stream: true,
+          }),
+        });
+        break;
+    }
+
+    if (!llmResponse.ok) {
+      const errorText = await llmResponse.text().catch(() => 'LLM provider error');
+      console.error(\`LLM provider error (\${provider.type}):\`, errorText);
+      return NextResponse.json(
+        { error: \`Provider error: \${errorText.slice(0, 200)}\` },
+        { status: llmResponse.status }
+      );
+    }
+
+    const llmReader = llmResponse.body?.getReader();
+    if (!llmReader) {
+      return NextResponse.json({ error: 'No response stream from provider' }, { status: 502 });
+    }
+
+    // --- 5. Stream parsing + forwarding ---
+    const extractContent = getContentExtractor(provider.type);
+
+    return new Response(
+      new ReadableStream({
+        async start(controller) {
+          const encoder = new TextEncoder();
+          const decoder = new TextDecoder();
+          let fullResponse = '';
+          let buffer = '';
+          let currentEventType: string | null = null;
+          let tokensUsed: number | null = null;
+
+          const sendToken = (content: string) => {
+            fullResponse += content;
+            controller.enqueue(
+              encoder.encode(\`data: \${JSON.stringify({
+                type: 'token',
+                content,
+                conversationId: conversation.id,
+              })}\\n\\n\`)
+            );
+          };
+
+          try {
+            while (true) {
+              const { done, value } = await llmReader.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.trim() === '') continue;
+
+                // SSE "event:" lines (Anthropic uses these)
+                if (line.startsWith('event: ')) {
+                  currentEventType = line.slice(7).trim();
+                  continue;
+                }
+
+                // SSE "data:" lines (OpenAI, Groq, Anthropic)
+                if (line.startsWith('data: ')) {
+                  const data = line.slice(6).trim();
+                  if (data === '[DONE]') continue;
+
+                  try {
+                    const parsed = JSON.parse(data);
+
+                    if (provider.type === 'anthropic') {
+                      if (currentEventType === 'content_block_delta') {
+                        const text = parsed.delta?.text || '';
+                        if (text) sendToken(text);
+                      } else if (currentEventType === 'message_delta') {
+                        if (parsed.usage?.output_tokens) {
+                          tokensUsed = parsed.usage.output_tokens;
+                        }
+                      } else if (currentEventType === 'message_stop') {
+                        // Stream ended
+                      }
+                    } else {
+                      const content = extractContent(parsed);
+                      if (content) sendToken(content);
+                    }
+                  } catch { /* skip unparseable lines */ }
+
+                  currentEventType = null;
+                }
+                // Ollama: raw JSON per line (no "data:" prefix)
+                else if (line.trim().startsWith('{')) {
+                  try {
+                    const parsed = JSON.parse(line);
+                    if (parsed.done) continue;
+                    const content = extractContent(parsed);
+                    if (content) sendToken(content);
+                  } catch { /* skip */ }
+                }
+              }
+            }
+
+            // --- 6. Save assistant message after stream ---
+            if (tokensUsed === null) {
+              tokensUsed = estimateTokens(fullResponse, provider.type);
+            }
+            await (prisma as any).message.create({
+              data: {
+                conversationId: conversation.id,
+                role: 'assistant',
+                content: fullResponse,
+                model: modelId,
+                tokens: tokensUsed,
+              },
+            });
+
+            // --- 6b. Track API usage for billing/credits ---
+            const inputTokens = estimateTokens(
+              messagesWithSystem.map((m: any) => m.content).join(' '),
+              provider.type
+            );
+            try {
+              await (prisma as any).apiUsage.create({
+                data: {
+                  userId: auth.userId,
+                  providerId: provider.id,
+                  model: modelId,
+                  endpoint: '/api/v1/chat/stream',
+                  promptTokens: inputTokens,
+                  completionTokens: tokensUsed,
+                  totalTokens: inputTokens + tokensUsed,
+                  tokensUsed: inputTokens + tokensUsed,
+                  creditsUsed: Math.ceil((inputTokens + tokensUsed) / 1000),
+                  cost: 0,
+                  success: true,
+                  responseTime: 0,
+                },
+              });
+            } catch (usageError) {
+              console.error('Failed to track API usage:', usageError);
+            }
+
+            // Update conversation updatedAt
+            await (prisma as any).conversation.update({
+              where: { id: conversation.id },
+              data: { updatedAt: new Date() },
+            });
+
+            // Send done event
+            controller.enqueue(
+              encoder.encode(\`data: \${JSON.stringify({
+                type: 'done',
+                conversationId: conversation.id,
+              })}\\n\\n\`)
+            );
+          } catch (error: any) {
+            controller.enqueue(
+              encoder.encode(\`data: \${JSON.stringify({
+                type: 'error',
+                message: error.message || 'Stream error',
+              })}\\n\\n\`)
+            );
+          } finally {
+            controller.close();
+          }
+        },
+      }),
+      {
+        headers: {
+          'Content-Type': 'text/event-stream',
+          'Cache-Control': 'no-cache',
+          'Connection': 'keep-alive',
+          'X-Accel-Buffering': 'no',
+        },
+      }
+    );
+  } catch (error: any) {
+    console.error('Stream route error:', error);
+    return NextResponse.json(
+      { error: error.message || 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}
+`;
+}
+/**
+ * Generates the Conversations API route for listing and creating conversations
+ * Handles conversation filtering, message count, and metadata
+ * @returns TypeScript content for app/api/conversations/route.ts
+ */
+function generateConversationsRoute() {
+    return `// @chimerai component=ConversationsRoute version=1.0
+import { NextRequest, NextResponse } from 'next/server';
+import { requireAuth, createErrorResponse } from '@/lib/api-protection';
+import { prisma } from '@/lib/prisma';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: NextRequest) {
+  const authResult = await requireAuth(request);
+
+  if (!authResult.authorized || !authResult.user) {
+    return createErrorResponse(authResult);
+  }
+
+  try {
+    const { searchParams } = new URL(request.url);
+    const archived = searchParams.get('archived') === 'true';
+
+    const conversations = await (prisma as any).conversation.findMany({
+      where: {
+        userId: authResult.user.id,
+        archived,
+      },
+      include: {
+        messages: {
+          take: 1,
+          orderBy: { createdAt: 'desc' },
+        },
+        _count: {
+          select: { messages: true },
+        },
+      },
+      orderBy: {
+        updatedAt: 'desc',
+      },
+    });
+
+    return NextResponse.json(conversations);
+  } catch (error) {
+    console.error('Failed to fetch conversations:', error);
+    return NextResponse.json({ error: 'Failed to fetch conversations' }, { status: 500 });
+  }
+}
+
+export async function POST(request: NextRequest) {
+  const authResult = await requireAuth(request);
+
+  if (!authResult.authorized || !authResult.user) {
+    return createErrorResponse(authResult);
+  }
+
+  try {
+    const body = await request.json();
+    const { title, model, metadata } = body;
+
+    const conversation = await (prisma as any).conversation.create({
+      data: {
+        userId: authResult.user.id,
+        title: title || 'New Chat',
+        model,
+        metadata,
+      },
+    });
+
+    return NextResponse.json(conversation);
+  } catch (error) {
+    console.error('Failed to create conversation:', error);
+    return NextResponse.json({ error: 'Failed to create conversation' }, { status: 500 });
+  }
+}
+`;
+}
+// ============================================================================
+// MODULAR CHAT COMPONENTS — Generated by CHAT_TEMPLATE_FIX_SPEC
+// ============================================================================
+/**
+ * Generates the useChat custom hook — the core chat logic
+ * Handles streaming, conversations, models, message management
+ * Based on apps/frontend/components/chat/use-chat.ts
+ * @returns TypeScript content for components/chat/use-chat.ts
+ */
+function generateUseChatHook() {
+    return `// @chimerai component=UseChatHook version=2.0
+'use client';
+
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+export interface ChatMessageData {
+  id?: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  model?: string | null;
+  tokens?: number | null;
+  createdAt?: string;
+  streaming?: boolean;
+}
+
+export interface ConversationItem {
+  id: string;
+  title: string;
+  updatedAt: string;
+  _count: {
+    messages: number;
+  };
+}
+
+export interface ModelOption {
+  id: string;
+  modelId: string;
+  name: string;
+  providerId: string;
+  providerType: string;
+  contextWindow: number;
+  inputCost: number;
+  outputCost: number;
+  capabilities: string[];
+  provider: {
+    id: string;
+    name: string;
+    type: string;
+  };
+}
+
+export interface MessageActions {
+  onRegenerate?: (index: number) => void;
+  onEdit?: (index: number, newContent: string) => void;
+  onDelete?: (index: number) => void;
+}
+
+export interface UseChatOptions {
+  onConversationCreated?: (id: string) => void;
+  onError?: (error: string) => void;
+}
+
+export interface UseChatReturn {
+  // State
+  messages: ChatMessageData[];
+  isStreaming: boolean;
+  conversations: ConversationItem[];
+  models: ModelOption[];
+  selectedConversationId: string | null;
+  selectedModelId: string;
+  isLoadingConversation: boolean;
+  isLoadingModels: boolean;
+  systemPrompt: string;
+  creditBalance: number | null;
+
+  // Actions
+  sendMessage: (content: string) => Promise<void>;
+  stopStreaming: () => void;
+  selectConversation: (id: string) => Promise<void>;
+  startNewChat: () => void;
+  deleteConversation: (id: string) => Promise<void>;
+  renameConversation: (id: string, title: string) => Promise<void>;
+  setSelectedModelId: (id: string) => void;
+  setSystemPrompt: (prompt: string) => void;
+  regenerateMessage: (index: number) => Promise<void>;
+  editMessage: (index: number, newContent: string) => Promise<void>;
+  deleteMessage: (index: number) => void;
+  refreshConversations: () => Promise<void>;
+}
+
+export function useChat(options: UseChatOptions = {}): UseChatReturn {
+  const [messages, setMessages] = useState<ChatMessageData[]>([]);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [conversations, setConversations] = useState<ConversationItem[]>([]);
+  const [models, setModels] = useState<ModelOption[]>([]);
+  const [selectedConversationId, setSelectedConversationId] = useState<string | null>(null);
+  const [selectedModelId, setSelectedModelId] = useState('');
+  const [isLoadingConversation, setIsLoadingConversation] = useState(false);
+  const [isLoadingModels, setIsLoadingModels] = useState(false);
+  const [systemPrompt, setSystemPrompt] = useState('');
+  const [creditBalance, setCreditBalance] = useState<number | null>(null);
+
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const conversationIdRef = useRef<string | null>(null);
+
+  // Keep ref in sync with state
+  useEffect(() => {
+    conversationIdRef.current = selectedConversationId;
+  }, [selectedConversationId]);
+
+  // --- Fetch Conversations ---
+  const refreshConversations = useCallback(async () => {
+    try {
+      const res = await fetch('/api/conversations');
+      if (res.ok) {
+        const data = await res.json();
+        setConversations(data);
+      }
+    } catch (err) {
+      console.error('Failed to fetch conversations:', err);
+    }
+  }, []);
+
+  // --- Fetch Models ---
+  const fetchModels = useCallback(async () => {
+    setIsLoadingModels(true);
+    try {
+      const res = await fetch('/api/models');
+      if (res.ok) {
+        const data = await res.json();
+        const modelList = Array.isArray(data) ? data : data.models || [];
+        setModels(modelList);
+        if (modelList.length > 0 && !selectedModelId) {
+          setSelectedModelId(modelList[0].id);
+        }
+      }
+    } catch (err) {
+      console.error('Failed to fetch models:', err);
+    } finally {
+      setIsLoadingModels(false);
+    }
+  }, [selectedModelId]);
+
+  // --- Fetch Credit Balance ---
+  const fetchCreditBalance = useCallback(async () => {
+    try {
+      const res = await fetch('/api/billing/credits');
+      if (res.ok) {
+        const data = await res.json();
+        setCreditBalance(data.balance ?? data.credits ?? null);
+      }
+    } catch {
+      // Credits endpoint may not exist — that's ok
+    }
+  }, []);
+
+  // Load on mount
+  useEffect(() => {
+    refreshConversations();
+    fetchModels();
+    fetchCreditBalance();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // --- Select Conversation ---
+  const selectConversation = useCallback(async (id: string) => {
+    conversationIdRef.current = id; // Set ref immediately to prevent race condition
+    setSelectedConversationId(id);
+    setIsLoadingConversation(true);
+    try {
+      const res = await fetch(\`/api/conversations/\${id}\`);
+      if (res.ok) {
+        const data = await res.json();
+        setMessages(
+          (data.messages || []).map((m: any) => ({
+            id: m.id,
+            role: m.role,
+            content: m.content,
+            model: m.model,
+            tokens: m.tokens,
+            createdAt: m.createdAt,
+          }))
+        );
+      }
+    } catch (err) {
+      console.error('Failed to load conversation:', err);
+    } finally {
+      setIsLoadingConversation(false);
+    }
+  }, []);
+
+  // --- New Chat ---
+  const startNewChat = useCallback(() => {
+    setSelectedConversationId(null);
+    setMessages([]);
+    conversationIdRef.current = null;
+  }, []);
+
+  // --- Send Message (Streaming) ---
+  const sendMessage = useCallback(
+    async (content: string) => {
+      if (isStreaming) return;
+
+      const userMessage: ChatMessageData = { role: 'user', content };
+      setMessages((prev) => [...prev, userMessage]);
+      setIsStreaming(true);
+
+      // Add empty assistant message placeholder
+      const assistantMessage: ChatMessageData = {
+        role: 'assistant',
+        content: '',
+        streaming: true,
+      };
+      setMessages((prev) => [...prev, assistantMessage]);
+
+      try {
+        abortControllerRef.current = new AbortController();
+
+        // Determine the model to use
+        const selectedModel = models.find((m) => m.id === selectedModelId);
+        const modelId = selectedModel?.modelId || 'gpt-4o-mini';
+        const providerId = selectedModel?.providerId || undefined;
+
+        // Collect all messages (excluding system — added separately)
+        const messagesToSend = [...messages, userMessage].filter((m) => m.role !== 'system');
+
+        const body: any = {
+          model: modelId,
+          messages: [
+            ...(systemPrompt.trim()
+              ? [{ role: 'system' as const, content: systemPrompt.trim() }]
+              : []),
+            ...messagesToSend.map((m) => ({
+              role: m.role,
+              content: m.content,
+            })),
+          ],
+          conversationId: conversationIdRef.current || undefined,
+          providerId,
+        };
+
+        const res = await fetch('/api/v1/chat/stream', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body),
+          signal: abortControllerRef.current.signal,
+        });
+
+        if (!res.ok) {
+          const err = await res.json().catch(() => ({ error: { message: 'Request failed' } }));
+          throw new Error(err.error?.message || \`HTTP \${res.status}\`);
+        }
+
+        const reader = res.body?.getReader();
+        if (!reader) throw new Error('No response body');
+
+        const decoder = new TextDecoder();
+        let buffer = '';
+
+        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 || data === '[DONE]') continue;
+
+            try {
+              const parsed = JSON.parse(data);
+
+              if (parsed.type === 'token') {
+                // Update conversation ID from first token
+                if (parsed.conversationId && !conversationIdRef.current) {
+                  conversationIdRef.current = parsed.conversationId;
+                  setSelectedConversationId(parsed.conversationId);
+                  options.onConversationCreated?.(parsed.conversationId);
+                }
+
+                // Append token to last assistant message
+                setMessages((prev) => {
+                  const lastIdx = prev.length - 1;
+                  if (lastIdx >= 0 && prev[lastIdx].role === 'assistant') {
+                    return [
+                      ...prev.slice(0, lastIdx),
+                      { ...prev[lastIdx], content: prev[lastIdx].content + parsed.content },
+                    ];
+                  }
+                  return prev;
+                });
+              } else if (parsed.type === 'done') {
+                setMessages((prev) => {
+                  const lastIdx = prev.length - 1;
+                  if (lastIdx >= 0 && prev[lastIdx].role === 'assistant') {
+                    return [
+                      ...prev.slice(0, lastIdx),
+                      { ...prev[lastIdx], streaming: false, model: modelId },
+                    ];
+                  }
+                  return prev;
+                });
+              } else if (parsed.type === 'error') {
+                throw new Error(parsed.message);
+              }
+            } catch (parseErr: any) {
+              if (parseErr.message && !parseErr.message.includes('JSON')) {
+                throw parseErr;
+              }
+              console.error('Failed to parse SSE data:', parseErr);
+            }
+          }
+        }
+
+        // Refresh conversations to pick up new/updated titles
+        refreshConversations();
+        fetchCreditBalance();
+      } catch (error: any) {
+        if (error.name !== 'AbortError') {
+          setMessages((prev) => {
+            const lastIdx = prev.length - 1;
+            if (lastIdx >= 0 && prev[lastIdx].role === 'assistant') {
+              return [
+                ...prev.slice(0, lastIdx),
+                { ...prev[lastIdx], content: \`Error: \${error.message}\`, streaming: false },
+              ];
+            }
+            return prev;
+          });
+        }
+      } finally {
+        setIsStreaming(false);
+        abortControllerRef.current = null;
+      }
+    },
+    [isStreaming, messages, models, selectedModelId, systemPrompt, options, refreshConversations, fetchCreditBalance]
+  );
+
+  // --- Stop Streaming ---
+  const stopStreaming = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      setIsStreaming(false);
+    }
+  }, []);
+
+  // --- Delete Conversation ---
+  const deleteConversation = useCallback(
+    async (id: string) => {
+      try {
+        const res = await fetch(\`/api/conversations/\${id}\`, { method: 'DELETE' });
+        if (res.ok) {
+          setConversations((prev) => prev.filter((c) => c.id !== id));
+          if (selectedConversationId === id) {
+            startNewChat();
+          }
+        }
+      } catch (err) {
+        console.error('Failed to delete conversation:', err);
+      }
+    },
+    [selectedConversationId, startNewChat]
+  );
+
+  // --- Rename Conversation ---
+  const renameConversation = useCallback(async (id: string, title: string) => {
+    try {
+      const res = await fetch(\`/api/conversations/\${id}\`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ title }),
+      });
+      if (res.ok) {
+        setConversations((prev) => prev.map((c) => (c.id === id ? { ...c, title } : c)));
+      }
+    } catch (err) {
+      console.error('Failed to rename conversation:', err);
+    }
+  }, []);
+
+  // --- Regenerate Message ---
+  const regenerateMessage = useCallback(
+    async (index: number) => {
+      if (isStreaming) return;
+      let userMsgIndex = index - 1;
+      while (userMsgIndex >= 0 && messages[userMsgIndex].role !== 'user') {
+        userMsgIndex--;
+      }
+      if (userMsgIndex < 0) return;
+
+      const userContent = messages[userMsgIndex].content;
+      const truncated = messages.slice(0, userMsgIndex);
+      setMessages(truncated);
+      setTimeout(() => sendMessage(userContent), 50);
+    },
+    [isStreaming, messages, sendMessage]
+  );
+
+  // --- Edit Message ---
+  const editMessage = useCallback(
+    async (index: number, newContent: string) => {
+      if (isStreaming) return;
+      const truncated = messages.slice(0, index);
+      setMessages(truncated);
+      setTimeout(() => sendMessage(newContent), 50);
+    },
+    [isStreaming, messages, sendMessage]
+  );
+
+  // --- Delete Message ---
+  const deleteMessage = useCallback((index: number) => {
+    setMessages((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+
+  return {
+    messages,
+    isStreaming,
+    conversations,
+    models,
+    selectedConversationId,
+    selectedModelId,
+    isLoadingConversation,
+    isLoadingModels,
+    systemPrompt,
+    creditBalance,
+    sendMessage,
+    stopStreaming,
+    selectConversation,
+    startNewChat,
+    deleteConversation,
+    renameConversation,
+    setSelectedModelId,
+    setSystemPrompt,
+    regenerateMessage,
+    editMessage,
+    deleteMessage,
+    refreshConversations,
+  };
+}
+`;
+}
+/**
+ * Generates the ChatMessage component with Markdown rendering, copy, edit, delete
+ * Based on apps/frontend/components/chat/chat-message.tsx
+ * SIMPLIFIED: No shadcn dependency, uses plain Tailwind + react-markdown
+ * @returns TypeScript/JSX content for components/chat/chat-message.tsx
+ */
+function generateChatMessage() {
+    return `// @chimerai component=ChatMessage version=2.0
+'use client';
+
+import { memo, useState, useRef, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+export interface ChatMessageData {
+  id?: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  model?: string | null;
+  tokens?: number | null;
+  createdAt?: string;
+  streaming?: boolean;
+}
+
+export interface MessageActions {
+  onRegenerate?: (index: number) => void;
+  onEdit?: (index: number, newContent: string) => void;
+  onDelete?: (index: number) => void;
+}
+
+interface ChatMessageProps {
+  message: ChatMessageData;
+  index?: number;
+  actions?: MessageActions;
+}
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity"
+      title="Copy"
+    >
+      {copied ? (
+        <svg className="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+        </svg>
+      ) : (
+        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+        </svg>
+      )}
+    </button>
+  );
+}
+
+function CodeBlock({ className, children, ...props }: React.HTMLAttributes<HTMLElement> & { children?: React.ReactNode }) {
+  const match = /language-(\\w+)/.exec(className || '');
+  const language = match ? match[1] : '';
+  const code = String(children).replace(/\\n$/, '');
+
+  // Inline code
+  if (!className && !String(children).includes('\\n')) {
+    return (
+      <code className="rounded bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 text-sm font-mono" {...props}>
+        {children}
+      </code>
+    );
+  }
+
+  return (
+    <div className="group/code relative my-3 rounded-lg border bg-gray-50 dark:bg-gray-900 overflow-hidden">
+      <div className="flex items-center justify-between px-4 py-2 border-b bg-gray-100 dark:bg-gray-800">
+        <span className="text-xs text-gray-500 font-mono">{language || 'code'}</span>
+        <CopyButton text={code} />
+      </div>
+      <pre className="overflow-x-auto p-4 text-sm">
+        <code className={className} {...props}>{children}</code>
+      </pre>
+    </div>
+  );
+}
+
+export const ChatMessage = memo(function ChatMessage({ message, index, actions }: ChatMessageProps) {
+  const isUser = message.role === 'user';
+  const isSystem = message.role === 'system';
+  const [isEditing, setIsEditing] = useState(false);
+  const [editContent, setEditContent] = useState(message.content);
+  const editRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (isEditing && editRef.current) {
+      editRef.current.focus();
+      editRef.current.setSelectionRange(editContent.length, editContent.length);
+    }
+  }, [isEditing, editContent.length]);
+
+  const handleEdit = () => {
+    setEditContent(message.content);
+    setIsEditing(true);
+  };
+
+  const handleEditSubmit = () => {
+    if (editContent.trim() && index !== undefined && actions?.onEdit) {
+      actions.onEdit(index, editContent.trim());
+    }
+    setIsEditing(false);
+  };
+
+  const handleEditCancel = () => {
+    setIsEditing(false);
+    setEditContent(message.content);
+  };
+
+  const handleEditKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleEditSubmit();
+    }
+    if (e.key === 'Escape') {
+      handleEditCancel();
+    }
+  };
+
+  const hasActions = actions && index !== undefined && !message.streaming;
+
+  if (isSystem) {
+    return (
+      <div className="flex justify-center py-2">
+        <div className="rounded-full bg-gray-100 dark:bg-gray-800 px-4 py-1.5 text-xs text-gray-500">
+          {message.content}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={\`group flex gap-3 py-4 px-4 \${isUser ? 'flex-row-reverse' : 'flex-row'}\`}>
+      {/* Avatar */}
+      <div className={\`flex h-8 w-8 shrink-0 items-center justify-center rounded-full \${
+        isUser ? 'bg-indigo-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300'
+      }\`}>
+        {isUser ? (
+          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+          </svg>
+        ) : (
+          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+          </svg>
+        )}
+      </div>
+
+      {/* Message Content */}
+      <div className={\`flex flex-col max-w-[80%] min-w-0 \${isUser ? 'items-end' : 'items-start'}\`}>
+        <div className={\`rounded-2xl px-4 py-2.5 \${
+          isUser ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 border dark:border-gray-700'
+        }\`}>
+          {isUser ? (
+            isEditing ? (
+              <div className="space-y-2">
+                <textarea
+                  ref={editRef}
+                  value={editContent}
+                  onChange={(e) => setEditContent(e.target.value)}
+                  onKeyDown={handleEditKeyDown}
+                  rows={3}
+                  className="w-full text-sm bg-white text-gray-900 rounded p-2 resize-none"
+                />
+                <div className="flex gap-1.5 justify-end">
+                  <button
+                    onClick={handleEditCancel}
+                    className="px-2 py-1 text-xs text-white/80 hover:text-white"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={handleEditSubmit}
+                    disabled={!editContent.trim()}
+                    className="px-2 py-1 text-xs bg-white text-indigo-600 rounded hover:bg-white/90 disabled:opacity-50"
+                  >
+                    Send
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <p className="text-sm whitespace-pre-wrap break-words text-white">{message.content}</p>
+            )
+          ) : (
+            <div className="prose prose-sm dark:prose-invert max-w-none text-sm break-words [&>*:first-child]:mt-0">
+              <ReactMarkdown remarkPlugins={[remarkGfm]} components={{ code: CodeBlock }}>
+                {message.content}
+              </ReactMarkdown>
+              {message.streaming && (
+                <span className="inline-block w-2 h-4 ml-0.5 bg-gray-500 animate-pulse rounded-sm" />
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Action buttons */}
+        {hasActions && !isEditing && (
+          <div className={\`flex items-center gap-1 mt-1 px-1 opacity-0 group-hover:opacity-100 transition-opacity \${
+            isUser ? 'flex-row-reverse' : 'flex-row'
+          }\`}>
+            {/* Meta info for assistant */}
+            {message.role === 'assistant' && (
+              <>
+                {message.model && <span className="text-[10px] text-gray-400 mr-1">{message.model}</span>}
+                {message.tokens && <span className="text-[10px] text-gray-400 mr-1">{message.tokens} tokens</span>}
+              </>
+            )}
+
+            {/* Copy */}
+            <CopyButton text={message.content} />
+
+            {/* Regenerate (assistant only) */}
+            {message.role === 'assistant' && actions.onRegenerate && (
+              <button
+                onClick={() => actions.onRegenerate!(index!)}
+                className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity"
+                title="Regenerate"
+              >
+                <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+              </button>
+            )}
+
+            {/* Edit (user only) */}
+            {message.role === 'user' && actions.onEdit && (
+              <button
+                onClick={handleEdit}
+                className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity"
+                title="Edit"
+              >
+                <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                </svg>
+              </button>
+            )}
+
+            {/* Delete */}
+            {actions.onDelete && (
+              <button
+                onClick={() => actions.onDelete!(index!)}
+                className="p-1 rounded hover:bg-red-100 dark:hover:bg-red-900/30 text-gray-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"
+                title="Delete"
+              >
+                <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+`;
+}
+/**
+ * Generates the ChatInput component with auto-expanding textarea
+ * Based on apps/frontend/components/chat/chat-input.tsx
+ * SIMPLIFIED: No shadcn dependency, uses plain Tailwind
+ * @returns TypeScript/JSX content for components/chat/chat-input.tsx
+ */
+function generateChatInput() {
+    return `// @chimerai component=ChatInput version=2.0
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+/** Rough token estimation: ~4 chars per token */
+function estimateTokens(text: string): number {
+  return Math.ceil(text.length / 4);
+}
+
+interface ChatInputProps {
+  onSend: (message: string) => void;
+  onStop: () => void;
+  isStreaming: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  creditBalance?: number | null;
+}
+
+export function ChatInput({
+  onSend,
+  onStop,
+  isStreaming,
+  disabled = false,
+  placeholder = 'Type your message...',
+  creditBalance,
+}: ChatInputProps) {
+  const [input, setInput] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-resize textarea
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = 'auto';
+      textarea.style.height = \`\${Math.min(textarea.scrollHeight, 200)}px\`;
+    }
+  }, [input]);
+
+  // Focus textarea when streaming ends
+  useEffect(() => {
+    if (!isStreaming) {
+      textareaRef.current?.focus();
+    }
+  }, [isStreaming]);
+
+  const handleSend = useCallback(() => {
+    const trimmed = input.trim();
+    if (!trimmed || isStreaming || disabled) return;
+    onSend(trimmed);
+    setInput('');
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+    }
+  }, [input, isStreaming, disabled, onSend]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend]
+  );
+
+  return (
+    <div className="border-t bg-white dark:bg-gray-900 p-4">
+      <div className="mx-auto max-w-3xl">
+        <div className="flex items-end gap-2">
+          <textarea
+            ref={textareaRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={isStreaming ? 'AI is responding...' : placeholder}
+            disabled={isStreaming || disabled}
+            rows={1}
+            className="flex-1 min-h-[44px] max-h-[200px] resize-none rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"
+          />
+          {isStreaming ? (
+            <button
+              onClick={onStop}
+              className="h-[44px] w-[44px] shrink-0 flex items-center justify-center rounded-lg bg-red-600 text-white hover:bg-red-700"
+            >
+              <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
+                <rect x="6" y="6" width="12" height="12" rx="1" />
+              </svg>
+            </button>
+          ) : (
+            <button
+              onClick={handleSend}
+              disabled={!input.trim() || disabled}
+              className="h-[44px] w-[44px] shrink-0 flex items-center justify-center rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+              </svg>
+            </button>
+          )}
+        </div>
+        <div className="flex items-center justify-between mt-1.5 px-1">
+          <p className="text-[11px] text-gray-400">
+            Enter to send · Shift+Enter for new line
+          </p>
+          <div className="flex items-center gap-2 text-[11px] text-gray-400">
+            {input.trim() && <span>~{estimateTokens(input)} tokens</span>}
+            {creditBalance !== null && creditBalance !== undefined && (
+              <span className={\`font-medium \${creditBalance < 100 ? 'text-red-500' : ''}\`}>
+                Balance: {creditBalance.toLocaleString()} credits
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+}
+/**
+ * Generates the ChatSidebar component with conversation list, search, grouping
+ * Based on apps/frontend/components/chat/chat-sidebar.tsx
+ * SIMPLIFIED: No shadcn dependency, uses plain Tailwind
+ * @returns TypeScript/JSX content for components/chat/chat-sidebar.tsx
+ */
+function generateChatSidebar() {
+    return `// @chimerai component=ChatSidebar version=2.0
+'use client';
+
+import { useState } from 'react';
+
+export interface ConversationItem {
+  id: string;
+  title: string;
+  updatedAt: string;
+  _count: {
+    messages: number;
+  };
+}
+
+interface ChatSidebarProps {
+  conversations: ConversationItem[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  onNewChat: () => void;
+  onDelete: (id: string) => void;
+  onRename: (id: string, title: string) => void;
+}
+
+function groupByDate(conversations: ConversationItem[]) {
+  const groups: Record<string, ConversationItem[]> = {};
+  const now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+
+  // Monday-based week: calculate start of current week (Monday 00:00)
+  const dayOfWeek = now.getDay(); // 0=Sun, 1=Mon, ...
+  const diffToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+  const startOfWeek = new Date(today);
+  startOfWeek.setDate(startOfWeek.getDate() - diffToMonday);
+
+  // Start of current month
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+
+  for (const conv of conversations) {
+    const date = new Date(conv.updatedAt);
+    let label: string;
+
+    if (date >= today) {
+      label = 'Today';
+    } else if (date >= yesterday) {
+      label = 'Yesterday';
+    } else if (date >= startOfWeek) {
+      label = 'This Week';
+    } else if (date >= startOfMonth) {
+      label = 'This Month';
+    } else {
+      label = 'Older';
+    }
+
+    if (!groups[label]) groups[label] = [];
+    groups[label].push(conv);
+  }
+
+  return groups;
+}
+
+export function ChatSidebar({
+  conversations,
+  selectedId,
+  onSelect,
+  onNewChat,
+  onDelete,
+  onRename,
+}: ChatSidebarProps) {
+  const [search, setSearch] = useState('');
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editTitle, setEditTitle] = useState('');
+  const [menuOpenId, setMenuOpenId] = useState<string | null>(null);
+
+  const filtered = conversations.filter((c) =>
+    c.title.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const grouped = groupByDate(filtered);
+
+  const handleStartRename = (conv: ConversationItem) => {
+    setEditingId(conv.id);
+    setEditTitle(conv.title);
+    setMenuOpenId(null);
+  };
+
+  const handleFinishRename = (id: string) => {
+    if (editTitle.trim()) {
+      onRename(id, editTitle.trim());
+    }
+    setEditingId(null);
+  };
+
+  const handleDelete = (id: string) => {
+    setMenuOpenId(null);
+    onDelete(id);
+  };
+
+  return (
+    <div className="flex h-full flex-col bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+      {/* New Chat Button */}
+      <div className="p-3">
+        <button
+          onClick={onNewChat}
+          className="w-full flex items-center justify-center gap-2 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+        >
+          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+          </svg>
+          New Chat
+        </button>
+      </div>
+
+      {/* Search */}
+      {conversations.length > 3 && (
+        <div className="px-3 pb-2">
+          <div className="relative">
+            <svg className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+            <input
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search chats..."
+              className="w-full h-8 pl-8 pr-3 text-xs border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Conversation List */}
+      <div className="flex-1 overflow-y-auto px-2">
+        {Object.entries(grouped).map(([label, convs]) => (
+          <div key={label} className="mb-3">
+            <p className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400">
+              {label}
+            </p>
+            <div className="space-y-0.5">
+              {convs.map((conv) => (
+                <div
+                  key={conv.id}
+                  className={\`group flex items-center rounded-lg px-2 py-2 text-sm cursor-pointer transition-colors \${
+                    selectedId === conv.id
+                      ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300'
+                      : 'hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-900 dark:text-gray-100'
+                  }\`}
+                  onClick={() => onSelect(conv.id)}
+                >
+                  <svg className="mr-2 h-4 w-4 shrink-0 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+                  </svg>
+
+                  {editingId === conv.id ? (
+                    <input
+                      value={editTitle}
+                      onChange={(e) => setEditTitle(e.target.value)}
+                      onBlur={() => handleFinishRename(conv.id)}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') handleFinishRename(conv.id);
+                        if (e.key === 'Escape') setEditingId(null);
+                      }}
+                      onClick={(e) => e.stopPropagation()}
+                      autoFocus
+                      className="flex-1 h-6 text-xs px-1 border rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 dark:border-gray-600"
+                    />
+                  ) : (
+                    <>
+                      <div className="flex-1 min-w-0">
+                        <p className="truncate text-sm text-gray-900 dark:text-gray-100">{conv.title}</p>
+                        <p className="text-[10px] text-gray-400">{conv._count.messages} messages</p>
+                      </div>
+
+                      {/* Actions dropdown */}
+                      <div className="relative">
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setMenuOpenId(menuOpenId === conv.id ? null : conv.id);
+                          }}
+                          className="h-6 w-6 shrink-0 flex items-center justify-center rounded opacity-0 group-hover:opacity-100 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400"
+                        >
+                          <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h.01M12 12h.01M19 12h.01" />
+                          </svg>
+                        </button>
+                        {menuOpenId === conv.id && (
+                          <div className="absolute right-0 top-7 z-50 w-36 bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-lg shadow-lg py-1">
+                            <button
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleStartRename(conv);
+                              }}
+                              className="w-full flex items-center px-3 py-1.5 text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
+                            >
+                              <svg className="mr-2 h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                              </svg>
+                              Rename
+                            </button>
+                            <button
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleDelete(conv.id);
+                              }}
+                              className="w-full flex items-center px-3 py-1.5 text-xs text-red-500 hover:bg-red-50 dark:hover:bg-red-900/30"
+                            >
+                              <svg className="mr-2 h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                              </svg>
+                              Delete
+                            </button>
+                          </div>
+                        )}
+                      </div>
+                    </>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+
+        {filtered.length === 0 && (
+          <div className="px-3 py-8 text-center">
+            <svg className="mx-auto h-8 w-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+            </svg>
+            <p className="mt-2 text-sm text-gray-400">
+              {search ? 'No matching chats' : 'No conversations yet'}
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+`;
+}
+/**
+ * Generates the ModelSelector component for model selection grouped by provider
+ * Based on apps/frontend/components/chat/model-selector.tsx
+ * SIMPLIFIED: No shadcn dependency, uses plain Tailwind select
+ * @returns TypeScript/JSX content for components/chat/model-selector.tsx
+ */
+function generateModelSelector() {
+    return `// @chimerai component=ModelSelector version=2.0
+'use client';
+
+import { useMemo } from 'react';
+
+export interface ModelOption {
+  id: string;
+  modelId: string;
+  name: string;
+  providerId: string;
+  providerType: string;
+  contextWindow: number;
+  inputCost: number;
+  outputCost: number;
+  capabilities: string[];
+  provider: {
+    id: string;
+    name: string;
+    type: string;
+  };
+}
+
+interface ModelSelectorProps {
+  models: ModelOption[];
+  value: string;
+  onValueChange: (modelId: string) => void;
+  disabled?: boolean;
+}
+
+export function ModelSelector({ models, value, onValueChange, disabled }: ModelSelectorProps) {
+  // Group models by provider
+  const grouped = useMemo(() => {
+    const groups: Record<string, ModelOption[]> = {};
+    for (const model of models) {
+      const providerName = model.provider?.name || 'Unknown';
+      if (!groups[providerName]) groups[providerName] = [];
+      groups[providerName].push(model);
+    }
+    return groups;
+  }, [models]);
+
+  return (
+    <select
+      value={value}
+      onChange={(e) => onValueChange(e.target.value)}
+      disabled={disabled}
+      className="h-8 text-xs w-[220px] rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"
+    >
+      <option value="" disabled className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">Select a model</option>
+      {Object.entries(grouped).map(([providerName, providerModels]) => (
+        <optgroup key={providerName} label={providerName} className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-semibold">
+          {providerModels.map((model) => (
+            <option key={model.id} value={model.id} className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+              {model.name}{model.contextWindow >= 100000 ? \` (\${Math.round(model.contextWindow / 1000)}k)\` : ''}
+            </option>
+          ))}
+        </optgroup>
+      ))}
+    </select>
+  );
+}
+`;
+}
+/**
+ * Generates the Conversation Detail API route (GET/PATCH/DELETE for /api/conversations/[id])
+ * @returns TypeScript content for app/api/conversations/[id]/route.ts
+ */
+function generateConversationDetailRoute() {
+    return `// @chimerai component=ConversationDetailRoute version=1.0
+import { NextRequest, NextResponse } from 'next/server';
+import { requireAuth, createErrorResponse } from '@/lib/api-protection';
+import { prisma } from '@/lib/prisma';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+  const authResult = await requireAuth(request);
+  if (!authResult.authorized || !authResult.user) {
+    return createErrorResponse(authResult);
+  }
+
+  try {
+    const conversation = await (prisma as any).conversation.findUnique({
+      where: { id: id, userId: authResult.user.id },
+      include: {
+        messages: {
+          orderBy: { createdAt: 'asc' },
+        },
+      },
+    });
+
+    if (!conversation) {
+      return NextResponse.json({ error: 'Conversation not found' }, { status: 404 });
+    }
+
+    return NextResponse.json(conversation);
+  } catch (error) {
+    console.error('Failed to fetch conversation:', error);
+    return NextResponse.json({ error: 'Failed to fetch conversation' }, { status: 500 });
+  }
+}
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+  const authResult = await requireAuth(request);
+  if (!authResult.authorized || !authResult.user) {
+    return createErrorResponse(authResult);
+  }
+
+  try {
+    const body = await request.json();
+
+    // Verify ownership
+    const existing = await (prisma as any).conversation.findUnique({
+      where: { id: id },
+    });
+    if (!existing || existing.userId !== authResult.user.id) {
+      return NextResponse.json({ error: 'Conversation not found' }, { status: 404 });
+    }
+
+    const updated = await (prisma as any).conversation.update({
+      where: { id: id },
+      data: {
+        ...(body.title !== undefined && { title: body.title }),
+        ...(body.archived !== undefined && { archived: body.archived }),
+      },
+    });
+
+    return NextResponse.json(updated);
+  } catch (error) {
+    console.error('Failed to update conversation:', error);
+    return NextResponse.json({ error: 'Failed to update conversation' }, { status: 500 });
+  }
+}
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+  const authResult = await requireAuth(request);
+  if (!authResult.authorized || !authResult.user) {
+    return createErrorResponse(authResult);
+  }
+
+  try {
+    // Verify ownership
+    const existing = await (prisma as any).conversation.findUnique({
+      where: { id: id },
+    });
+    if (!existing || existing.userId !== authResult.user.id) {
+      return NextResponse.json({ error: 'Conversation not found' }, { status: 404 });
+    }
+
+    await (prisma as any).conversation.delete({
+      where: { id: id },
+    });
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Failed to delete conversation:', error);
+    return NextResponse.json({ error: 'Failed to delete conversation' }, { status: 500 });
+  }
+}
+`;
+}