diff --git a/src/components/flow/ai-pipeline-dialog.tsx b/src/components/flow/ai-pipeline-dialog.tsx
index 3172715..252c5bc 100644
--- a/src/components/flow/ai-pipeline-dialog.tsx
+++ b/src/components/flow/ai-pipeline-dialog.tsx
@@ -4,7 +4,6 @@
 import { useState, useRef, useCallback, useMemo, useEffect } from "react";
 import { Loader2, RotateCcw, Sparkles, AlertTriangle, MessageSquarePlus } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
   Dialog,
@@ -42,6 +41,8 @@ export function AiPipelineDialog({
 
   // --- Generate tab state (unchanged from original) ---
   const [genPrompt, setGenPrompt] = useState("");
+  const genTextareaRef = useRef<HTMLTextAreaElement>(null);
+  const reviewTextareaRef = useRef<HTMLTextAreaElement>(null);
   const [genResult, setGenResult] = useState("");
   const [genIsStreaming, setGenIsStreaming] = useState(false);
   const [genError, setGenError] = useState<string | null>(null);
@@ -71,6 +72,24 @@ export function AiPipelineDialog({
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [conversation.messages, conversation.streamingContent]);
 
+  // Auto-grow for generate textarea
+  useEffect(() => {
+    const ta = genTextareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    const maxHeight = 4 * 24; // 4 lines
+    ta.style.height = `${Math.min(ta.scrollHeight, maxHeight)}px`;
+  }, [genPrompt]);
+
+  // Auto-grow for review textarea
+  useEffect(() => {
+    const ta = reviewTextareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    const maxHeight = 4 * 24;
+    ta.style.height = `${Math.min(ta.scrollHeight, maxHeight)}px`;
+  }, [reviewPrompt]);
+
   // Compute suggestion statuses across all messages
   const suggestionStatuses = useMemo(() => {
     const statuses = new Map<string, SuggestionStatus>();
@@ -84,6 +103,26 @@ export function AiPipelineDialog({
         statuses.set(id, status);
       }
 
+      // Additional validation for modify_vrl: configPath must point to a string
+      for (const s of msg.suggestions) {
+        if (s.type === "modify_vrl" && statuses.get(s.id) === "actionable") {
+          const node = nodes.find((n) => (n.data as Record<string, unknown>).componentKey === s.componentKey);
+          if (node) {
+            const config = (node.data as Record<string, unknown>).config as Record<string, unknown>;
+            let value: unknown = config;
+            for (const part of s.configPath.split(".")) {
+              if (value == null || typeof value !== "object") { value = undefined; break; }
+              value = (value as Record<string, unknown>)[part];
+            }
+            if (typeof value !== "string") {
+              statuses.set(s.id, "invalid");
+            } else if (!value.includes(s.targetCode)) {
+              statuses.set(s.id, "outdated");
+            }
+          }
+        }
+      }
+
       // Check for outdated suggestions
       const outdated = detectOutdatedSuggestions(
         msg.suggestions,
@@ -223,6 +262,13 @@ export function AiPipelineDialog({
     genAbortRef.current?.abort();
   };
 
+  const handleGenKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleGenSubmit();
+    }
+  };
+
   // --- Review tab handlers ---
 
   const handleReviewSubmit = useCallback(
@@ -236,6 +282,13 @@ export function AiPipelineDialog({
     [reviewPrompt, conversation],
   );
 
+  const handleReviewKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleReviewSubmit();
+    }
+  };
+
   const handleApplySelected = useCallback(
     (messageId: string, suggestions: AiSuggestion[]) => {
       const { applied, errors } = applySuggestions(suggestions);
@@ -258,7 +311,7 @@ export function AiPipelineDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-2xl max-h-[85vh] flex flex-col overflow-hidden">
+      <DialogContent className="sm:max-w-2xl max-h-[85vh] flex flex-col min-h-0 overflow-hidden">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Sparkles className="h-4 w-4" />
@@ -269,7 +322,7 @@ export function AiPipelineDialog({
           </DialogDescription>
         </DialogHeader>
 
-        <Tabs value={mode} onValueChange={(v) => setMode(v as "generate" | "review")} className="flex flex-col flex-1 overflow-hidden">
+        <Tabs value={mode} onValueChange={(v) => setMode(v as "generate" | "review")} className="flex flex-col flex-1 min-h-0 overflow-hidden">
           <TabsList className="grid w-full grid-cols-2">
             <TabsTrigger value="generate">Generate</TabsTrigger>
             <TabsTrigger value="review" disabled={nodes.length === 0}>
@@ -282,12 +335,16 @@ export function AiPipelineDialog({
             <div className="space-y-2">
               <Label htmlFor="ai-pipeline-prompt">Describe your pipeline</Label>
               <form onSubmit={handleGenSubmit} className="flex gap-2">
-                <Input
+                <textarea
+                  ref={genTextareaRef}
                   id="ai-pipeline-prompt"
                   value={genPrompt}
                   onChange={(e) => setGenPrompt(e.target.value)}
+                  onKeyDown={handleGenKeyDown}
                   placeholder="Collect K8s logs, drop debug, send to Datadog and S3"
                   disabled={genIsStreaming}
+                  rows={1}
+                  className="flex-1 resize-none rounded-md border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
                 />
                 {genIsStreaming ? (
                   <Button type="button" variant="outline" size="sm" onClick={handleGenCancel}>
@@ -335,7 +392,7 @@ export function AiPipelineDialog({
           </TabsContent>
 
           {/* ---- Review tab (conversation thread) ---- */}
-          <TabsContent value="review" className="flex flex-col flex-1 mt-4 overflow-hidden">
+          <TabsContent value="review" className="flex flex-col flex-1 mt-4 min-h-0 overflow-hidden">
             {conversation.isLoading ? (
               <div className="flex items-center justify-center py-8">
                 <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
@@ -394,11 +451,15 @@ export function AiPipelineDialog({
                 {/* Input pinned at bottom */}
                 <div className="pt-3 border-t space-y-2">
                   <form onSubmit={handleReviewSubmit} className="flex gap-2">
-                    <Input
+                    <textarea
+                      ref={reviewTextareaRef}
                       value={reviewPrompt}
                       onChange={(e) => setReviewPrompt(e.target.value)}
+                      onKeyDown={handleReviewKeyDown}
                       placeholder="Ask about your pipeline..."
                       disabled={conversation.isStreaming}
+                      rows={1}
+                      className="flex-1 resize-none rounded-md border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
                     />
                     {conversation.isStreaming ? (
                       <Button type="button" variant="outline" size="sm" onClick={conversation.cancelStreaming}>
diff --git a/src/components/flow/ai-suggestion-card.tsx b/src/components/flow/ai-suggestion-card.tsx
index 10a9e00..b08834c 100644
--- a/src/components/flow/ai-suggestion-card.tsx
+++ b/src/components/flow/ai-suggestion-card.tsx
@@ -17,6 +17,7 @@ interface AiSuggestionCardProps {
 
 const TYPE_LABELS: Record<AiSuggestion["type"], string> = {
   modify_config: "Config Change",
+  modify_vrl: "VRL Fix",
   add_component: "Add Component",
   remove_component: "Remove Component",
   modify_connections: "Rewire",
@@ -103,6 +104,17 @@ export function AiSuggestionCard({
             </div>
           )}
 
+          {suggestion.type === "modify_vrl" && (
+            <div className="mt-2 text-xs font-mono bg-muted rounded px-2 py-1.5 space-y-1">
+              <div className="text-red-600 dark:text-red-400 line-through whitespace-pre-wrap">
+                {suggestion.targetCode}
+              </div>
+              <div className="text-green-600 dark:text-green-400 whitespace-pre-wrap">
+                {suggestion.code}
+              </div>
+            </div>
+          )}
+
           {hasConflict && conflictReason && (
             <div className="mt-2 flex items-center gap-1.5 text-xs text-amber-600 dark:text-amber-400">
               <AlertTriangle className="h-3 w-3 shrink-0" />
@@ -131,6 +143,9 @@ function renderDescription(suggestion: AiSuggestion): React.ReactNode {
       componentKeys.push(e.from, e.to);
     }
   }
+  if (suggestion.type === "modify_vrl") {
+    componentKeys.push(suggestion.componentKey);
+  }
 
   if (componentKeys.length === 0) return desc;
 
diff --git a/src/components/vrl-editor/vrl-editor.tsx b/src/components/vrl-editor/vrl-editor.tsx
index 72608cb..35af342 100644
--- a/src/components/vrl-editor/vrl-editor.tsx
+++ b/src/components/vrl-editor/vrl-editor.tsx
@@ -28,7 +28,7 @@ import { VrlSnippetDrawer } from "@/components/flow/vrl-snippet-drawer";
 import { VrlFieldsPanel } from "./vrl-fields-panel";
 import { VrlAiPanel } from "./vrl-ai-panel";
 import { useVrlAiConversation } from "@/hooks/use-vrl-ai-conversation";
-import { cn } from "@/lib/utils";
+
 import { useTeamStore } from "@/stores/team-store";
 import { getMergedOutputSchemas, getSourceOutputSchema } from "@/lib/vector/source-output-schemas";
 import type { Monaco, OnMount } from "@monaco-editor/react";
@@ -69,7 +69,8 @@ export function VrlEditor({ value, onChange, sourceTypes, pipelineId, componentK
   const [sampleInput, setSampleInput] = useState("");
   const [testOutput, setTestOutput] = useState<string | null>(null);
   const [testError, setTestError] = useState<string | null>(null);
-  const [toolsPanel, setToolsPanel] = useState<"fields" | "snippets" | null>(null);
+  type RightPanel = "fields" | "snippets" | "ai" | null;
+  const [rightPanel, setRightPanel] = useState<RightPanel>("fields");
   const [expanded, setExpanded] = useState(false);
   const editorRef = useRef<EditorInstance | null>(null);
   const monacoRef = useRef<Monaco | null>(null);
@@ -91,10 +92,12 @@ export function VrlEditor({ value, onChange, sourceTypes, pipelineId, componentK
   );
   const aiEnabled = teamQuery.data?.aiEnabled ?? false;
 
-  const [aiPanelOpen, setAiPanelOpen] = useState(false);
-
   const canUseAiChat = aiEnabled && !!pipelineId && !!componentKey;
 
+  const togglePanel = (panel: RightPanel) => {
+    setRightPanel((prev) => (prev === panel ? null : panel));
+  };
+
   const isRawTextSource = useMemo(() => {
     if (!sourceTypes || sourceTypes.length === 0) return false;
     return sourceTypes.some((t) => {
@@ -183,7 +186,7 @@ export function VrlEditor({ value, onChange, sourceTypes, pipelineId, componentK
         const schema = (sample.schema as Array<{ path: string; type: string; sample: string }>) ?? [];
         setLiveSchemaFields(schema);
         if (schema.length > 0) {
-          setToolsPanel("fields");
+          setRightPanel("fields");
         }
       }
     } else if (data.status === "ERROR" || data.status === "EXPIRED") {
@@ -360,17 +363,73 @@ export function VrlEditor({ value, onChange, sourceTypes, pipelineId, componentK
       {/* Full-screen modal: editor (left) + tools (right) */}
       <Dialog open={expanded} onOpenChange={setExpanded}>
         <DialogContent
-          className={cn(
-            "h-[85vh] flex flex-col transition-[max-width] duration-300",
-            aiPanelOpen
-              ? "max-w-[calc(100vw-4rem)]"
-              : "sm:max-w-[calc(100vw-4rem)] xl:max-w-6xl",
-          )}
+          className="h-[85vh] flex flex-col sm:max-w-[calc(100vw-4rem)] xl:max-w-6xl"
           onKeyDown={(e) => e.stopPropagation()}
         >
           <DialogHeader>
             <DialogTitle>VRL Editor</DialogTitle>
           </DialogHeader>
+
+          {/* Toolbar — always visible */}
+          <div className="flex flex-wrap gap-2 shrink-0">
+            {hasFields && (
+              <Button
+                variant={rightPanel === "fields" ? "secondary" : "outline"}
+                size="sm"
+                onClick={() => togglePanel("fields")}
+              >
+                <Columns3 className="mr-1.5 h-3.5 w-3.5" />
+                Fields
+              </Button>
+            )}
+            <Button
+              variant={rightPanel === "snippets" ? "secondary" : "outline"}
+              size="sm"
+              onClick={() => togglePanel("snippets")}
+            >
+              <BookOpen className="mr-1.5 h-3.5 w-3.5" />
+              Snippets
+            </Button>
+            {canUseAiChat && (
+              <Button
+                variant={rightPanel === "ai" ? "secondary" : "outline"}
+                size="sm"
+                onClick={() => togglePanel("ai")}
+              >
+                <Sparkles className="mr-1.5 h-3.5 w-3.5" />
+                AI
+              </Button>
+            )}
+            {pipelineId && upstreamSourceKeys && upstreamSourceKeys.length > 0 && (
+              <>
+                <Select value={String(sampleLimit)} onValueChange={(val) => setSampleLimit(Number(val))}>
+                  <SelectTrigger className="h-8 w-[110px] text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="5">5 events</SelectItem>
+                    <SelectItem value="10">10 events</SelectItem>
+                    <SelectItem value="25">25 events</SelectItem>
+                    <SelectItem value="50">50 events</SelectItem>
+                  </SelectContent>
+                </Select>
+                <Button variant="outline" size="sm" onClick={handleFetchSamples} disabled={isSampling}>
+                  {isSampling ? (
+                    <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+                  ) : (
+                    <Download className="mr-1.5 h-3.5 w-3.5" />
+                  )}
+                  {isSampling ? "Sampling..." : "Fetch Samples"}
+                </Button>
+                {sampleEvents.length > 0 && (
+                  <Badge variant="secondary" className="text-xs">
+                    {sampleEvents.length} sample{sampleEvents.length !== 1 ? "s" : ""}
+                  </Badge>
+                )}
+              </>
+            )}
+          </div>
+
           <div className="flex flex-1 gap-4 min-h-0">
             {/* Left: Monaco editor at full height */}
             <div className="flex-1 overflow-hidden rounded border">
@@ -393,190 +452,125 @@ export function VrlEditor({ value, onChange, sourceTypes, pipelineId, componentK
               />
             </div>
 
-            {/* Right: tools pane */}
-            <div className="w-[320px] shrink-0 flex flex-col gap-3 overflow-y-auto">
-              {/* Action buttons */}
-              <div className="flex flex-wrap gap-2">
-                {hasFields && (
-                  <Button
-                    variant={toolsPanel === "fields" ? "secondary" : "outline"}
-                    size="sm"
-                    onClick={() => setToolsPanel((prev) => (prev === "fields" ? null : "fields"))}
-                  >
-                    <Columns3 className="mr-1.5 h-3.5 w-3.5" />
-                    Fields
-                  </Button>
-                )}
-                <Button
-                  variant={toolsPanel === "snippets" ? "secondary" : "outline"}
-                  size="sm"
-                  onClick={() => setToolsPanel((prev) => (prev === "snippets" ? null : "snippets"))}
-                >
-                  <BookOpen className="mr-1.5 h-3.5 w-3.5" />
-                  Snippets
-                </Button>
-                {canUseAiChat && (
-                  <Button
-                    variant={aiPanelOpen ? "secondary" : "outline"}
-                    size="sm"
-                    onClick={() => setAiPanelOpen((prev) => !prev)}
-                  >
-                    <Sparkles className="mr-1.5 h-3.5 w-3.5" />
-                    AI
-                  </Button>
-                )}
-                {pipelineId && upstreamSourceKeys && upstreamSourceKeys.length > 0 && (
-                  <>
-                    <Select
-                      value={String(sampleLimit)}
-                      onValueChange={(val) => setSampleLimit(Number(val))}
-                    >
-                      <SelectTrigger className="h-8 w-[110px] text-xs">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="5">5 events</SelectItem>
-                        <SelectItem value="10">10 events</SelectItem>
-                        <SelectItem value="25">25 events</SelectItem>
-                        <SelectItem value="50">50 events</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={handleFetchSamples}
-                      disabled={isSampling}
-                    >
-                      {isSampling ? (
-                        <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
-                      ) : (
-                        <Download className="mr-1.5 h-3.5 w-3.5" />
-                      )}
-                      {isSampling ? "Sampling..." : "Fetch Samples"}
-                    </Button>
-                    {sampleEvents.length > 0 && (
-                      <Badge variant="secondary" className="text-xs">
-                        {sampleEvents.length} sample{sampleEvents.length !== 1 ? "s" : ""}
-                      </Badge>
+            {/* Right panel: single slot for tools OR AI */}
+            {rightPanel && (
+              <div className="w-[380px] shrink-0 flex flex-col gap-3 min-h-0 overflow-hidden">
+                {/* Tools content (fields, snippets, test panel) */}
+                {(rightPanel === "fields" || rightPanel === "snippets") && (
+                  <div className="flex flex-col gap-3 overflow-y-auto flex-1">
+                    {/* Raw text source hint */}
+                    {isRawTextSource && rightPanel !== "snippets" && (
+                      <div className="rounded border border-sky-200 bg-sky-50 px-3 py-2 text-xs text-sky-800 dark:border-sky-800 dark:bg-sky-950/30 dark:text-sky-300">
+                        <p className="font-medium">This source emits raw text in <code className="rounded bg-sky-100 px-1 dark:bg-sky-900/50">.message</code></p>
+                        <p className="mt-0.5 text-sky-700 dark:text-sky-400">
+                          Use a parsing function to extract fields — click Snippets → Parsing for examples.
+                        </p>
+                      </div>
                     )}
-                  </>
-                )}
-              </div>
 
-              {/* Raw text source hint */}
-              {isRawTextSource && toolsPanel !== "snippets" && (
-                <div className="rounded border border-sky-200 bg-sky-50 px-3 py-2 text-xs text-sky-800 dark:border-sky-800 dark:bg-sky-950/30 dark:text-sky-300">
-                  <p className="font-medium">This source emits raw text in <code className="rounded bg-sky-100 px-1 dark:bg-sky-900/50">.message</code></p>
-                  <p className="mt-0.5 text-sky-700 dark:text-sky-400">
-                    Use a parsing function to extract fields — click Snippets → Parsing for examples.
-                  </p>
-                </div>
-              )}
-
-              {/* Fields panel */}
-              {toolsPanel === "fields" && (
-                <VrlFieldsPanel
-                  staticFields={staticFieldsForPanel}
-                  liveFields={liveSchemaFields}
-                  onInsert={handleInsertSnippet}
-                />
-              )}
-
-              {/* Snippet drawer */}
-              {toolsPanel === "snippets" && (
-                <VrlSnippetDrawer onInsert={handleInsertSnippet} />
-              )}
-
-              {/* Test panel (always visible) */}
-              <div className="space-y-3 rounded border p-3">
-                <div className="space-y-1.5">
-                  <div className="flex items-center justify-between">
-                    <Label htmlFor="vrl-sample-input" className="text-xs">
-                      Sample Input (JSON)
-                    </Label>
-                    {sampleEvents.length > 1 && (
-                      <div className="flex items-center gap-1">
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className="h-6 w-6"
-                          disabled={sampleIndex <= 0}
-                          aria-label="Previous sample"
-                          onClick={() => {
-                            const newIdx = sampleIndex - 1;
-                            setSampleIndex(newIdx);
-                            setSampleInput(JSON.stringify(sampleEvents[newIdx], null, 2));
-                          }}
-                        >
-                          <ChevronLeft className="h-3.5 w-3.5" />
-                        </Button>
-                        <span className="text-xs tabular-nums text-muted-foreground">
-                          {sampleIndex + 1}/{sampleEvents.length}
-                        </span>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className="h-6 w-6"
-                          disabled={sampleIndex >= sampleEvents.length - 1}
-                          aria-label="Next sample"
-                          onClick={() => {
-                            const newIdx = sampleIndex + 1;
-                            setSampleIndex(newIdx);
-                            setSampleInput(JSON.stringify(sampleEvents[newIdx], null, 2));
-                          }}
-                        >
-                          <ChevronRight className="h-3.5 w-3.5" />
-                        </Button>
-                      </div>
+                    {rightPanel === "fields" && (
+                      <VrlFieldsPanel
+                        staticFields={staticFieldsForPanel}
+                        liveFields={liveSchemaFields}
+                        onInsert={handleInsertSnippet}
+                      />
                     )}
-                  </div>
-                  <textarea
-                    id="vrl-sample-input"
-                    className="w-full rounded border bg-muted/30 p-2 font-mono text-xs"
-                    rows={4}
-                    value={sampleInput}
-                    onChange={(e) => setSampleInput(e.target.value)}
-                    placeholder={'No test input — a default event will be used:\n{"message": "test event", "timestamp": "...", "host": "localhost"}'}
-                  />
-                </div>
-
-                <Button
-                  size="sm"
-                  onClick={handleTest}
-                  disabled={testMutation.isPending}
-                >
-                  {testMutation.isPending ? "Running..." : "Run VRL"}
-                </Button>
 
-                {testOutput && (
-                  <div className="space-y-1">
-                    <Label className="text-xs text-muted-foreground">Output</Label>
-                    <pre className="max-h-40 overflow-auto rounded bg-muted/40 p-2 font-mono text-xs">
-                      {testOutput}
-                    </pre>
-                  </div>
-                )}
+                    {rightPanel === "snippets" && (
+                      <VrlSnippetDrawer onInsert={handleInsertSnippet} />
+                    )}
 
-                {testError && (
-                  <div className="space-y-1">
-                    <Label className="text-xs text-red-500">Error</Label>
-                    <pre className="max-h-40 overflow-auto rounded border border-red-300 bg-red-50 p-2 font-mono text-xs text-red-700 dark:border-red-900 dark:bg-red-950/30 dark:text-red-400">
-                      {testError}
-                    </pre>
+                    {/* Test panel */}
+                    <div className="space-y-3 rounded border p-3">
+                      <div className="space-y-1.5">
+                        <div className="flex items-center justify-between">
+                          <Label htmlFor="vrl-sample-input" className="text-xs">
+                            Sample Input (JSON)
+                          </Label>
+                          {sampleEvents.length > 1 && (
+                            <div className="flex items-center gap-1">
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-6 w-6"
+                                disabled={sampleIndex <= 0}
+                                aria-label="Previous sample"
+                                onClick={() => {
+                                  const newIdx = sampleIndex - 1;
+                                  setSampleIndex(newIdx);
+                                  setSampleInput(JSON.stringify(sampleEvents[newIdx], null, 2));
+                                }}
+                              >
+                                <ChevronLeft className="h-3.5 w-3.5" />
+                              </Button>
+                              <span className="text-xs tabular-nums text-muted-foreground">
+                                {sampleIndex + 1}/{sampleEvents.length}
+                              </span>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-6 w-6"
+                                disabled={sampleIndex >= sampleEvents.length - 1}
+                                aria-label="Next sample"
+                                onClick={() => {
+                                  const newIdx = sampleIndex + 1;
+                                  setSampleIndex(newIdx);
+                                  setSampleInput(JSON.stringify(sampleEvents[newIdx], null, 2));
+                                }}
+                              >
+                                <ChevronRight className="h-3.5 w-3.5" />
+                              </Button>
+                            </div>
+                          )}
+                        </div>
+                        <textarea
+                          id="vrl-sample-input"
+                          className="w-full rounded border bg-muted/30 p-2 font-mono text-xs"
+                          rows={4}
+                          value={sampleInput}
+                          onChange={(e) => setSampleInput(e.target.value)}
+                          placeholder={'No test input — a default event will be used:\n{"message": "test event", "timestamp": "...", "host": "localhost"}'}
+                        />
+                      </div>
+
+                      <Button
+                        size="sm"
+                        onClick={handleTest}
+                        disabled={testMutation.isPending}
+                      >
+                        {testMutation.isPending ? "Running..." : "Run VRL"}
+                      </Button>
+
+                      {testOutput && (
+                        <div className="space-y-1">
+                          <Label className="text-xs text-muted-foreground">Output</Label>
+                          <pre className="max-h-40 overflow-auto rounded bg-muted/40 p-2 font-mono text-xs">
+                            {testOutput}
+                          </pre>
+                        </div>
+                      )}
+
+                      {testError && (
+                        <div className="space-y-1">
+                          <Label className="text-xs text-red-500">Error</Label>
+                          <pre className="max-h-40 overflow-auto rounded border border-red-300 bg-red-50 p-2 font-mono text-xs text-red-700 dark:border-red-900 dark:bg-red-950/30 dark:text-red-400">
+                            {testError}
+                          </pre>
+                        </div>
+                      )}
+                    </div>
                   </div>
                 )}
-              </div>
-            </div>
 
-            {/* AI Chat slide-out panel */}
-            {aiPanelOpen && canUseAiChat && (
-              <div className="w-[380px] shrink-0 min-h-0">
-                <VrlAiPanel
-                  conversation={conversation}
-                  currentCode={value}
-                  onCodeChange={onChange}
-                  onClose={() => setAiPanelOpen(false)}
-                />
+                {/* AI chat panel */}
+                {rightPanel === "ai" && canUseAiChat && (
+                  <VrlAiPanel
+                    conversation={conversation}
+                    currentCode={value}
+                    onCodeChange={onChange}
+                    onClose={() => setRightPanel(null)}
+                  />
+                )}
               </div>
             )}
           </div>
diff --git a/src/lib/ai/prompts.ts b/src/lib/ai/prompts.ts
index f5d945c..a5a8344 100644
--- a/src/lib/ai/prompts.ts
+++ b/src/lib/ai/prompts.ts
@@ -135,18 +135,21 @@ export function buildPipelineSystemPrompt(context: {
         suggestions: [
           {
             id: "s1",
-            type: "modify_config",
+            type: "modify_vrl",
             title: "Short title",
             description: "Why this helps",
             priority: "high|medium|low",
-            componentKey: "existing_component_key",
-            changes: { "config.field": "new_value" },
+            componentKey: "remap_component_key",
+            configPath: "source",
+            targetCode: "exact code to find",
+            code: "replacement code",
           },
         ],
       }, null, 2),
       "",
       "Suggestion types:",
-      '- modify_config: { type: "modify_config", componentKey, changes: { field: value } }',
+      '- modify_config: { type: "modify_config", componentKey, changes: { field: value } } — for non-string config values (booleans, numbers, objects)',
+      '- modify_vrl: { type: "modify_vrl", componentKey, configPath: "source", targetCode: "exact lines to find", code: "replacement code" } — for changing VRL/code string fields. targetCode MUST be an exact substring of the current config value.',
       '- add_component: { type: "add_component", component: { key, componentType, kind: "source"|"transform"|"sink", config }, insertAfter: "existing_key", connectTo: ["downstream_key"] }',
       '- remove_component: { type: "remove_component", componentKey, reconnect: true|false }',
       '- modify_connections: { type: "modify_connections", edgeChanges: [{ action: "add"|"remove", from: "key", to: "key" }] }',
@@ -154,6 +157,7 @@ export function buildPipelineSystemPrompt(context: {
       "Rules:",
       "- Each suggestion needs a unique id (s1, s2, s3...)",
       "- componentKey values MUST match real keys from the provided YAML",
+      "- When fixing VRL code (source field of remap transforms), ALWAYS use modify_vrl with the exact targetCode to replace. Never use modify_config to overwrite entire VRL scripts.",
       "- Focus on: performance, correctness, best practices, potential issues",
       "- Prioritize: high = likely bug or major perf issue, medium = optimization, low = cleanup",
       "- Return valid JSON only. No markdown, no code fences, no commentary outside the JSON.",
diff --git a/src/lib/ai/suggestion-applier.ts b/src/lib/ai/suggestion-applier.ts
index efd82a0..95f4edd 100644
--- a/src/lib/ai/suggestion-applier.ts
+++ b/src/lib/ai/suggestion-applier.ts
@@ -29,6 +29,8 @@ export function applySuggestion(
       return applyRemoveComponent(suggestion, nodes, edges);
     case "modify_connections":
       return applyModifyConnections(suggestion, nodes, edges);
+    case "modify_vrl":
+      return applyModifyVrl(suggestion, nodes, edges);
     default:
       return { nodes, edges, error: "Unknown suggestion type" };
   }
@@ -48,6 +50,17 @@ function setAtPath(obj: Record<string, unknown>, path: string, value: unknown):
   return { ...obj, [head]: setAtPath(child, rest.join("."), value) };
 }
 
+/** Read a value at a dot-notation path. */
+function getAtPath(obj: Record<string, unknown>, path: string): unknown {
+  const parts = path.split(".");
+  let current: unknown = obj;
+  for (const part of parts) {
+    if (current == null || typeof current !== "object") return undefined;
+    current = (current as Record<string, unknown>)[part];
+  }
+  return current;
+}
+
 function applyModifyConfig(
   suggestion: AiSuggestion & { type: "modify_config" },
   nodes: Node[],
@@ -201,3 +214,36 @@ function applyModifyConnections(
 
   return { nodes, edges: newEdges };
 }
+
+function applyModifyVrl(
+  suggestion: AiSuggestion & { type: "modify_vrl" },
+  nodes: Node[],
+  edges: Edge[],
+): ApplyResult {
+  const target = findNodeByComponentKey(nodes, suggestion.componentKey);
+  if (!target) {
+    return { nodes, edges, error: `Component "${suggestion.componentKey}" not found` };
+  }
+
+  const existingConfig = (target.data as Record<string, unknown>).config as Record<string, unknown>;
+  const currentValue = getAtPath(existingConfig, suggestion.configPath);
+
+  if (typeof currentValue !== "string") {
+    return { nodes, edges, error: `Config path "${suggestion.configPath}" is not a string value` };
+  }
+
+  if (!currentValue.includes(suggestion.targetCode)) {
+    return { nodes, edges, error: `Target code not found in "${suggestion.configPath}" — code may have changed` };
+  }
+
+  const newValue = currentValue.replaceAll(suggestion.targetCode, suggestion.code);
+  const newConfig = setAtPath(existingConfig, suggestion.configPath, newValue);
+
+  const newNodes = nodes.map((n) =>
+    n.id === target.id
+      ? { ...n, data: { ...n.data, config: newConfig } }
+      : n,
+  );
+
+  return { nodes: newNodes, edges };
+}
diff --git a/src/lib/ai/suggestion-validator.ts b/src/lib/ai/suggestion-validator.ts
index 2fc0597..a2e0923 100644
--- a/src/lib/ai/suggestion-validator.ts
+++ b/src/lib/ai/suggestion-validator.ts
@@ -83,6 +83,8 @@ function getReferencedKeys(s: AiSuggestion): string[] {
       return [s.componentKey];
     case "modify_connections":
       return s.edgeChanges.flatMap((e) => [e.from, e.to]);
+    case "modify_vrl":
+      return [s.componentKey];
   }
 }
 
diff --git a/src/lib/ai/types.ts b/src/lib/ai/types.ts
index b267abf..4d7976f 100644
--- a/src/lib/ai/types.ts
+++ b/src/lib/ai/types.ts
@@ -40,11 +40,20 @@ export interface ModifyConnectionsSuggestion {
   }>;
 }
 
+export interface ModifyVrlSuggestion {
+  type: "modify_vrl";
+  componentKey: string;
+  configPath: string;
+  targetCode: string;
+  code: string;
+}
+
 export type AiSuggestion =
   | (AiSuggestionBase & ModifyConfigSuggestion)
   | (AiSuggestionBase & AddComponentSuggestion)
   | (AiSuggestionBase & RemoveComponentSuggestion)
-  | (AiSuggestionBase & ModifyConnectionsSuggestion);
+  | (AiSuggestionBase & ModifyConnectionsSuggestion)
+  | (AiSuggestionBase & ModifyVrlSuggestion);
 
 export interface AiReviewResponse {
   summary: string;
diff --git a/src/lib/ai/vrl-suggestion-types.ts b/src/lib/ai/vrl-suggestion-types.ts
index 1e00bf8..1893807 100644
--- a/src/lib/ai/vrl-suggestion-types.ts
+++ b/src/lib/ai/vrl-suggestion-types.ts
@@ -39,6 +39,36 @@ export function parseVrlChatResponse(raw: string): VrlChatResponse | null {
   }
 }
 
+/** Collapse all whitespace runs to single space and trim. */
+function normalizeWhitespace(s: string): string {
+  return s.replace(/\s+/g, " ").trim();
+}
+
+/**
+ * Find a substring match using normalized whitespace comparison.
+ * Returns the original start/end indices in haystack, or null.
+ */
+function findNormalizedMatch(
+  haystack: string,
+  needle: string,
+): { start: number; end: number } | null {
+  const normNeedle = normalizeWhitespace(needle);
+  if (!normNeedle) return null;
+
+  // Slide start through haystack
+  for (let start = 0; start < haystack.length; start++) {
+    // Try windows of varying length around the expected needle length (±10 chars)
+    const minEnd = Math.max(start + 1, start + needle.length - 10);
+    const maxEnd = Math.min(haystack.length, start + needle.length + 10);
+    for (let end = minEnd; end <= maxEnd; end++) {
+      if (normalizeWhitespace(haystack.slice(start, end)) === normNeedle) {
+        return { start, end };
+      }
+    }
+  }
+  return null;
+}
+
 /**
  * Compute the status of each VRL suggestion based on the current editor content.
  *
@@ -64,8 +94,16 @@ export function computeVrlSuggestionStatuses(
     }
 
     // replace_code and remove_code: check if targetCode exists in current editor
-    if (s.targetCode && currentCode.includes(s.targetCode)) {
-      statuses.set(s.id, "actionable");
+    if (s.targetCode) {
+      // Fast path: exact match
+      if (currentCode.includes(s.targetCode)) {
+        statuses.set(s.id, "actionable");
+      // Fallback: normalized whitespace match
+      } else if (findNormalizedMatch(currentCode, s.targetCode)) {
+        statuses.set(s.id, "actionable");
+      } else {
+        statuses.set(s.id, "outdated");
+      }
     } else {
       statuses.set(s.id, "outdated");
     }
@@ -88,17 +126,30 @@ export function applyVrlSuggestion(
         ? `${currentCode}\n${suggestion.code}`
         : suggestion.code;
 
-    case "replace_code":
-      if (!suggestion.targetCode || !currentCode.includes(suggestion.targetCode)) {
-        return null;
+    case "replace_code": {
+      if (!suggestion.targetCode) return null;
+      // Fast path: exact match
+      if (currentCode.includes(suggestion.targetCode)) {
+        return currentCode.replaceAll(suggestion.targetCode, suggestion.code);
       }
-      return currentCode.replaceAll(suggestion.targetCode, suggestion.code);
+      // Fallback: normalized whitespace match
+      const match = findNormalizedMatch(currentCode, suggestion.targetCode);
+      if (!match) return null;
+      return currentCode.slice(0, match.start) + suggestion.code + currentCode.slice(match.end);
+    }
 
-    case "remove_code":
-      if (!suggestion.targetCode || !currentCode.includes(suggestion.targetCode)) {
-        return null;
+    case "remove_code": {
+      if (!suggestion.targetCode) return null;
+      // Fast path: exact match
+      if (currentCode.includes(suggestion.targetCode)) {
+        return currentCode.replaceAll(suggestion.targetCode, "").replace(/\n{3,}/g, "\n\n").trim();
       }
-      return currentCode.replaceAll(suggestion.targetCode, "").replace(/\n{3,}/g, "\n\n").trim();
+      // Fallback: normalized whitespace match
+      const match = findNormalizedMatch(currentCode, suggestion.targetCode);
+      if (!match) return null;
+      const removed = currentCode.slice(0, match.start) + currentCode.slice(match.end);
+      return removed.replace(/\n{3,}/g, "\n\n").trim();
+    }
 
     default:
       return null;