feat(ai): Auto-apply code blocks from chat direct to IDE workspace + inject file context

packages/client/src/components/ai/AIChatPanel.tsx

@@ -6,6 +6,8 @@ import { Textarea } from '@/components/ui/textarea';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
+import { MarkdownMessage } from './MarkdownMessage';
+
 export default function AIChatPanel() {
   const { sendMessage, stopGeneration, isStreaming } = useASI1Chat();
   const messages = useAIStore((s) => s.messages);
@@ -65,28 +67,28 @@ export default function AIChatPanel() {
           <div
             key={msg.id}
             className={cn(
-              'max-w-[90%] text-sm',
-              msg.role === 'user' ? 'ml-auto' : 'mr-auto'
+              'max-w-[100%] text-sm',
+              msg.role === 'user' ? 'ml-auto' : 'mr-auto w-full'
             )}
           >
             <div
               className={cn(
-                'px-4 py-3 rounded-2xl whitespace-pre-wrap break-words',
+                'px-4 py-3 rounded-2xl',
                 msg.role === 'user'
-                  ? 'bg-primary/10 rounded-br-md'
-                  : 'liquid-glass rounded-bl-md'
+                  ? 'bg-primary/10 rounded-br-md whitespace-pre-wrap break-words max-w-[90%] float-right'
+                  : 'liquid-glass rounded-bl-md w-full'
               )}
             >
-              {msg.content}
+              {msg.role === 'user' ? msg.content : <MarkdownMessage content={msg.content} />}
             </div>
+            <div className="clear-both"></div>
           </div>
         ))}
 
         {streamingMessage && (
-          <div className="mr-auto max-w-[90%] text-sm">
-            <div className="liquid-glass px-4 py-3 rounded-2xl rounded-bl-md whitespace-pre-wrap">
-              {streamingMessage}
-              <span className="animate-pulse">▌</span>
+          <div className="mr-auto w-full text-sm">
+            <div className="liquid-glass px-4 py-3 rounded-2xl rounded-bl-md">
+              <MarkdownMessage content={streamingMessage + '▌'} />
             </div>
           </div>
         )}

packages/client/src/components/ai/MarkdownMessage.tsx

@@ -0,0 +1,64 @@
+import { Check } from 'lucide-react';
+
+interface MarkdownMessageProps {
+  content: string;
+}
+
+export function MarkdownMessage({ content }: MarkdownMessageProps) {
+  // Parse the message into text segments and code blocks
+  // Parse the message into text segments and code blocks
+  // Looking for: **`filename`** (or similar) followed by ```lang ... ```
+  const segments: Array<{ type: 'text' | 'code'; content?: string; filename?: string | null; language?: string; code?: string }> = [];
+  const regex = /(?:\*\*\`?([^\`\n]+)\`?\*\*\s*\n)?```(\w*)\n([\s\S]*?)```/g;
+  
+  let lastIndex = 0;
+  let match;
+
+  while ((match = regex.exec(content)) !== null) {
+    // Add preceding text
+    if (match.index > lastIndex) {
+      segments.push({
+        type: 'text',
+        content: content.slice(lastIndex, match.index),
+      });
+    }
+
+    segments.push({
+      type: 'code',
+      filename: match[1] || null,
+      language: match[2] || 'text',
+      code: match[3].trim(),
+    });
+
+    lastIndex = regex.lastIndex;
+  }
+
+  // Add remaining text
+  if (lastIndex < content.length) {
+    segments.push({
+      type: 'text',
+      content: content.slice(lastIndex),
+    });
+  }
+
+  return (
+    <div className="space-y-3">
+      {segments.map((segment, i) => {
+        if (segment.type === 'text') {
+          return (
+            <div key={i} className="whitespace-pre-wrap break-words text-sm">
+              {segment.content}
+            </div>
+          );
+        }
+
+        return (
+          <div key={i} className="flex items-center gap-1.5 py-1.5 px-3 bg-primary/10 text-primary border border-primary/20 rounded-md w-fit text-xs font-medium my-2">
+            <Check className="w-3.5 h-3.5" />
+            Applied changes to {segment.filename || 'active file'}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

packages/client/src/hooks/useASI1Chat.ts

@@ -1,74 +1,154 @@
 import { useCallback, useRef } from 'react';
 import { useAIStore } from '@/stores/aiStore';
+import { useEditorStore } from '@/stores/editorStore';
+import { useFileStore } from '@/stores/fileStore';
+
+const ASI1_BASE_URL = import.meta.env.VITE_ASI1_BASE_URL || 'https://api.asi1.ai/v1';
+const ASI1_API_KEY = import.meta.env.VITE_ASI1_API_KEY || '';
+const ASI1_MODEL = import.meta.env.VITE_ASI1_MODEL || 'asi1-mini';
+
+const SYSTEM_PROMPT =
+  'You are FrontendForge AI, an expert frontend development assistant. You help with HTML, CSS, JavaScript, TypeScript, React, Vue, Svelte, Next.js, and more.\n' +
+  'CRITICAL INSTRUCTION: When you provide code that should be applied to a file, you MUST start the code block with a markdown bolded filename, followed immediately by the fenced code block. Example:\n' +
+  '**`src/App.tsx`**\n' +
+  '```tsx\n' +
+  'export default function App() { ... }\n' +
+  '```\n' +
+  'Do not omit the bolded filename. Provide exact, complete code drop-ins when requested to fix or change code.';
 
 export function useASI1Chat() {
-  const { addMessage, updateStreamingMessage, finishStreaming, setIsStreaming, isStreaming } = useAIStore();
+  const { addMessage, updateStreamingMessage, finishStreaming, setIsStreaming, isStreaming } =
+    useAIStore();
   const abortRef = useRef<AbortController | null>(null);
 
-  const sendMessage = useCallback(async (message: string, history: Array<{ role: string; content: string }> = []) => {
-    // Add user message
-    addMessage({
-      id: `msg-${Date.now()}`,
-      role: 'user',
-      content: message,
-      timestamp: Date.now(),
-    });
-
-    setIsStreaming(true);
-    const controller = new AbortController();
-    abortRef.current = controller;
-
-    try {
-      const apiBase = import.meta.env.VITE_API_URL || '';
-      const response = await fetch(`${apiBase}/api/v1/chat`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ message, history, stream: true }),
-        signal: controller.signal,
+  const sendMessage = useCallback(
+    async (message: string, history: Array<{ role: string; content: string }> = []) => {
+      addMessage({
+        id: `msg-${Date.now()}`,
+        role: 'user',
+        content: message,
+        timestamp: Date.now(),
       });
 
-      if (!response.ok) throw new Error('Chat request failed');
+      setIsStreaming(true);
+      const controller = new AbortController();
+      abortRef.current = controller;
+
+      try {
+        // Build the dynamic workspace context from the stores
+        const editorStore = useEditorStore.getState();
+        const fileStore = useFileStore.getState();
+        
+        // Merge the base files with the unsaved editor changes
+        const currentFiles = { ...fileStore.files };
+        for (const [path, file] of Object.entries(editorStore.openFiles)) {
+          currentFiles[path] = typeof file === 'string' ? file : file.content;
+        }
+
+        let dynamicSystemPrompt = SYSTEM_PROMPT + '\n\n--- CURRENT WORKSPACE FILES ---\n';
+        for (const [path, content] of Object.entries(currentFiles)) {
+          // Guess language for markdown
+          const ext = path.split('.').pop() || 'text';
+          const langMap: Record<string, string> = { js: 'javascript', ts: 'typescript', jsx: 'jsx', tsx: 'tsx', html: 'html', css: 'css' };
+          const lang = langMap[ext] || ext;
+          
+          dynamicSystemPrompt += `**\`${path}\`**\n\`\`\`${lang}\n${content}\n\`\`\`\n\n`;
+        }
+
+        const response = await fetch(`${ASI1_BASE_URL}/chat/completions`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${ASI1_API_KEY}`,
+          },
+          body: JSON.stringify({
+            model: ASI1_MODEL,
+            messages: [
+              { role: 'system', content: dynamicSystemPrompt },
+              ...history,
+              { role: 'user', content: message },
+            ],
+            stream: true,
+            temperature: 0.7,
+            max_tokens: 4096,
+          }),
+          signal: controller.signal,
+        });
 
-      const reader = response.body?.getReader();
-      if (!reader) throw new Error('No response body');
+        if (!response.ok) {
+          const errText = await response.text();
+          throw new Error(`ASI-1 API error ${response.status}: ${errText}`);
+        }
+
+        const reader = response.body?.getReader();
+        if (!reader) throw new Error('No response body');
 
-      const decoder = new TextDecoder();
-      let fullContent = '';
-      let buffer = '';
+        const decoder = new TextDecoder();
+        let fullContent = '';
+        let buffer = '';
 
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
+        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() || '';
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          buffer = lines.pop() || '';
 
-        for (const line of lines) {
-          const trimmed = line.trim();
-          if (!trimmed.startsWith('data: ')) continue;
-          const data = trimmed.slice(6);
-          if (data === '[DONE]') break;
+          for (const line of lines) {
+            const trimmed = line.trim();
+            if (!trimmed.startsWith('data: ')) continue;
+            const data = trimmed.slice(6);
+            if (data === '[DONE]') break;
 
-          try {
-            const parsed = JSON.parse(data);
-            if (parsed.token) {
-              fullContent += parsed.token;
-              updateStreamingMessage(parsed.token);
+            try {
+              const parsed = JSON.parse(data);
+              const token = parsed.choices?.[0]?.delta?.content;
+              if (token) {
+                fullContent += token;
+                updateStreamingMessage(token);
+              }
+            } catch {
+              /* skip malformed chunks */
             }
-          } catch { /* skip */ }
+          }
         }
-      }
 
-      finishStreaming(fullContent);
-    } catch (error) {
-      if ((error as Error).name !== 'AbortError') {
-        finishStreaming('Sorry, an error occurred. Please try again.');
+        // Lovable-style Auto-Apply logic:
+        // Parse the full completion string for markdown code blocks + filenames
+        const regex = /(?:\*\*\`?([^\`\n]+)\`?\*\*\s*\n)?```(\w*)\n([\s\S]*?)```/g;
+        let match;
+        
+        while ((match = regex.exec(fullContent)) !== null) {
+          const filename = match[1];
+          const code = match[3].trim();
+          
+          if (filename) {
+            // Apply it! 
+            if (editorStore.openFiles[filename]) {
+              editorStore.updateContent(filename, code);
+            } else if (fileStore.files[filename] !== undefined) {
+              fileStore.updateFile(filename, code);
+            }
+          }
+        }
+
+        finishStreaming(fullContent);
+      } catch (error) {
+        if ((error as Error).name !== 'AbortError') {
+          finishStreaming('Sorry, an error occurred. Please try again.');
+          console.error('[useASI1Chat]', error);
+        } else {
+          // User stopped — commit whatever was streamed so far
+          const partial = useAIStore.getState().streamingMessage;
+          if (partial) finishStreaming(partial);
+        }
+      } finally {
+        abortRef.current = null;
       }
-    } finally {
-      abortRef.current = null;
-    }
-  }, [addMessage, updateStreamingMessage, finishStreaming, setIsStreaming]);
+    },
+    [addMessage, updateStreamingMessage, finishStreaming, setIsStreaming]
+  );
 
   const stopGeneration = useCallback(() => {
     abortRef.current?.abort();

packages/client/src/hooks/useLivePreview.ts

@@ -10,7 +10,7 @@ export function useLivePreview() {
   const files = useMemo(() => {
     const merged = { ...baseFiles };
     for (const [path, file] of Object.entries(openFiles)) {
-      merged[path] = file.content;
+      merged[path] = typeof file === 'string' ? file : file.content;
     }
     return merged;
   }, [baseFiles, openFiles]);

packages/client/src/stores/fileStore.ts

@@ -113,8 +113,10 @@ export const useFileStore = create<FileStore>((set, get) => ({
     if (saved) {
       try {
         const parsed = JSON.parse(saved);
-        set({ files: parsed.files, fileTree: buildTreeFromPaths(Object.keys(parsed.files)), initialized: true });
-        return;
+        if (parsed.files && Object.keys(parsed.files).length > 0) {
+          set({ files: parsed.files, fileTree: buildTreeFromPaths(Object.keys(parsed.files)), initialized: true });
+          return;
+        }
       } catch { /* fallback */ }
     }
     // Use default files