From 9a52ebd72736f6ec55072231a926d87be6185a7c Mon Sep 17 00:00:00 2001
From: jsdevninja <topit89807@gmail.com>
Date: Wed, 15 Jul 2026 23:48:55 -0500
Subject: [PATCH] fix(ui): mount ConfigGeneratorYamlPreview in the config
 generator panel

Wire the already-tested YAML preview into ConfigGeneratorPanel so live formState is visible as operators fill the form. Closes #6183.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../config-generator-panel.test.tsx           | 20 +++++++++++++++++++
 .../app-panels/config-generator-panel.tsx     |  2 ++
 2 files changed, 22 insertions(+)
 create mode 100644 apps/loopover-ui/src/components/site/app-panels/config-generator-panel.test.tsx

diff --git a/apps/loopover-ui/src/components/site/app-panels/config-generator-panel.test.tsx b/apps/loopover-ui/src/components/site/app-panels/config-generator-panel.test.tsx
new file mode 100644
index 0000000000..b5ee112474
--- /dev/null
+++ b/apps/loopover-ui/src/components/site/app-panels/config-generator-panel.test.tsx
@@ -0,0 +1,20 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { ConfigGeneratorPanel } from "@/components/site/app-panels/config-generator-panel";
+
+describe("ConfigGeneratorPanel (#6183)", () => {
+  it("mounts ConfigGeneratorYamlPreview so the generated YAML is visible for an empty form", () => {
+    render(<ConfigGeneratorPanel />);
+    expect(screen.getByText("Preview")).toBeTruthy();
+    expect(screen.getByText(/The exact/)).toBeTruthy();
+    expect(screen.getAllByText(".loopover.yml").length).toBeGreaterThanOrEqual(2);
+    expect(screen.getByText(/generated by the config generator/)).toBeTruthy();
+  });
+
+  it("updates the YAML preview when the AI provider mode field group changes formState", () => {
+    render(<ConfigGeneratorPanel />);
+    fireEvent.click(screen.getByRole("radio", { name: "consensus" }));
+    expect(screen.getByText(/combine: consensus/)).toBeTruthy();
+  });
+});
diff --git a/apps/loopover-ui/src/components/site/app-panels/config-generator-panel.tsx b/apps/loopover-ui/src/components/site/app-panels/config-generator-panel.tsx
index 5e0f66232f..34b3e37284 100644
--- a/apps/loopover-ui/src/components/site/app-panels/config-generator-panel.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/config-generator-panel.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 
 import { AiProviderModeFieldGroup } from "@/components/site/app-panels/ai-provider-mode-field-group";
+import { ConfigGeneratorYamlPreview } from "@/components/site/app-panels/config-generator-yaml-preview";
 import { ReesAnalyzerFieldGroup } from "@/components/site/app-panels/rees-analyzer-field-group";
 import type { GeneratorFormState } from "@/lib/config-generator-form-state";
 
@@ -13,6 +14,7 @@ export function ConfigGeneratorPanel() {
     <div className="space-y-6">
       <AiProviderModeFieldGroup state={formState} onChange={setFormState} />
       <ReesAnalyzerFieldGroup state={formState} onChange={setFormState} />
+      <ConfigGeneratorYamlPreview formState={formState} />
     </div>
   );
 }