diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 00000000..3a814283
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "openai.chatgpt"
+    ]
+}
\ No newline at end of file
diff --git a/__tests__/components/RewritePreviewPanel.test.tsx b/__tests__/components/RewritePreviewPanel.test.tsx
index 26cc704a..2be2ea98 100644
--- a/__tests__/components/RewritePreviewPanel.test.tsx
+++ b/__tests__/components/RewritePreviewPanel.test.tsx
@@ -4,10 +4,23 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
+
+jest.mock("react-markdown", () => {
+  return function ReactMarkdown({ children }: { children: string }) {
+    let processed = children.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
+    processed = processed.replace(/\*(.*?)\*/g, "<em>$1</em>");
+    return <div dangerouslySetInnerHTML={{ __html: processed }} />;
+  };
+});
+
+jest.mock("remark-gfm", () => () => {});
+jest.mock("remark-math", () => () => {});
+jest.mock("rehype-katex", () => () => {});
+
 import { RewritePreviewPanel } from "~/app/employer/documents/components/generator/RewritePreviewPanel";
 
 describe("RewritePreviewPanel", () => {
-  it("renders before/after diff and Accept/Reject/Try again buttons", () => {
+  it("renders before/after diff and Push to Rewrite/Reject/Regenerate buttons", () => {
     const onAccept = jest.fn();
     const onReject = jest.fn();
     const onTryAgain = jest.fn();
@@ -22,12 +35,12 @@ describe("RewritePreviewPanel", () => {
       />
     );
 
-    expect(screen.getByText("Accept")).toBeInTheDocument();
+    expect(screen.getByText("Push to Rewrite")).toBeInTheDocument();
     expect(screen.getByText("Reject")).toBeInTheDocument();
-    expect(screen.getByText("Try Again")).toBeInTheDocument();
+    expect(screen.getByText("Regenerate")).toBeInTheDocument();
   });
 
-  it("calls onAccept when Accept is clicked", async () => {
+  it("calls onAccept when Push to Rewrite is clicked", async () => {
     const onAccept = jest.fn();
     const onReject = jest.fn();
     const onTryAgain = jest.fn();
@@ -42,7 +55,7 @@ describe("RewritePreviewPanel", () => {
       />
     );
 
-    await userEvent.click(screen.getByText("Accept"));
+    await userEvent.click(screen.getByText("Push to Rewrite"));
     expect(onAccept).toHaveBeenCalledTimes(1);
   });
 
@@ -65,7 +78,7 @@ describe("RewritePreviewPanel", () => {
     expect(onReject).toHaveBeenCalledTimes(1);
   });
 
-  it("calls onTryAgain when Try Again is clicked", async () => {
+  it("calls onTryAgain when Regenerate is clicked", async () => {
     const onAccept = jest.fn();
     const onReject = jest.fn();
     const onTryAgain = jest.fn();
@@ -80,7 +93,28 @@ describe("RewritePreviewPanel", () => {
       />
     );
 
-    await userEvent.click(screen.getByText("Try Again"));
+    await userEvent.click(screen.getByText("Regenerate"));
     expect(onTryAgain).toHaveBeenCalledTimes(1);
   });
+
+  it("renders markdown formatting in clean view", async () => {
+    const onAccept = jest.fn();
+    const onReject = jest.fn();
+    const onTryAgain = jest.fn();
+
+    render(
+      <RewritePreviewPanel
+        originalText="Plain text"
+        proposedText="**Bold** and *italic*"
+        onAccept={onAccept}
+        onReject={onReject}
+        onTryAgain={onTryAgain}
+      />
+    );
+
+    await userEvent.click(screen.getByRole("tab", { name: /clean view/i }));
+
+    expect(screen.getByText("Bold", { selector: "strong" })).toBeInTheDocument();
+    expect(screen.getByText("italic", { selector: "em" })).toBeInTheDocument();
+  });
 });
diff --git a/src/app/api/agents/documentQ&A/services/index.ts b/src/app/api/agents/documentQ&A/services/index.ts
index b3f0b2a4..81404a63 100644
--- a/src/app/api/agents/documentQ&A/services/index.ts
+++ b/src/app/api/agents/documentQ&A/services/index.ts
@@ -16,7 +16,8 @@ export { buildReferences, extractRecommendedPages, filterPagesByAICitation } fro
 export { performTavilySearch } from "./tavilySearch";
 export { executeWebSearchAgent } from "./webSearchAgent";
 export { SYSTEM_PROMPTS, getSystemPrompt, getWebSearchInstruction } from "./prompts";
-export { getChatModel, getEmbeddings, getChatModelForProvider, getProviderDefaultModel, describeOllamaError, describeProviderError } from "./models";
+export { getChatModel, getEmbeddings } from "./models";
+export { getChatModelForProvider, getProviderDefaultModel, describeOllamaError, describeProviderError } from "~/lib/ai/chat-model-factory";
 export { ProviderModelMap, ProviderDefaultModels } from "./types";
 
 // RLM Search (hierarchical, cost-aware retrieval for large documents)
diff --git a/src/app/api/agents/documentQ&A/services/models.ts b/src/app/api/agents/documentQ&A/services/models.ts
index ffe50b37..3d853660 100644
--- a/src/app/api/agents/documentQ&A/services/models.ts
+++ b/src/app/api/agents/documentQ&A/services/models.ts
@@ -1,108 +1,9 @@
-import { ChatOpenAI, OpenAIEmbeddings } from "@langchain/openai";
-import { ChatAnthropic } from "@langchain/anthropic";
-import { ChatGoogleGenerativeAI } from "@langchain/google-genai";
-import type { BaseChatModel } from "@langchain/core/language_models/chat_models";
-import type { AIModelType } from "./types";
-export { getChatModelForProvider, getProviderDefaultModel, describeOllamaError, describeProviderError } from "~/lib/ai/chat-model-factory";
-
-// Re-export type for convenience
-export type { AIModelType };
-
 /**
- * Get a chat model instance based on the model type
- *
- * Supports all model types defined in types.ts:
- * - OpenAI: gpt-5.2, gpt-5.1, gpt-5-nano, gpt-5-mini
- * - Anthropic: claude-sonnet-4, claude-opus-4.5
- * - Google: gemini-2.5-flash, gemini-3-flash, gemini-3-pro
+ * Document Q&A chat model factory.
+ * Re-exports from shared lib so one place controls model config.
  */
-export function getChatModel(modelType: AIModelType): BaseChatModel {
-    switch (modelType) {
-        // OpenAI Models
-        case "gpt-5.2":
-            return new ChatOpenAI({
-                openAIApiKey: process.env.OPENAI_API_KEY,
-                modelName: "gpt-5.2",
-                temperature: 0.7,
-                timeout: 600000,
-            });
-
-        case "gpt-5.1":
-            return new ChatOpenAI({
-                openAIApiKey: process.env.OPENAI_API_KEY,
-                modelName: "gpt-5.1",
-                temperature: 0.7,
-                timeout: 600000,
-            });
-
-        case "gpt-5-nano":
-            return new ChatOpenAI({
-                openAIApiKey: process.env.OPENAI_API_KEY,
-                modelName: "gpt-5-nano-2025-08-07",
-                timeout: 300000,
-            });
-
-        case "gpt-5-mini":
-            return new ChatOpenAI({
-                openAIApiKey: process.env.OPENAI_API_KEY,
-                modelName: "gpt-5-mini-2025-08-07",
-                timeout: 600000,
-            });
-
-        // Anthropic Models
-        case "claude-sonnet-4":
-            return new ChatAnthropic({
-                anthropicApiKey: process.env.ANTHROPIC_API_KEY,
-                modelName: "claude-sonnet-4-20250514",
-                temperature: 0.7,
-            });
-
-        case "claude-opus-4.5":
-            return new ChatAnthropic({
-                anthropicApiKey: process.env.ANTHROPIC_API_KEY,
-                modelName: "claude-opus-4.5",
-                temperature: 0.7,
-            });
-
-        // Google Gemini Models
-        case "gemini-2.5-flash":
-            return new ChatGoogleGenerativeAI({
-                apiKey: process.env.GOOGLE_AI_API_KEY,
-                model: "gemini-2.5-flash",
-                temperature: 0.7,
-            });
-
-        case "gemini-3-flash":
-            return new ChatGoogleGenerativeAI({
-                apiKey: process.env.GOOGLE_AI_API_KEY,
-                model: "gemini-3-flash-preview",
-                temperature: 0.7,
-            });
-
-        case "gemini-3-pro":
-            return new ChatGoogleGenerativeAI({
-                apiKey: process.env.GOOGLE_AI_API_KEY,
-                model: "gemini-3-pro-preview",
-                temperature: 0.7,
-            });
-
-        // Default fallback
-        default:
-            return new ChatOpenAI({
-                openAIApiKey: process.env.OPENAI_API_KEY,
-                modelName: "gpt-5-mini",
-                temperature: 0.7,
-                timeout: 600000,
-            });
-    }
-}
-
-/**
- * Get embeddings instance
- */
-export function getEmbeddings(): OpenAIEmbeddings {
-    return new OpenAIEmbeddings({
-        model: "text-embedding-ada-002",
-        openAIApiKey: process.env.OPENAI_API_KEY,
-    });
-}
+export {
+  getChatModel,
+  getEmbeddings,
+  type AIModelType,
+} from "~/lib/models";
diff --git a/src/app/api/document-generator/generate/route.ts b/src/app/api/document-generator/generate/route.ts
index 16e91f8f..15091f2b 100644
--- a/src/app/api/document-generator/generate/route.ts
+++ b/src/app/api/document-generator/generate/route.ts
@@ -91,7 +91,7 @@ Guidelines:
 - Apply the requested tone if specified
 - Keep similar length to the original unless otherwise specified
 - Output ONLY the rewritten text: no quotation marks, no "Here is the rewrite:", no wrapper text
-- Use HTML tags for formatting: <strong> for bold, <em> for italic, <u> for underline. Do NOT use Markdown (** or *).`,
+- Use Markdown for formatting: **bold**, *italic*, __underline__. Do NOT use raw HTML tags.`,
 
     summarize: `You are an expert editor specializing in summarization. Your task is to create a concise summary of the given text.
 
@@ -140,7 +140,15 @@ export async function POST(request: Request) {
             );
         }
 
-        const body = await request.json() as unknown;
+        let body: unknown;
+        try {
+            body = (await request.json()) as unknown;
+        } catch {
+            return NextResponse.json(
+                { success: false, message: "Invalid JSON body", error: "Request body must be valid JSON" },
+                { status: 400 },
+            );
+        }
         const validation = GenerateSchema.safeParse(body);
 
         if (!validation.success) {
@@ -153,8 +161,8 @@ export async function POST(request: Request) {
         const { action, content, prompt, context, options } = validation.data;
         const startTime = Date.now();
 
-        // Get the AI model
-        const modelId = (options?.model ?? "gpt-5-mini") as AIModelType;
+        // Get the AI model (gpt-4o is widely available; gpt-5-mini may require newer API access)
+        const modelId = (options?.model ?? "gpt-4o") as AIModelType;
         const chat = getChatModel(modelId);
 
         // Build the system prompt
@@ -221,6 +229,17 @@ export async function POST(request: Request) {
                 const firstDraft = normalizeModelContent(firstPass.content);
 
                 // Refining through second pass
+                const refinementInstructions = [
+                    "Improve sentence flow and rhythm",
+                    "Remove any redundancy or filler phrases",
+                    "Ensure it reads naturally, not like it was AI-generated",
+                    "Preserve all factual information, names, numbers, and technical terms",
+                    prompt
+                        ? "IMPORTANT: The user requested specific additions or changes. Make sure these are fully incorporated and prioritized: " + prompt
+                        : "Do not change the meaning or add new information beyond what was requested",
+                    "Output ONLY the refined text: no quotation marks, no wrapper phrases",
+                ].join("\n- ");
+
                 const secondPass = await chat.call([
                     new SystemMessage(systemPrompt),
                     new HumanMessage(`Here is a rewritten version of the original text:
@@ -228,12 +247,7 @@ export async function POST(request: Request) {
 "${firstDraft}"
 
 Now refine it further:
-- Improve sentence flow and rhythm
-- Remove any redundancy or filler phrases
-- Ensure it reads naturally, not like it was AI-generated
-- Preserve all factual information, names, numbers, and technical terms
-- Do not change the meaning or add new information
-- Output ONLY the refined text: no quotation marks, no wrapper phrases`),
+- ${refinementInstructions}`),
                 ]);
 
                 // Use the refined second pass for rewrite (skip the generic call below)
@@ -287,13 +301,17 @@ Now refine it further:
         });
 
     } catch (error) {
+        const errMessage = error instanceof Error ? error.message : String(error);
+        const stack = error instanceof Error ? error.stack : undefined;
+        console.error("[document-generator/generate] error:", error);
         return NextResponse.json(
-            { 
-                success: false, 
+            {
+                success: false,
                 message: "Failed to generate content",
-                error: error instanceof Error ? error.message : "Unknown error"
+                error: errMessage,
+                ...(process.env.NODE_ENV === "development" && stack ? { stack } : {}),
             },
-            { status: 500 }
+            { status: 500, headers: { "Content-Type": "application/json" } },
         );
     }
 }
diff --git a/src/app/api/marketing-pipeline/route.ts b/src/app/api/marketing-pipeline/route.ts
index 4f1e2dab..6e9e0642 100644
--- a/src/app/api/marketing-pipeline/route.ts
+++ b/src/app/api/marketing-pipeline/route.ts
@@ -4,6 +4,7 @@ import { eq } from "drizzle-orm";
 import { db } from "~/server/db";
 import { users } from "~/server/db/schema";
 import { MarketingPipelineInputSchema, runMarketingPipeline } from "~/lib/tools/marketing-pipeline";
+import type { PipelineSSEEvent } from "~/lib/tools/marketing-pipeline";
 
 export const runtime = "nodejs";
 export const maxDuration = 60;
@@ -18,7 +19,15 @@ export async function POST(request: Request) {
             );
         }
 
-        const body = (await request.json()) as unknown;
+        let body: unknown;
+        try {
+            body = (await request.json()) as unknown;
+        } catch {
+            return NextResponse.json(
+                { success: false, message: "Invalid JSON body", error: "Request body must be valid JSON" },
+                { status: 400 },
+            );
+        }
         const validation = MarketingPipelineInputSchema.safeParse(body);
         if (!validation.success) {
             return NextResponse.json(
@@ -55,29 +64,64 @@ export async function POST(request: Request) {
         const url = new URL(request.url);
         const debug = url.searchParams.get("debug") === "true";
 
-        const result = await runMarketingPipeline({
-            companyId,
-            input: validation.data,
-            debug,
+        const encoder = new TextEncoder();
+        const stream = new ReadableStream({
+            async start(controller) {
+                function send(event: PipelineSSEEvent) {
+                    controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\n\n`));
+                }
+
+                try {
+                    const result = await runMarketingPipeline({
+                        companyId,
+                        input: validation.data,
+                        debug,
+                        onProgress: (progressEvent) => send(progressEvent),
+                    });
+
+                    send({ type: "result", success: true, data: result });
+                } catch (error) {
+                    const errMessage = error instanceof Error ? error.message : String(error);
+                    console.error("[marketing-pipeline] POST error:", error);
+
+                    const hint =
+                        !process.env.OPENAI_API_KEY && errMessage.toLowerCase().includes("openai")
+                            ? " (Ensure OPENAI_API_KEY is set in .env)"
+                            : errMessage.toLowerCase().includes("company")
+                              ? " (Ensure your user has a valid company profile)"
+                              : "";
+
+                    send({
+                        type: "error",
+                        success: false,
+                        message: "Failed to run marketing pipeline",
+                        error: errMessage + hint,
+                    });
+                } finally {
+                    controller.close();
+                }
+            },
         });
 
-        return NextResponse.json(
-            {
-                success: true,
-                data: result,
+        return new Response(stream, {
+            headers: {
+                "Content-Type": "text/event-stream",
+                "Cache-Control": "no-cache, no-transform",
+                "Connection": "keep-alive",
+                "X-Accel-Buffering": "no",
             },
-            { status: 200 },
-        );
+        });
     } catch (error) {
+        const errMessage = error instanceof Error ? error.message : String(error);
         console.error("[marketing-pipeline] POST error:", error);
+
         return NextResponse.json(
             {
                 success: false,
                 message: "Failed to run marketing pipeline",
-                error: error instanceof Error ? error.message : "Unknown error",
+                error: errMessage,
             },
-            { status: 500 },
+            { status: 500, headers: { "Content-Type": "application/json" } },
         );
     }
 }
-
diff --git a/src/app/employer/_components/ProfileDropdown.tsx b/src/app/employer/_components/ProfileDropdown.tsx
index ecb30424..dff6bdd0 100644
--- a/src/app/employer/_components/ProfileDropdown.tsx
+++ b/src/app/employer/_components/ProfileDropdown.tsx
@@ -8,6 +8,11 @@ import {
 
 const ProfileDropdown: React.FC = () => {
     const dropdownRef = useRef<HTMLDivElement>(null);
+    const [isMounted, setIsMounted] = React.useState(false);
+
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
 
     useEffect(() => {
         function handleClickOutside(event: MouseEvent) {
@@ -26,7 +31,7 @@ const ProfileDropdown: React.FC = () => {
 
     return (
         <div className={styles.dropdownContainer} ref={dropdownRef}>
-            <UserButton />
+            {isMounted ? <UserButton /> : <div aria-hidden="true" />}
         </div>
     );
 };
diff --git a/src/app/employer/documents/components/DocumentGeneratorEditor.tsx b/src/app/employer/documents/components/DocumentGeneratorEditor.tsx
index f24b846a..9fa3c499 100644
--- a/src/app/employer/documents/components/DocumentGeneratorEditor.tsx
+++ b/src/app/employer/documents/components/DocumentGeneratorEditor.tsx
@@ -401,7 +401,14 @@ export function DocumentGeneratorEditor({
         }),
       });
 
-      const data = (await response.json()) as { success: boolean; generatedContent?: string };
+      const rawText = await response.text();
+      let data: { success: boolean; generatedContent?: string; message?: string; error?: string };
+      try {
+        data = JSON.parse(rawText);
+      } catch {
+        setAiError(rawText?.slice(0, 120) || "Server returned an invalid response. Please try again.");
+        return;
+      }
 
       if (data.success && data.generatedContent) {
         const generatedContent = data.generatedContent;
@@ -514,7 +521,14 @@ export function DocumentGeneratorEditor({
           options: { tone: "professional", length: "medium" },
         }),
       });
-      const data = (await response.json()) as { success: boolean; generatedContent?: string };
+      const rawText = await response.text();
+      let data: { success: boolean; generatedContent?: string };
+      try {
+        data = JSON.parse(rawText);
+      } catch {
+        setAiError(rawText?.slice(0, 120) || "Server returned an invalid response. Please try again.");
+        return;
+      }
       if (data.success && data.generatedContent) {
         setRewritePreview((p) => (p ? { ...p, proposedText: stripRewriteQuotes(data.generatedContent!) } : null));
       }
diff --git a/src/app/employer/documents/components/DocumentViewerShell.tsx b/src/app/employer/documents/components/DocumentViewerShell.tsx
index 7b4cc61c..b5691c5c 100644
--- a/src/app/employer/documents/components/DocumentViewerShell.tsx
+++ b/src/app/employer/documents/components/DocumentViewerShell.tsx
@@ -295,6 +295,20 @@ export function DocumentViewerShell({ userRole }: DocumentViewerShellProps) {
       }
   }, [isRoleLoading, documents]);
 
+  useEffect(() => {
+    if (isRoleLoading || userRole !== "employer") return;
+
+    const params = new URLSearchParams(window.location.search);
+    const requestedView = params.get("view");
+    if (requestedView === "rewrite") {
+      setViewMode("rewrite");
+      params.delete("view");
+      const next = params.toString();
+      const newUrl = next ? `${window.location.pathname}?${next}` : window.location.pathname;
+      window.history.replaceState({}, "", newUrl);
+    }
+  }, [isRoleLoading, userRole]);
+
   useEffect(() => {
     if (!userId || isRoleLoading) return;
     void fetchDocuments();
diff --git a/src/app/employer/documents/components/MarketingPipelinePanel.tsx b/src/app/employer/documents/components/MarketingPipelinePanel.tsx
index 66562fdf..6670a14f 100644
--- a/src/app/employer/documents/components/MarketingPipelinePanel.tsx
+++ b/src/app/employer/documents/components/MarketingPipelinePanel.tsx
@@ -1,292 +1,13 @@
 "use client";
 
-import { useMemo, useState } from "react";
-import Image from "next/image";
-import { Loader2, MessageSquareText, Megaphone, Sparkles } from "lucide-react";
+import { MarketingPipelineWorkspace } from "~/app/employer/documents/components/marketing-pipeline/MarketingPipelineWorkspace";
 import styles from "~/styles/Employer/MarketingPipeline.module.css";
 
-type Platform = "x" | "linkedin" | "reddit" | "bluesky";
-
-interface PipelineResponse {
-  success: boolean;
-  message?: string;
-  data?: {
-    platform: Platform;
-    message: string;
-    "image/video": "image" | "video";
-    research: Array<{
-      title: string;
-      url: string;
-      snippet: string;
-      source: Platform;
-    }>;
-  };
-}
-
-const REDDIT_SNOO_URL = "/images/reddit-snoo.png";
-
-const PLATFORM_OPTIONS: Array<{
-  id: Platform;
-  label: string;
-  subtitle: string;
-  logoText: string;
-  logoImg?: string;
-}> = [
-  { id: "reddit", label: "Reddit", subtitle: "Community-first threads", logoText: "reddit", logoImg: REDDIT_SNOO_URL },
-  { id: "x", label: "Twitter / X", subtitle: "Fast-moving trends", logoText: "𝕏" },
-  { id: "linkedin", label: "LinkedIn", subtitle: "B2B + thought leadership", logoText: "in" },
-  { id: "bluesky", label: "Bluesky", subtitle: "Decentralized trends", logoText: "🦋" },
-];
-
-function usePlatformLogoClassNames() {
-  return useMemo(
-    () => ({
-      reddit: styles.platformLogoReddit,
-      x: styles.platformLogoX,
-      linkedin: styles.platformLogoLinkedin,
-      bluesky: styles.platformLogoBluesky,
-    }),
-    [],
-  );
-}
-
 export function MarketingPipelinePanel() {
-  const [platform, setPlatform] = useState<Platform | null>(null);
-  const [prompt, setPrompt] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [result, setResult] = useState<PipelineResponse["data"] | null>(null);
-
-  const logoClassNames = usePlatformLogoClassNames();
-  const selectedPlatform = PLATFORM_OPTIONS.find((option) => option.id === platform) ?? null;
-
-  const runPipeline = async () => {
-    setError(null);
-    setResult(null);
-
-    if (!platform) {
-      setError("Choose a platform to continue.");
-      return;
-    }
-
-    const normalizedPrompt = prompt.trim();
-    if (!normalizedPrompt) {
-      setError("Add a short description of what you want to promote.");
-      return;
-    }
-
-    setLoading(true);
-    try {
-      const response = await fetch("/api/marketing-pipeline", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ platform, prompt: normalizedPrompt }),
-      });
-
-      const payload = (await response.json()) as PipelineResponse;
-      if (!response.ok || !payload.success || !payload.data) {
-        setError(payload.message ?? "We couldn't generate a campaign right now. Please try again.");
-        return;
-      }
-
-      setResult(payload.data);
-    } catch (requestError) {
-      console.error("[marketing-pipeline] request error:", requestError);
-      setError("Something went wrong talking to the marketing engine. Try again.");
-    } finally {
-      setLoading(false);
-    }
-  };
-
   return (
     <div className="h-full overflow-y-auto bg-background">
       <div className={styles.main}>
-        <div className={styles.pageHeaderRow}>
-          <div className={styles.pageTitleIcon}>
-            <Megaphone className={styles.pageTitleIconInner} />
-          </div>
-          <div>
-            <h1 className={styles.pageTitle}>Marketing Pipeline</h1>
-            <p className={styles.pageSubtitle}>
-              Create campaign-ready posts for Reddit, X, LinkedIn & Bluesky from your company
-              knowledge base
-            </p>
-          </div>
-        </div>
-
-        {!platform ? (
-          <section className={styles.mainContent}>
-            <section className={styles.platformShell}>
-              <h2 className={styles.platformShellTitle}>Choose platform</h2>
-              <div className={styles.platformGrid}>
-                {PLATFORM_OPTIONS.map((option) => (
-                  <button
-                    key={option.id}
-                    type="button"
-                    className={styles.platformCard}
-                    onClick={() => {
-                      setPlatform(option.id);
-                      setError(null);
-                      setResult(null);
-                    }}
-                  >
-                    <span
-                      className={`${styles.platformLogo} ${logoClassNames[option.id]} ${
-                        option.logoImg ? styles.platformLogoImgContainer : ""
-                      }`}
-                    >
-                      {option.logoImg ? (
-                        <Image
-                          src={option.logoImg}
-                          alt=""
-                          width={64}
-                          height={64}
-                          className={styles.platformLogoImg}
-                        />
-                      ) : (
-                        option.logoText
-                      )}
-                    </span>
-                    <span className={styles.platformName}>{option.label}</span>
-                    <span className={styles.platformSubtitle}>{option.subtitle}</span>
-                  </button>
-                ))}
-              </div>
-              {error && <p className={styles.errorInline}>{error}</p>}
-            </section>
-          </section>
-        ) : (
-          <section className={styles.mainContent}>
-            <section className={styles.workspaceShell}>
-              <div className={styles.workspaceLeft}>
-                <header className={styles.workspaceLeftHeader}>
-                  <div className={styles.selectedPlatformPill}>
-                    <span
-                      className={`${styles.selectedPlatformLogo} ${
-                        selectedPlatform ? logoClassNames[selectedPlatform.id] : ""
-                      } ${selectedPlatform?.logoImg ? styles.platformLogoImgContainer : ""}`}
-                    >
-                      {selectedPlatform?.logoImg ? (
-                        <Image
-                          src={selectedPlatform.logoImg}
-                          alt=""
-                          width={64}
-                          height={64}
-                          className={styles.platformLogoImg}
-                        />
-                      ) : (
-                        selectedPlatform?.logoText
-                      )}
-                    </span>
-                    <span className={styles.selectedPlatformLabel}>{selectedPlatform?.label}</span>
-                  </div>
-                  <button
-                    type="button"
-                    className={styles.changePlatformButton}
-                    onClick={() => {
-                      setPlatform(null);
-                      setPrompt("");
-                      setResult(null);
-                      setError(null);
-                    }}
-                  >
-                    Change platform
-                  </button>
-                </header>
-
-                <div className={styles.promptCard}>
-                  <div className={styles.promptHeaderRow}>
-                    <h2 className={styles.promptTitle}>Describe what you want to promote</h2>
-                    <span className={styles.promptHint}>1-3 sentences is perfect.</span>
-                  </div>
-                  <textarea
-                    className={styles.textarea}
-                    value={prompt}
-                    onChange={(event) => setPrompt(event.target.value)}
-                    placeholder="Example: Promote our AI-powered document workflow for startup operations teams this month."
-                  />
-                  {error && (
-                    <div className={styles.inlineAlert}>
-                      <span>{error}</span>
-                    </div>
-                  )}
-                  <button
-                    type="button"
-                    className={styles.generateButton}
-                    onClick={() => void runPipeline()}
-                    disabled={loading}
-                  >
-                    {loading ? (
-                      <>
-                        <Loader2 size={16} className={styles.spinIcon} />
-                        Generating campaign...
-                      </>
-                    ) : (
-                      <>
-                        <Sparkles size={16} />
-                        Generate campaign draft
-                      </>
-                    )}
-                  </button>
-                </div>
-              </div>
-
-              <aside className={styles.workspaceRight}>
-                <div className={styles.assistantCard}>
-                  <header className={styles.assistantHeader}>
-                    <MessageSquareText size={18} className={styles.assistantIcon} />
-                    <h2 className={styles.assistantTitle}>AI Assistant</h2>
-                  </header>
-
-                  {!result && !loading && (
-                    <p className={styles.assistantEmptyState}>Enter a prompt and click Generate.</p>
-                  )}
-
-                  {loading && (
-                    <div className={styles.assistantLoading}>
-                      <Loader2 size={18} className={styles.spinIcon} />
-                      <span>Researching trends and drafting your message...</span>
-                    </div>
-                  )}
-
-                  {result && !loading && (
-                    <div className={styles.assistantResult}>
-                      <div className={styles.assistantSectionHeader}>Campaign draft</div>
-                      <div className={styles.outputBlock}>
-                        {`platform: ${result.platform}\nmessage: ${result.message}\nimage/video: ${result["image/video"]}`}
-                      </div>
-
-                      {result.research.length > 0 && (
-                        <>
-                          <div className={styles.assistantSectionHeader}>Trend references</div>
-                          <div className={styles.researchList}>
-                            {result.research.map((item) => (
-                              <article
-                                key={`${item.url}-${item.source}`}
-                                className={styles.researchItem}
-                              >
-                                <div className={styles.researchTitle}>{item.title}</div>
-                                <a
-                                  className={styles.researchLink}
-                                  href={item.url}
-                                  target="_blank"
-                                  rel="noreferrer"
-                                >
-                                  {item.url}
-                                </a>
-                                <p className={styles.researchSnippet}>{item.snippet}</p>
-                              </article>
-                            ))}
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  )}
-                </div>
-              </aside>
-            </section>
-          </section>
-        )}
+        <MarketingPipelineWorkspace />
       </div>
     </div>
   );
diff --git a/src/app/employer/documents/components/RewriteDiffView.tsx b/src/app/employer/documents/components/RewriteDiffView.tsx
index fd04fb5f..c568bc49 100644
--- a/src/app/employer/documents/components/RewriteDiffView.tsx
+++ b/src/app/employer/documents/components/RewriteDiffView.tsx
@@ -11,6 +11,7 @@ import { RewriteWorkflow } from "./generator/RewriteWorkflow";
 import type { Citation } from "./generator";
 
 const DEFAULT_TITLE = "Untitled (Rewrite)";
+const PENDING_REWRITE_STORAGE_KEY = "pdr.pendingRewriteDraft";
 
 interface RewriteDocument {
   id: string;
@@ -30,6 +31,13 @@ interface APIDocument {
   updatedAt?: string;
 }
 
+interface PendingRewriteDraft {
+  title?: string;
+  content?: string;
+  createdAt?: number;
+  source?: string;
+}
+
 function formatRelativeTime(dateString: string): string {
   const date = new Date(dateString);
   const now = new Date();
@@ -92,6 +100,43 @@ export function RewriteDiffView() {
     void fetchRewriteDocuments();
   }, [fetchRewriteDocuments]);
 
+  useEffect(() => {
+    let raw: string | null = null;
+    try {
+      raw = sessionStorage.getItem(PENDING_REWRITE_STORAGE_KEY);
+      if (!raw) return;
+      sessionStorage.removeItem(PENDING_REWRITE_STORAGE_KEY);
+
+      const parsed = JSON.parse(raw) as PendingRewriteDraft;
+      const content = typeof parsed.content === "string" ? parsed.content : "";
+      if (!content.trim()) return;
+
+      const title =
+        typeof parsed.title === "string" && parsed.title.trim().length > 0
+          ? parsed.title.trim()
+          : "Rewritten Text";
+
+      const newId = tempIdCounter + 1;
+      setTempIdCounter(newId);
+      setCurrentDocument({
+        id: `temp-${componentId}-${newId}`,
+        title,
+        content,
+        lastEdited: "Just now",
+      });
+      setViewMode("editor");
+      setActiveTab("new");
+    } catch {
+      if (raw) {
+        try {
+          sessionStorage.removeItem(PENDING_REWRITE_STORAGE_KEY);
+        } catch {
+          // Ignore cleanup errors.
+        }
+      }
+    }
+  }, [componentId, tempIdCounter]);
+
   const filteredDocuments = rewriteDocuments.filter((doc) =>
     doc.title.toLowerCase().includes(searchQuery.toLowerCase())
   );
@@ -117,8 +162,10 @@ export function RewriteDiffView() {
       setSaveError(null);
       const trimmedTitle = title.trim();
       const docTitle = trimmedTitle.length > 0 ? trimmedTitle : DEFAULT_TITLE;
+      const isTempDoc = currentDocument?.id.startsWith("temp-") ?? false;
+      const usePut = currentDocument && !isTempDoc;
       try {
-        if (currentDocument) {
+        if (usePut) {
           const response = await fetch("/api/document-generator/documents", {
             method: "PUT",
             headers: { "Content-Type": "application/json" },
@@ -129,7 +176,18 @@ export function RewriteDiffView() {
               citations: citations ?? [],
             }),
           });
-          const data = (await response.json()) as { success: boolean; message?: string };
+          const text = await response.text();
+          let data: { success: boolean; message?: string };
+          try {
+            data = JSON.parse(text) as { success: boolean; message?: string };
+          } catch {
+            setSaveError(
+              response.ok
+                ? "Invalid response from server"
+                : `Failed to save (${response.status}). ${text.slice(0, 100)}`
+            );
+            return;
+          }
           if (!data.success) {
             setSaveError(data.message ?? "Failed to save document");
             return;
@@ -152,11 +210,22 @@ export function RewriteDiffView() {
               metadata: { source: "rewrite" },
             }),
           });
-          const data = (await response.json()) as {
-            success: boolean;
-            message?: string;
-            document?: { id: number };
-          };
+          const text = await response.text();
+          let data: { success: boolean; message?: string; document?: { id: number } };
+          try {
+            data = JSON.parse(text) as {
+              success: boolean;
+              message?: string;
+              document?: { id: number };
+            };
+          } catch {
+            setSaveError(
+              response.ok
+                ? "Invalid response from server"
+                : `Failed to save (${response.status}). ${text.slice(0, 100)}`
+            );
+            return;
+          }
           if (!data.success) {
             setSaveError(data.message ?? "Failed to save document");
             return;
@@ -549,9 +618,8 @@ export function RewriteDiffView() {
                       <p className="text-xs text-muted-foreground">Last edited {doc.lastEdited}</p>
                     </div>
                   </div>
-                  <p className="text-sm text-muted-foreground line-clamp-3 mb-3">
-                    {doc.content.slice(0, 150)}
-                    {doc.content.length > 150 ? "..." : ""}
+                  <p className="text-sm text-muted-foreground mb-3 whitespace-pre-wrap break-words max-h-48 overflow-y-auto">
+                    {doc.content}
                   </p>
                   <Button
                     size="sm"
diff --git a/src/app/employer/documents/components/generator/RewritePreviewPanel.tsx b/src/app/employer/documents/components/generator/RewritePreviewPanel.tsx
index b221378e..20f6e698 100644
--- a/src/app/employer/documents/components/generator/RewritePreviewPanel.tsx
+++ b/src/app/employer/documents/components/generator/RewritePreviewPanel.tsx
@@ -7,6 +7,7 @@ import { Check, X, RotateCw, Eye, EyeOff, ArrowLeftRight } from "lucide-react";
 import { cn } from "~/lib/utils";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
 import { Card } from "../ui/card";
+import MarkdownMessage from "~/app/_components/MarkdownMessage";
 
 export interface RewritePreviewProps {
   originalText: string;
@@ -66,7 +67,7 @@ export function RewritePreviewPanel({
           </span>
         </div>
         <div className="p-3 bg-red-50 dark:bg-red-900/10 rounded-lg border border-red-200/50 dark:border-red-900/50 text-sm leading-relaxed max-h-80 overflow-y-auto">
-          {safeOriginal}
+          <MarkdownMessage content={safeOriginal} className="prose prose-sm dark:prose-invert max-w-none" />
         </div>
       </Card>
       
@@ -79,7 +80,7 @@ export function RewritePreviewPanel({
           </span>
         </div>
         <div className="p-3 bg-green-50 dark:bg-green-900/10 rounded-lg border border-green-200/50 dark:border-green-900/50 text-sm leading-relaxed max-h-80 overflow-y-auto">
-          {safeProposed}
+          <MarkdownMessage content={safeProposed} className="prose prose-sm dark:prose-invert max-w-none" />
         </div>
       </Card>
     </div>
@@ -87,7 +88,7 @@ export function RewritePreviewPanel({
 
   const renderCleanView = () => (
     <div className="p-4 rounded-lg bg-background border border-border text-sm leading-relaxed max-h-96 overflow-y-auto">
-      {safeProposed}
+      <MarkdownMessage content={safeProposed} className="prose prose-sm dark:prose-invert max-w-none" />
     </div>
   );
 
@@ -117,7 +118,7 @@ export function RewritePreviewPanel({
           </Button>
           <Button variant="outline" size="sm" onClick={onTryAgain} disabled={isRetrying}>
             <RotateCw className={cn("w-3 h-3 mr-1.5", isRetrying && "animate-spin")} />
-            Try Again
+            Regenerate
           </Button>
           <Button
             size="sm"
@@ -126,7 +127,7 @@ export function RewritePreviewPanel({
             className="bg-green-600 hover:bg-green-700 text-white"
           >
             <Check className="w-3 h-3 mr-1.5" />
-            Accept
+            Push to Rewrite
           </Button>
         </div>
       </div>
diff --git a/src/app/employer/documents/components/generator/RewriteWorkflow.tsx b/src/app/employer/documents/components/generator/RewriteWorkflow.tsx
index 2088ebbe..0dd4b641 100644
--- a/src/app/employer/documents/components/generator/RewriteWorkflow.tsx
+++ b/src/app/employer/documents/components/generator/RewriteWorkflow.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useEffect } from "react";
 import { 
   CheckCircle, 
   ArrowRight, 
@@ -18,6 +18,7 @@ import { Card } from "../ui/card";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { Textarea } from "../ui/textarea";
 import { Badge } from "../ui/badge";
+import { Switch } from "../ui/switch";
 import { cn } from "~/lib/utils";
 import { RewritePreviewPanel } from "./RewritePreviewPanel";
 
@@ -25,17 +26,27 @@ interface RewriteWorkflowProps {
   initialText?: string;
   onComplete: (rewrittenText: string) => void;
   onCancel: () => void;
+  persistedState?: Partial<RewriteWorkflowStateSnapshot>;
+  onStateChange?: (state: RewriteWorkflowStateSnapshot) => void;
 }
 
-type WorkflowStep = 'input' | 'options' | 'preview' | 'complete';
+export type WorkflowStep = 'input' | 'options' | 'preview' | 'complete';
 
-interface RewriteOptions {
+export interface RewriteOptions {
   tone: 'professional' | 'casual' | 'formal' | 'technical' | 'creative' | 'persuasive';
   length: 'brief' | 'medium' | 'detailed' | 'comprehensive';
   audience: 'general' | 'technical' | 'executives' | 'students' | 'customers' | 'team';
   customPrompt?: string;
 }
 
+export interface RewriteWorkflowStateSnapshot {
+  currentStep: WorkflowStep;
+  text: string;
+  options: RewriteOptions;
+  rewrittenText: string;
+  isDraftMode: boolean;
+}
+
 const TONE_OPTIONS = [
   { value: 'professional', label: 'Professional', desc: 'Clear, business-appropriate language' },
   { value: 'casual', label: 'Casual', desc: 'Friendly and conversational tone' },
@@ -61,17 +72,35 @@ const AUDIENCE_OPTIONS = [
   { value: 'team', label: 'Team Members', desc: 'Internal colleagues' }
 ] as const;
 
-export function RewriteWorkflow({ initialText = "", onComplete, onCancel }: RewriteWorkflowProps) {
-  const [currentStep, setCurrentStep] = useState<WorkflowStep>(initialText ? 'options' : 'input');
-  const [text, setText] = useState(initialText);
+export function RewriteWorkflow({ initialText = "", onComplete, onCancel, persistedState, onStateChange }: RewriteWorkflowProps) {
+  const persistedStep = persistedState?.currentStep;
+  const effectiveStep = persistedStep === 'complete'
+    ? (initialText ? 'options' : 'input')
+    : (persistedStep ?? (initialText ? 'options' : 'input'));
+
+  const [currentStep, setCurrentStep] = useState<WorkflowStep>(effectiveStep);
+  const [text, setText] = useState(persistedStep === 'complete' ? initialText : (persistedState?.text ?? initialText));
   const [options, setOptions] = useState<RewriteOptions>({
-    tone: 'professional',
-    length: 'medium',
-    audience: 'general'
+    tone: persistedState?.options?.tone ?? 'professional',
+    length: persistedState?.options?.length ?? 'medium',
+    audience: persistedState?.options?.audience ?? 'general',
+    customPrompt: persistedState?.options?.customPrompt ?? "",
   });
-  const [rewrittenText, setRewrittenText] = useState("");
+  const [rewrittenText, setRewrittenText] = useState(persistedStep === 'complete' ? "" : (persistedState?.rewrittenText ?? ""));
   const [isProcessing, setIsProcessing] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [isDraftMode, setIsDraftMode] = useState(persistedState?.isDraftMode ?? true);
+
+  useEffect(() => {
+    if (!onStateChange) return;
+    onStateChange({
+      currentStep,
+      text,
+      options,
+      rewrittenText,
+      isDraftMode,
+    });
+  }, [currentStep, isDraftMode, onStateChange, options, rewrittenText, text]);
 
   const handleRewrite = useCallback(async () => {
     if (!text.trim()) return;
@@ -95,13 +124,24 @@ export function RewriteWorkflow({ initialText = "", onComplete, onCancel }: Rewr
         })
       });
 
-      const data = await response.json() as { success: boolean; message?: string; generatedContent?: string };
+      const responseText = await response.text();
+      let data: { success: boolean; message?: string; generatedContent?: string; error?: string };
+      try {
+        data = JSON.parse(responseText);
+      } catch {
+        setError(responseText?.slice(0, 120) || 'Server returned an invalid response. Please try again.');
+        return;
+      }
       
       if (data.success && typeof data.generatedContent === "string" && data.generatedContent.trim().length > 0) {
-        setRewrittenText(data.generatedContent);
-        setCurrentStep('preview');
+        if (isDraftMode) {
+          setRewrittenText(data.generatedContent);
+          setCurrentStep('preview');
+        } else {
+          onComplete(data.generatedContent);
+        }
       } else {
-        setError(data.message ?? 'Failed to rewrite text');
+        setError(data.message ?? data.error ?? 'Failed to rewrite text');
       }
     } catch (err) {
       console.error('Rewrite request failed', err);
@@ -109,7 +149,7 @@ export function RewriteWorkflow({ initialText = "", onComplete, onCancel }: Rewr
     } finally {
       setIsProcessing(false);
     }
-  }, [text, options]);
+  }, [isDraftMode, onComplete, options, text]);
 
   const handleAcceptRewrite = useCallback(() => {
     onComplete(rewrittenText);
@@ -237,8 +277,8 @@ export function RewriteWorkflow({ initialText = "", onComplete, onCancel }: Rewr
             </div>
           )}
           
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
-            <div>
+          <div className="flex flex-col gap-6 mb-6">
+            <div className="min-w-0">
               <label className="block text-sm font-medium mb-2">Tone</label>
               <Select
                 value={options.tone}
@@ -246,23 +286,21 @@ export function RewriteWorkflow({ initialText = "", onComplete, onCancel }: Rewr
                   setOptions(prev => ({ ...prev, tone: value }))
                 }
               >
-                <SelectTrigger className="text-left min-h-12 h-12 py-3">
+                <SelectTrigger className="text-left min-h-12 h-12 py-3 w-full">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
                   {TONE_OPTIONS.map(option => (
                     <SelectItem key={option.value} value={option.value}>
-                      <div className="text-left">
-                        <div className="font-medium">{option.label}</div>
-                        <div className="text-xs text-muted-foreground">{option.desc}</div>
-                      </div>
+                      <span className="block truncate font-medium">{option.label}</span>
+                      <span className="block text-xs text-muted-foreground">{option.desc}</span>
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             </div>
 
-            <div>
+            <div className="min-w-0">
               <label className="block text-sm font-medium mb-2">Length</label>
               <Select
                 value={options.length}
@@ -270,23 +308,21 @@ export function RewriteWorkflow({ initialText = "", onComplete, onCancel }: Rewr
                   setOptions(prev => ({ ...prev, length: value }))
                 }
               >
-                <SelectTrigger className="text-left min-h-12 h-12 py-3">
+                <SelectTrigger className="text-left min-h-12 h-12 py-3 w-full">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
                   {LENGTH_OPTIONS.map(option => (
                     <SelectItem key={option.value} value={option.value}>
-                      <div className="text-left">
-                        <div className="font-medium">{option.label}</div>
-                        <div className="text-xs text-muted-foreground">{option.desc}</div>
-                      </div>
+                      <span className="block truncate font-medium">{option.label}</span>
+                      <span className="block text-xs text-muted-foreground">{option.desc}</span>
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             </div>
 
-            <div>
+            <div className="min-w-0">
               <label className="block text-sm font-medium mb-2">Audience</label>
               <Select
                 value={options.audience}
@@ -294,16 +330,14 @@ export function RewriteWorkflow({ initialText = "", onComplete, onCancel }: Rewr
                   setOptions(prev => ({ ...prev, audience: value }))
                 }
               >
-                <SelectTrigger className="text-left min-h-12 h-12 py-3">
+                <SelectTrigger className="text-left min-h-12 h-12 py-3 w-full">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
                   {AUDIENCE_OPTIONS.map(option => (
                     <SelectItem key={option.value} value={option.value}>
-                      <div className="text-left">
-                        <div className="font-medium">{option.label}</div>
-                        <div className="text-xs text-muted-foreground">{option.desc}</div>
-                      </div>
+                      <span className="block truncate font-medium">{option.label}</span>
+                      <span className="block text-xs text-muted-foreground">{option.desc}</span>
                     </SelectItem>
                   ))}
                 </SelectContent>
@@ -322,6 +356,21 @@ export function RewriteWorkflow({ initialText = "", onComplete, onCancel }: Rewr
             />
           </div>
 
+          <div className="mb-6 flex items-start justify-between gap-4 rounded-lg border border-border bg-muted/30 p-4">
+            <div className="min-w-0 flex-1">
+              <p className="text-sm font-medium">Draft Mode</p>
+              <p className="text-xs text-muted-foreground mt-1">
+                ON: show generated draft below so you can regenerate or push to Rewrite. OFF: apply directly to document.
+              </p>
+            </div>
+            <Switch
+              aria-label="Draft mode"
+              checked={isDraftMode}
+              onCheckedChange={setIsDraftMode}
+              className="flex-shrink-0"
+            />
+          </div>
+
           <div className="border-t pt-4">
             <div className="mb-4">
               <p className="text-sm font-medium mb-2">Selected Options:</p>
@@ -333,25 +382,30 @@ export function RewriteWorkflow({ initialText = "", onComplete, onCancel }: Rewr
             </div>
           </div>
           
-          <div className="flex gap-3">
-            <Button variant="outline" onClick={() => setCurrentStep('input')}>
+          <div className="flex flex-wrap gap-3 items-center min-h-[44px]">
+            <Button variant="outline" onClick={() => setCurrentStep('input')} className="flex-shrink-0">
               <ArrowLeft className="w-4 h-4 mr-2" />
               Back
             </Button>
             <Button 
               onClick={handleRewrite}
               disabled={isProcessing}
-              className="bg-amber-600 hover:bg-amber-700 text-white"
+              className="!bg-amber-600 hover:!bg-amber-500 !text-white border-2 border-amber-700 flex-shrink-0 min-w-[180px] dark:!bg-amber-500 dark:hover:!bg-amber-400 dark:!text-white dark:border-amber-400 shadow-lg"
             >
               {isProcessing ? (
                 <>
                   <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                   Rewriting...
                 </>
+              ) : isDraftMode ? (
+                <>
+                  <Sparkles className="w-4 h-4 mr-2" />
+                  Generate Draft
+                </>
               ) : (
                 <>
                   <Sparkles className="w-4 h-4 mr-2" />
-                  Generate Rewrite
+                  Generate & Apply
                 </>
               )}
             </Button>
@@ -382,14 +436,14 @@ export function RewriteWorkflow({ initialText = "", onComplete, onCancel }: Rewr
             proposedText={rewrittenText}
             onAccept={handleAcceptRewrite}
             onReject={onCancel}
-            onTryAgain={handleRetry}
+            onTryAgain={handleRewrite}
             isRetrying={isProcessing}
           />
 
           <div className="flex gap-3">
             <Button variant="outline" onClick={handleRetry}>
               <RotateCw className="w-4 h-4 mr-2" />
-              Try Different Options
+              Edit Options
             </Button>
             <Button variant="outline" onClick={onCancel}>
               Cancel
@@ -399,7 +453,7 @@ export function RewriteWorkflow({ initialText = "", onComplete, onCancel }: Rewr
               className="bg-green-600 hover:bg-green-700 text-white"
             >
               <Check className="w-4 h-4 mr-2" />
-              Accept Rewrite
+              Push to Rewrite
             </Button>
           </div>
         </div>
diff --git a/src/app/employer/documents/components/marketing-pipeline/MarketingPipelineWorkspace.tsx b/src/app/employer/documents/components/marketing-pipeline/MarketingPipelineWorkspace.tsx
new file mode 100644
index 00000000..b0763e46
--- /dev/null
+++ b/src/app/employer/documents/components/marketing-pipeline/MarketingPipelineWorkspace.tsx
@@ -0,0 +1,1013 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import Image from "next/image";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import {
+  Check,
+  ChevronDown,
+  ChevronRight,
+  Circle,
+  Copy,
+  FileText,
+  Hash,
+  Loader2,
+  Megaphone,
+  MessageSquareText,
+  Pencil,
+  Plus,
+  Sparkles,
+  Target,
+  X,
+} from "lucide-react";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "~/app/employer/documents/components/ui/sheet";
+import { RewriteWorkflow } from "~/app/employer/documents/components/generator/RewriteWorkflow";
+import styles from "~/styles/Employer/MarketingPipeline.module.css";
+import {
+  PIPELINE_STEP_ORDER,
+  PLATFORM_OPTIONS,
+  REDDIT_SNOO_URL,
+  type MessageVariant,
+  type PipelineStepState,
+  type PlatformFieldConfig,
+  type PlatformMeta,
+} from "./shared";
+import { useMarketingPipelineController } from "./useMarketingPipelineController";
+
+export interface MarketingPipelineWorkspaceProps {
+  debug?: boolean;
+  showDnaDebugSection?: boolean;
+}
+
+function usePlatformLogoClassNames() {
+  return useMemo(
+    () => ({
+      reddit: styles.platformLogoReddit,
+      x: styles.platformLogoX,
+      linkedin: styles.platformLogoLinkedin,
+      bluesky: styles.platformLogoBluesky,
+    }),
+    [],
+  );
+}
+
+/* ─── How-it-works explainer (Fix 1) ─── */
+
+function HowItWorks() {
+  return (
+    <div className={styles.howItWorks}>
+      <div className={styles.howItWorksStep}>
+        <span className={styles.howItWorksNumber}>1</span>
+        <span className={styles.howItWorksText}>Pick a platform</span>
+      </div>
+      <div className={styles.howItWorksDivider} />
+      <div className={styles.howItWorksStep}>
+        <span className={styles.howItWorksNumber}>2</span>
+        <span className={styles.howItWorksText}>Describe what to promote</span>
+      </div>
+      <div className={styles.howItWorksDivider} />
+      <div className={styles.howItWorksStep}>
+        <span className={styles.howItWorksNumber}>3</span>
+        <span className={styles.howItWorksText}>Get a campaign-ready draft in ~30s</span>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Pipeline stepper with progress fraction (Fix 3) ─── */
+
+function PipelineStepper({
+  steps,
+  generationStartTime,
+}: {
+  steps: PipelineStepState[];
+  generationStartTime: number | null;
+}) {
+  const [elapsed, setElapsed] = useState(0);
+
+  useEffect(() => {
+    if (!generationStartTime) return;
+    const timer = setInterval(() => {
+      setElapsed(Math.floor((Date.now() - generationStartTime) / 1000));
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [generationStartTime]);
+
+  const completedCount = steps.filter((s) => s.status === "completed").length;
+  const totalSteps = steps.length;
+
+  return (
+    <div className={styles.pipelineStepper}>
+      <div className={styles.stepperHeader}>
+        <span className={styles.stepperProgress}>
+          Step {Math.min(completedCount + 1, totalSteps)} of {totalSteps}
+        </span>
+        <span className={styles.stepperElapsed}>{elapsed}s elapsed</span>
+      </div>
+      {steps.map((step) => (
+        <div
+          key={step.id}
+          className={`${styles.stepperItem} ${
+            step.status === "completed"
+              ? styles.stepperCompleted
+              : step.status === "active"
+                ? styles.stepperActive
+                : styles.stepperPending
+          }`}
+        >
+          <div className={styles.stepperIndicator}>
+            {step.status === "completed" ? (
+              <Check size={14} />
+            ) : step.status === "active" ? (
+              <Loader2 size={14} className={styles.spinIcon} />
+            ) : (
+              <Circle size={10} />
+            )}
+          </div>
+          <div className={styles.stepperContent}>
+            <span className={styles.stepperLabel}>{step.label}</span>
+            <div className={styles.stepperMeta}>
+              {step.status === "completed" && step.durationMs != null && (
+                <span className={styles.stepperDuration}>
+                  {(step.durationMs / 1000).toFixed(1)}s
+                </span>
+              )}
+              {step.detail && (
+                <span className={styles.stepperDetail}>{step.detail}</span>
+              )}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/* ─── Strategy insights card (Fix 6) ─── */
+
+function StrategyInsights({
+  strategyUsed,
+  competitiveAngle,
+}: {
+  strategyUsed?: { angle: string; keyProof: string[]; humanHook: string; avoidList: string[] };
+  competitiveAngle?: string;
+}) {
+  const [open, setOpen] = useState(false);
+
+  if (!strategyUsed && !competitiveAngle) return null;
+
+  return (
+    <div className={styles.strategyCard}>
+      <button
+        type="button"
+        className={styles.strategyToggle}
+        onClick={() => setOpen((prev) => !prev)}
+      >
+        <Target size={14} />
+        <span>Strategy used</span>
+        {open ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+      </button>
+      {open && strategyUsed && (
+        <div className={styles.strategyContent}>
+          <div className={styles.strategySection}>
+            <div className={styles.strategySectionLabel}>Positioning angle</div>
+            <p className={styles.strategySectionText}>{strategyUsed.angle}</p>
+          </div>
+          {strategyUsed.keyProof.length > 0 && (
+            <div className={styles.strategySection}>
+              <div className={styles.strategySectionLabel}>Key proof points</div>
+              <ul className={styles.strategyList}>
+                {strategyUsed.keyProof.map((proof, i) => (
+                  <li key={i}>{proof}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+          <div className={styles.strategySection}>
+            <div className={styles.strategySectionLabel}>Human hook</div>
+            <p className={styles.strategySectionText}>{strategyUsed.humanHook}</p>
+          </div>
+          {strategyUsed.avoidList.length > 0 && (
+            <div className={styles.strategySection}>
+              <div className={styles.strategySectionLabel}>What to avoid</div>
+              <ul className={styles.strategyList}>
+                {strategyUsed.avoidList.map((item, i) => (
+                  <li key={i}>{item}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ─── Platform-specific fields (subreddit / hashtags) ─── */
+
+function SubredditField({
+  config,
+  value,
+  onChange,
+}: {
+  config: PlatformFieldConfig;
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [inputValue, setInputValue] = useState(value.replace(/^r\//, ""));
+
+  const filtered = config.suggestions.filter((s) =>
+    s.toLowerCase().includes(inputValue.toLowerCase()),
+  );
+
+  const handleSelect = (subreddit: string) => {
+    const normalized = subreddit.startsWith("r/") ? subreddit : `r/${subreddit}`;
+    onChange(normalized);
+    setInputValue(subreddit.replace(/^r\//, ""));
+    setOpen(false);
+  };
+
+  return (
+    <div className={styles.platformFieldGroup}>
+      <label className={styles.platformFieldLabel}>{config.label}</label>
+      <div className={styles.subredditInputWrapper}>
+        <span className={styles.subredditPrefix}>r/</span>
+        <input
+          type="text"
+          className={styles.subredditInput}
+          value={inputValue}
+          placeholder="startups"
+          onChange={(e) => {
+            setInputValue(e.target.value);
+            onChange(e.target.value ? `r/${e.target.value}` : "");
+            setOpen(true);
+          }}
+          onFocus={() => setOpen(true)}
+          onBlur={() => setTimeout(() => setOpen(false), 150)}
+        />
+      </div>
+      {open && filtered.length > 0 && (
+        <div className={styles.subredditDropdown}>
+          {filtered.map((s) => (
+            <button
+              key={s}
+              type="button"
+              className={styles.subredditOption}
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={() => handleSelect(s)}
+            >
+              {s}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function HashtagField({
+  config,
+  values,
+  onChange,
+}: {
+  config: PlatformFieldConfig;
+  values: string[];
+  onChange: (v: string[]) => void;
+}) {
+  const [inputValue, setInputValue] = useState("");
+  const atLimit = values.length >= config.maxItems;
+
+  const addTag = (raw: string) => {
+    const tag = raw.startsWith("#") ? raw : `#${raw}`;
+    const normalized = tag.replace(/\s+/g, "");
+    if (!normalized || normalized === "#") return;
+    if (values.includes(normalized) || atLimit) return;
+    onChange([...values, normalized]);
+    setInputValue("");
+  };
+
+  const removeTag = (tag: string) => {
+    onChange(values.filter((t) => t !== tag));
+  };
+
+  const unusedSuggestions = config.suggestions.filter((s) => !values.includes(s));
+
+  return (
+    <div className={styles.platformFieldGroup}>
+      <label className={styles.platformFieldLabel}>
+        {config.label}
+        <span className={styles.platformFieldCount}>
+          {values.length}/{config.maxItems}
+        </span>
+      </label>
+      <div className={styles.hashtagInputContainer}>
+        {values.map((tag) => (
+          <span key={tag} className={styles.hashtagTag}>
+            {tag}
+            <button
+              type="button"
+              className={styles.hashtagTagRemove}
+              onClick={() => removeTag(tag)}
+              aria-label={`Remove ${tag}`}
+            >
+              <X size={10} />
+            </button>
+          </span>
+        ))}
+        {!atLimit && (
+          <input
+            type="text"
+            className={styles.hashtagInput}
+            value={inputValue}
+            placeholder={values.length === 0 ? "Add a hashtag..." : ""}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === ",") {
+                e.preventDefault();
+                addTag(inputValue);
+              } else if (e.key === "Backspace" && !inputValue && values.length > 0) {
+                removeTag(values[values.length - 1]!);
+              }
+            }}
+          />
+        )}
+      </div>
+      {unusedSuggestions.length > 0 && !atLimit && (
+        <div className={styles.hashtagSuggestions}>
+          {unusedSuggestions.map((s) => (
+            <button
+              key={s}
+              type="button"
+              className={styles.hashtagSuggestionChip}
+              onClick={() => addTag(s)}
+            >
+              <Hash size={10} />
+              {s.replace(/^#/, "")}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function PlatformFields({
+  fields,
+  meta,
+  onMetaChange,
+}: {
+  fields: PlatformFieldConfig[];
+  meta: PlatformMeta;
+  onMetaChange: (next: PlatformMeta) => void;
+}) {
+  if (!fields.length) return null;
+
+  return (
+    <div className={styles.platformFieldsSection}>
+      {fields.map((field) => {
+        if (field.type === "subreddit") {
+          return (
+            <SubredditField
+              key={field.type}
+              config={field}
+              value={meta.subreddit ?? ""}
+              onChange={(v) => onMetaChange({ ...meta, subreddit: v || undefined })}
+            />
+          );
+        }
+        return (
+          <HashtagField
+            key={field.type}
+            config={field}
+            values={meta.hashtags ?? []}
+            onChange={(v) => onMetaChange({ ...meta, hashtags: v.length ? v : undefined })}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+/* ─── Stacked rewrite variants ─── */
+
+function VariantStack({
+  variants,
+  activeVariantId,
+  onSelect,
+}: {
+  variants: MessageVariant[];
+  activeVariantId: string | null;
+  onSelect: (id: string) => void;
+}) {
+  if (variants.length < 2) return null;
+
+  return (
+    <div className={styles.variantStack}>
+      <div className={styles.variantStackHeader}>
+        Variants ({variants.length})
+      </div>
+      {variants.map((v) => {
+        const isActive = v.id === activeVariantId;
+        return (
+          <div
+            key={v.id}
+            className={`${styles.variantCard} ${isActive ? styles.variantCardActive : ""}`}
+          >
+            <div className={styles.variantCardHeader}>
+              <span className={styles.variantLabel}>{v.label}</span>
+              {isActive ? (
+                <span className={styles.variantActiveBadge}>
+                  <Check size={10} />
+                  Active
+                </span>
+              ) : (
+                <button
+                  type="button"
+                  className={styles.variantUseButton}
+                  onClick={() => onSelect(v.id)}
+                >
+                  Use this
+                </button>
+              )}
+            </div>
+            <p className={styles.variantPreview}>
+              {v.text.length > 140 ? `${v.text.slice(0, 140)}...` : v.text}
+            </p>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/* ─── Main workspace ─── */
+
+export function MarketingPipelineWorkspace({
+  debug = false,
+  showDnaDebugSection = false,
+}: MarketingPipelineWorkspaceProps) {
+  const [debugOpen, setDebugOpen] = useState(false);
+  const [confirmNewCampaign, setConfirmNewCampaign] = useState(false);
+  const logoClassNames = usePlatformLogoClassNames();
+
+  const {
+    platform,
+    setPlatform,
+    prompt,
+    setPrompt,
+    loading,
+    error,
+    setError,
+    result,
+    setResult,
+    editableMessage,
+    setEditableMessage,
+    showRewriteSheet,
+    setShowRewriteSheet,
+    copySuccess,
+    viewMode,
+    setViewMode,
+    sessions,
+    activeSessionId,
+    selectedPlatform,
+    activeSession,
+    handleSelectSession,
+    handleStartNewSession,
+    handleRewriteComplete,
+    handleRewriteWorkflowStateChange,
+    handlePushToRewriteDocument,
+    handleCopy,
+    runPipeline,
+    cancelPipeline,
+    pipelineSteps,
+    generationStartTime,
+    platformMeta,
+    setPlatformMeta,
+    messageVariants,
+    activeVariantId,
+    selectVariant,
+  } = useMarketingPipelineController({ debug });
+
+  const hasSessions = sessions.length > 0;
+
+  const handleNewCampaignClick = () => {
+    if (result) {
+      setConfirmNewCampaign(true);
+    } else {
+      handleStartNewSession();
+    }
+  };
+
+  const confirmAndStartNew = () => {
+    setConfirmNewCampaign(false);
+    handleStartNewSession();
+  };
+
+  return (
+    <>
+      <div className={styles.pageHeaderRow}>
+        <div className={styles.pageTitleIcon}>
+          <Megaphone className={styles.pageTitleIconInner} />
+        </div>
+        <div>
+          <h1 className={styles.pageTitle}>Marketing Pipeline</h1>
+          <p className={styles.pageSubtitle}>
+            Create campaign-ready posts for Reddit, X, LinkedIn & Bluesky from your company
+            knowledge base
+          </p>
+        </div>
+      </div>
+
+      {!platform ? (
+        <section className={styles.mainContent}>
+          <section className={styles.platformShell}>
+            <h2 className={styles.platformShellTitle}>Choose platform</h2>
+            <HowItWorks />
+            <div className={styles.platformGrid}>
+              {PLATFORM_OPTIONS.map((option) => (
+                <button
+                  key={option.id}
+                  type="button"
+                  className={styles.platformCard}
+                  onClick={() => {
+                    setPlatform(option.id);
+                    setError(null);
+                    setResult(null);
+                  }}
+                >
+                  <span
+                    className={`${styles.platformLogo} ${logoClassNames[option.id]} ${
+                      option.logoImg ? styles.platformLogoImgContainer : ""
+                    }`}
+                  >
+                    {option.logoImg ? (
+                      <Image
+                        src={option.logoImg}
+                        alt=""
+                        width={64}
+                        height={64}
+                        className={styles.platformLogoImg}
+                      />
+                    ) : (
+                      option.logoText
+                    )}
+                  </span>
+                  <span className={styles.platformName}>{option.label}</span>
+                  <span className={styles.platformSubtitle}>{option.subtitle}</span>
+                  <span className={styles.platformBestFor}>{option.bestFor}</span>
+                  <span className={styles.platformCharLimit}>{option.charLimit}</span>
+                </button>
+              ))}
+            </div>
+            {error && <p className={styles.errorInline}>{error}</p>}
+          </section>
+        </section>
+      ) : (
+        <section className={styles.mainContent}>
+          <div className={hasSessions ? styles.workspaceLayout : styles.workspaceLayoutSingle}>
+            {/* Fix 5: Only show sidebar when sessions exist */}
+            {hasSessions && (
+              <aside className={styles.sessionSidebar}>
+                <div className={styles.sessionPanel}>
+                  <div className={styles.sessionPanelHeader}>
+                    <h3 className={styles.sessionPanelTitle}>Sessions</h3>
+                    <button type="button" className={styles.newSessionButton} onClick={handleNewCampaignClick}>
+                      <Plus size={12} />
+                      New
+                    </button>
+                  </div>
+                  <div className={styles.sessionList}>
+                    {sessions.map((session) => (
+                      <button
+                        key={session.id}
+                        type="button"
+                        className={`${styles.sessionItem} ${
+                          activeSessionId === session.id ? styles.sessionItemActive : ""
+                        }`}
+                        onClick={() => handleSelectSession(session)}
+                      >
+                        <span className={styles.sessionItemTitle}>
+                          {session.prompt
+                            ? session.prompt.length > 80
+                              ? `${session.prompt.slice(0, 80)}...`
+                              : session.prompt
+                            : "Untitled session"}
+                        </span>
+                        <span className={styles.sessionItemMeta}>
+                          {session.platform
+                            ? PLATFORM_OPTIONS.find((p) => p.id === session.platform)?.label ??
+                              session.platform
+                            : "No platform"}{" "}
+                          &bull; {new Date(session.updatedAt).toLocaleString()}
+                        </span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </aside>
+            )}
+
+            <section className={styles.workspaceShell}>
+              <div className={`${styles.workspaceMain} ${styles.workspaceMainSingle}`}>
+                <div className={styles.workspaceMainHeader}>
+                  <MessageSquareText size={18} className={styles.assistantIcon} />
+                  <h2 className={styles.assistantTitle}>AI Assistant</h2>
+                </div>
+                <div className={styles.workspaceLeft}>
+                  <header className={styles.workspaceLeftHeader}>
+                    <div className={styles.selectedPlatformPill}>
+                      <span
+                        className={`${styles.selectedPlatformLogo} ${
+                          selectedPlatform ? logoClassNames[selectedPlatform.id] : ""
+                        } ${selectedPlatform?.logoImg ? styles.platformLogoImgContainer : ""}`}
+                      >
+                        {selectedPlatform?.logoImg ? (
+                          <Image
+                            src={selectedPlatform.logoImg}
+                            alt=""
+                            width={64}
+                            height={64}
+                            className={styles.platformLogoImg}
+                          />
+                        ) : (
+                          selectedPlatform?.logoText
+                        )}
+                      </span>
+                      <span className={styles.selectedPlatformLabel}>{selectedPlatform?.label}</span>
+                    </div>
+                    {/* Fix 7: Renamed to "New campaign" with confirmation */}
+                    <button
+                      type="button"
+                      className={styles.changePlatformButton}
+                      onClick={handleNewCampaignClick}
+                    >
+                      <Plus size={14} />
+                      New campaign
+                    </button>
+                  </header>
+
+                  {/* Fix 7: Confirmation dialog */}
+                  {confirmNewCampaign && (
+                    <div className={styles.confirmBar}>
+                      <span>Start a new campaign? Your current draft is saved in sessions.</span>
+                      <div className={styles.confirmBarActions}>
+                        <button type="button" className={styles.confirmBarYes} onClick={confirmAndStartNew}>
+                          Yes, start new
+                        </button>
+                        <button type="button" className={styles.confirmBarNo} onClick={() => setConfirmNewCampaign(false)}>
+                          Cancel
+                        </button>
+                      </div>
+                    </div>
+                  )}
+
+                  <div className={styles.promptCard}>
+                    <div className={styles.promptHeaderRow}>
+                      <h2 className={styles.promptTitle}>Describe what you want to promote</h2>
+                      <span className={styles.promptHint}>1-3 sentences is perfect.</span>
+                    </div>
+                    <textarea
+                      className={styles.textarea}
+                      value={prompt}
+                      onChange={(e) => setPrompt(e.target.value)}
+                      placeholder={selectedPlatform?.placeholder ?? "Example: Promote our AI-powered document workflow for startup operations teams this month."}
+                    />
+
+                    {!prompt.trim() && selectedPlatform?.promptTemplates && (
+                      <div className={styles.promptChips}>
+                        {selectedPlatform.promptTemplates.map((template) => (
+                          <button
+                            key={template}
+                            type="button"
+                            className={styles.promptChip}
+                            onClick={() => setPrompt(template)}
+                          >
+                            {template}
+                          </button>
+                        ))}
+                      </div>
+                    )}
+
+                    {selectedPlatform?.platformFields && (
+                      <PlatformFields
+                        fields={selectedPlatform.platformFields}
+                        meta={platformMeta}
+                        onMetaChange={setPlatformMeta}
+                      />
+                    )}
+
+                    {error && (
+                      <div className={styles.inlineAlert}>
+                        <span>{error}</span>
+                      </div>
+                    )}
+
+                    {/* Fix 3: Cancel button alongside generate */}
+                    <div className={styles.generateRow}>
+                      <button
+                        type="button"
+                        className={styles.generateButton}
+                        onClick={() => void runPipeline()}
+                        disabled={loading}
+                      >
+                        {loading ? (
+                          <>
+                            <Loader2 size={16} className={styles.spinIcon} />
+                            Generating campaign...
+                          </>
+                        ) : (
+                          <>
+                            <Sparkles size={16} />
+                            Generate campaign draft
+                          </>
+                        )}
+                      </button>
+                      {loading && (
+                        <button
+                          type="button"
+                          className={styles.cancelButton}
+                          onClick={cancelPipeline}
+                        >
+                          <X size={14} />
+                          Cancel
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                  <div className={styles.assistantContent}>
+                    {loading && (
+                      <PipelineStepper
+                        steps={pipelineSteps}
+                        generationStartTime={generationStartTime}
+                      />
+                    )}
+
+                    {result && !loading && (
+                      <div className={styles.assistantResult}>
+                        <div className={styles.assistantSectionHeader}>Campaign draft</div>
+                        <div className={styles.platformPreviewCard}>
+                          <div className={styles.platformPreviewHeader}>
+                            <span
+                              className={`${styles.platformPreviewBadge} ${
+                                result.platform === "reddit"
+                                  ? styles.platformPreviewBadgeReddit
+                                  : result.platform === "x"
+                                    ? styles.platformPreviewBadgeX
+                                    : result.platform === "linkedin"
+                                      ? styles.platformPreviewBadgeLinkedin
+                                      : styles.platformPreviewBadgeBluesky
+                              }`}
+                            >
+                              {result.platform === "reddit" ? (
+                                <Image
+                                  src={REDDIT_SNOO_URL}
+                                  alt=""
+                                  width={18}
+                                  height={18}
+                                  className={styles.platformPreviewBadgeImg}
+                                />
+                              ) : result.platform === "x" ? (
+                                "𝕏"
+                              ) : result.platform === "linkedin" ? (
+                                "in"
+                              ) : (
+                                "🦋"
+                              )}
+                            </span>
+                            <span className={styles.platformPreviewLabel}>
+                              {PLATFORM_OPTIONS.find((p) => p.id === result.platform)?.label ??
+                                result.platform}{" "}
+                              preview
+                            </span>
+                            <button
+                              type="button"
+                              className={styles.viewModeToggle}
+                              onClick={() => setViewMode((m) => (m === "preview" ? "edit" : "preview"))}
+                              title={viewMode === "preview" ? "Edit" : "Preview"}
+                            >
+                              <Pencil size={14} />
+                            </button>
+                          </div>
+                          <div className={styles.platformPreviewBody}>
+                            {viewMode === "preview" ? (
+                              <ReactMarkdown remarkPlugins={[remarkGfm]}>{editableMessage}</ReactMarkdown>
+                            ) : (
+                              <textarea
+                                className={styles.editableMessageTextarea}
+                                value={editableMessage}
+                                onChange={(e) => setEditableMessage(e.target.value)}
+                                placeholder="Your campaign message..."
+                              />
+                            )}
+                          </div>
+                        </div>
+
+                        {/* Fix 4: Button hierarchy -- tertiary / secondary / primary */}
+                        <div className={styles.draftActions}>
+                          <button
+                            type="button"
+                            className={styles.actionTertiary}
+                            onClick={handlePushToRewriteDocument}
+                            disabled={!editableMessage.trim()}
+                            title="Save this draft to your documents workspace for further editing"
+                          >
+                            <FileText size={14} />
+                            Save as document
+                          </button>
+                          <button
+                            type="button"
+                            className={styles.actionSecondary}
+                            onClick={() => setShowRewriteSheet((open) => !open)}
+                            disabled={!editableMessage.trim()}
+                          >
+                            <Sparkles size={14} />
+                            {showRewriteSheet ? "Hide Rewrite" : "Refine with AI"}
+                          </button>
+                          <button
+                            type="button"
+                            className={styles.actionPrimary}
+                            onClick={handleCopy}
+                            disabled={!editableMessage.trim()}
+                          >
+                            <Copy size={14} />
+                            {copySuccess
+                              ? "Copied!"
+                              : `Copy to ${PLATFORM_OPTIONS.find((p) => p.id === result.platform)?.label ?? "platform"}`}
+                          </button>
+                        </div>
+
+                        <Sheet open={showRewriteSheet} onOpenChange={setShowRewriteSheet}>
+                          <SheetContent
+                            forceMount
+                            side="right"
+                            className="w-full sm:max-w-2xl overflow-y-auto p-0 flex flex-col"
+                          >
+                            <SheetHeader className="px-6 pt-6 pb-4 border-b shrink-0">
+                              <SheetTitle className="text-lg font-semibold">Refine your campaign</SheetTitle>
+                              <p className="text-sm text-muted-foreground">
+                                Use tone, length, and audience options to refine the message. Preview and accept
+                                when you&apos;re happy.
+                              </p>
+                            </SheetHeader>
+                            <div className="flex-1 overflow-y-auto px-6 py-4">
+                              <RewriteWorkflow
+                                initialText={editableMessage}
+                                persistedState={activeSession?.rewriteWorkflowState}
+                                onStateChange={handleRewriteWorkflowStateChange}
+                                onComplete={handleRewriteComplete}
+                                onCancel={() => setShowRewriteSheet(false)}
+                              />
+                            </div>
+                          </SheetContent>
+                        </Sheet>
+
+                        <VariantStack
+                          variants={messageVariants}
+                          activeVariantId={activeVariantId}
+                          onSelect={selectVariant}
+                        />
+
+                        <StrategyInsights
+                          strategyUsed={result.strategyUsed}
+                          competitiveAngle={result.competitiveAngle}
+                        />
+
+                        {showDnaDebugSection && result.dnaDebug && (
+                          <div
+                            style={{
+                              marginTop: "1rem",
+                              borderTop: "1px solid var(--border-color, #e5e7eb)",
+                              paddingTop: "0.75rem",
+                            }}
+                          >
+                            <button
+                              type="button"
+                              onClick={() => setDebugOpen((prev) => !prev)}
+                              style={{
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "0.375rem",
+                                background: "none",
+                                border: "none",
+                                cursor: "pointer",
+                                padding: 0,
+                                fontSize: "0.75rem",
+                                fontWeight: 600,
+                                color: "var(--text-muted, #6b7280)",
+                              }}
+                            >
+                              {debugOpen ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+                              Debug: DNA Source
+                              <span
+                                style={{
+                                  marginLeft: "0.5rem",
+                                  padding: "0.125rem 0.5rem",
+                                  borderRadius: "9999px",
+                                  fontSize: "0.625rem",
+                                  fontWeight: 700,
+                                  textTransform: "uppercase",
+                                  letterSpacing: "0.05em",
+                                  background:
+                                    result.dnaDebug.source === "metadata" ? "#dcfce7" : "#fef3c7",
+                                  color: result.dnaDebug.source === "metadata" ? "#166534" : "#92400e",
+                                }}
+                              >
+                                {result.dnaDebug.source}
+                              </span>
+                            </button>
+
+                            {debugOpen && (
+                              <div style={{ marginTop: "0.5rem", fontSize: "0.75rem" }}>
+                                <div
+                                  style={{
+                                    fontWeight: 600,
+                                    marginBottom: "0.25rem",
+                                    color: "var(--text-muted, #6b7280)",
+                                  }}
+                                >
+                                  CompanyDNA
+                                </div>
+                                <pre
+                                  style={{
+                                    background: "var(--bg-secondary, #f9fafb)",
+                                    padding: "0.5rem",
+                                    borderRadius: "0.375rem",
+                                    overflow: "auto",
+                                    maxHeight: "12rem",
+                                    fontSize: "0.6875rem",
+                                    lineHeight: 1.5,
+                                  }}
+                                >
+                                  {JSON.stringify(result.dnaDebug.dna, null, 2)}
+                                </pre>
+
+                                <div
+                                  style={{
+                                    fontWeight: 600,
+                                    marginTop: "0.5rem",
+                                    marginBottom: "0.25rem",
+                                    color: "var(--text-muted, #6b7280)",
+                                  }}
+                                >
+                                  Raw context sent to LLM
+                                </div>
+                                <pre
+                                  style={{
+                                    background: "var(--bg-secondary, #f9fafb)",
+                                    padding: "0.5rem",
+                                    borderRadius: "0.375rem",
+                                    overflow: "auto",
+                                    maxHeight: "16rem",
+                                    fontSize: "0.6875rem",
+                                    lineHeight: 1.5,
+                                    whiteSpace: "pre-wrap",
+                                    wordBreak: "break-word",
+                                  }}
+                                >
+                                  {result.dnaDebug.contextUsed}
+                                </pre>
+                              </div>
+                            )}
+                          </div>
+                        )}
+
+                        <div className={styles.assistantSectionHeader}>Trend references</div>
+                        <div className={styles.researchList}>
+                          {(result.research ?? []).length > 0 ? (
+                            (result.research ?? []).map((item, index) => (
+                              <article
+                                key={`${item.url}-${item.source}-${index}`}
+                                className={styles.researchItem}
+                              >
+                                <div className={styles.researchTitle}>{item.title}</div>
+                                <a
+                                  className={styles.researchLink}
+                                  href={item.url}
+                                  target="_blank"
+                                  rel="noreferrer"
+                                >
+                                  {item.url}
+                                </a>
+                                <p className={styles.researchSnippet}>{item.snippet}</p>
+                              </article>
+                            ))
+                          ) : (
+                            <p className={styles.sessionEmpty}>
+                              No trend references available for this campaign.
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </section>
+          </div>
+        </section>
+      )}
+    </>
+  );
+}
diff --git a/src/app/employer/documents/components/marketing-pipeline/shared.ts b/src/app/employer/documents/components/marketing-pipeline/shared.ts
new file mode 100644
index 00000000..41e02d76
--- /dev/null
+++ b/src/app/employer/documents/components/marketing-pipeline/shared.ts
@@ -0,0 +1,273 @@
+import type { RewriteWorkflowStateSnapshot } from "~/app/employer/documents/components/generator/RewriteWorkflow";
+
+export type MarketingPlatform = "x" | "linkedin" | "reddit" | "bluesky";
+
+/* ──────────────────────────────────────────────────────────────
+ * Pipeline progress types (mirrors backend PipelineStepId)
+ * ────────────────────────────────────────────────────────────── */
+
+export type PipelineStepId =
+  | "loading-context"
+  | "extracting-dna"
+  | "analyzing-competitors"
+  | "researching-trends"
+  | "building-strategy"
+  | "generating-content";
+
+export interface PipelineStepInfo {
+  id: PipelineStepId;
+  label: string;
+}
+
+export const PIPELINE_STEP_ORDER: PipelineStepInfo[] = [
+  { id: "loading-context", label: "Loading company knowledge" },
+  { id: "extracting-dna", label: "Extracting company DNA" },
+  { id: "analyzing-competitors", label: "Analyzing competitors" },
+  { id: "researching-trends", label: "Researching platform trends" },
+  { id: "building-strategy", label: "Building messaging strategy" },
+  { id: "generating-content", label: "Generating campaign draft" },
+];
+
+export type StepStatus = "pending" | "active" | "completed";
+
+export interface PipelineStepState {
+  id: PipelineStepId;
+  label: string;
+  status: StepStatus;
+  durationMs?: number;
+  detail?: string;
+}
+
+export type PipelineSSEEvent =
+  | { type: "step_start"; step: PipelineStepId; label: string }
+  | { type: "step_complete"; step: PipelineStepId; durationMs: number; detail?: string }
+  | { type: "result"; success: true; data: PipelineData }
+  | { type: "error"; success: false; message: string; error?: string };
+
+export interface DNADebugInfo {
+  source: "metadata" | "rag";
+  contextUsed: string;
+  dna: {
+    coreMission: string;
+    keyDifferentiators: string[];
+    provenResults: string[];
+    humanStory: string;
+    technicalEdge: string;
+  };
+}
+
+/** Mirrors API success payload fields used by the marketing UI. */
+export interface PipelineData {
+  platform: MarketingPlatform;
+  message: string;
+  "image/video": "image" | "video";
+  research: Array<{
+    title: string;
+    url: string;
+    snippet: string;
+    source: MarketingPlatform;
+  }>;
+  dnaDebug?: DNADebugInfo;
+  competitiveAngle?: string;
+  strategyUsed?: {
+    angle: string;
+    keyProof: string[];
+    humanHook: string;
+    avoidList: string[];
+  };
+}
+
+export interface PipelineResponse {
+  success: boolean;
+  message?: string;
+  error?: string;
+  data?: PipelineData;
+}
+
+export interface MarketingSession {
+  id: string;
+  createdAt: number;
+  updatedAt: number;
+  platform: MarketingPlatform | null;
+  prompt: string;
+  result: PipelineData | null;
+  editableMessage: string;
+  viewMode: "preview" | "edit";
+  rewriteWorkflowState?: Partial<RewriteWorkflowStateSnapshot>;
+  platformMeta?: PlatformMeta;
+  messageVariants?: MessageVariant[];
+  activeVariantId?: string;
+}
+
+export const REDDIT_SNOO_URL = "/images/reddit-snoo.png";
+export const PENDING_REWRITE_STORAGE_KEY = "pdr.pendingRewriteDraft";
+export const MARKETING_SESSIONS_STORAGE_KEY = "pdr.marketingPipeline.sessions";
+export const MARKETING_ACTIVE_SESSION_KEY = "pdr.marketingPipeline.activeSessionId";
+export const MAX_MARKETING_SESSIONS = 25;
+
+export interface PlatformFieldConfig {
+  type: "subreddit" | "hashtags";
+  label: string;
+  maxItems: number;
+  suggestions: string[];
+}
+
+export interface PlatformMeta {
+  subreddit?: string;
+  hashtags?: string[];
+}
+
+export interface MessageVariant {
+  id: string;
+  label: string;
+  text: string;
+  createdAt: number;
+}
+
+export interface PlatformOption {
+  id: MarketingPlatform;
+  label: string;
+  subtitle: string;
+  bestFor: string;
+  charLimit: string;
+  logoText: string;
+  logoImg?: string;
+  placeholder: string;
+  promptTemplates: string[];
+  platformFields?: PlatformFieldConfig[];
+}
+
+export const PLATFORM_OPTIONS: PlatformOption[] = [
+  {
+    id: "reddit",
+    label: "Reddit",
+    subtitle: "Community-first threads",
+    bestFor: "Developer communities, authentic discussion",
+    charLimit: "~10,000 chars",
+    logoText: "reddit",
+    logoImg: REDDIT_SNOO_URL,
+    placeholder: "What do you want to share or discuss with the Reddit community?",
+    promptTemplates: [
+      "Share how we solved a common pain point in our industry",
+      "Ask for feedback on our new open-source tool",
+      "Tell the story behind why we built this product",
+    ],
+    platformFields: [
+      {
+        type: "subreddit",
+        label: "Target subreddit",
+        maxItems: 1,
+        suggestions: [
+          "r/startups",
+          "r/SaaS",
+          "r/programming",
+          "r/webdev",
+          "r/Entrepreneur",
+          "r/smallbusiness",
+          "r/artificial",
+        ],
+      },
+    ],
+  },
+  {
+    id: "x",
+    label: "Twitter / X",
+    subtitle: "Fast-moving trends",
+    bestFor: "Viral reach, real-time engagement",
+    charLimit: "~280 chars",
+    logoText: "𝕏",
+    placeholder: "What quick insight or announcement do you want to share?",
+    promptTemplates: [
+      "Announce a new feature launch with a bold hook",
+      "Share a surprising metric or result from our product",
+      "React to a trending topic in our industry",
+    ],
+    platformFields: [
+      {
+        type: "hashtags",
+        label: "Hashtags",
+        maxItems: 2,
+        suggestions: ["#AI", "#Tech", "#SaaS", "#Startup", "#DevTools", "#OpenSource"],
+      },
+    ],
+  },
+  {
+    id: "linkedin",
+    label: "LinkedIn",
+    subtitle: "B2B + thought leadership",
+    bestFor: "Professional audience, long-form storytelling",
+    charLimit: "~1,300 chars",
+    logoText: "in",
+    placeholder: "What insight or story do you want to share with your professional network?",
+    promptTemplates: [
+      "Promote our new feature to CTOs and engineering leaders",
+      "Share a customer success story about improving workflows",
+      "Thought leadership post about AI in our industry",
+    ],
+    platformFields: [
+      {
+        type: "hashtags",
+        label: "Hashtags",
+        maxItems: 5,
+        suggestions: [
+          "#AI",
+          "#SaaS",
+          "#Leadership",
+          "#StartupLife",
+          "#TechFounders",
+          "#Innovation",
+          "#Marketing",
+          "#B2B",
+        ],
+      },
+    ],
+  },
+  {
+    id: "bluesky",
+    label: "Bluesky",
+    subtitle: "Decentralized trends",
+    bestFor: "Early adopters, open-web advocates",
+    charLimit: "~300 chars",
+    logoText: "🦋",
+    placeholder: "What do you want to share with the Bluesky community?",
+    promptTemplates: [
+      "Introduce our product to the open-source community",
+      "Share a behind-the-scenes look at what we're building",
+      "Start a conversation about a trend in our space",
+    ],
+    platformFields: [
+      {
+        type: "hashtags",
+        label: "Hashtags",
+        maxItems: 3,
+        suggestions: ["#OpenWeb", "#Tech", "#AI", "#IndieWeb", "#OpenSource", "#Fediverse"],
+      },
+    ],
+  },
+];
+
+/** Strip Markdown to plain text for platforms that don't render it (LinkedIn, X, Bluesky). */
+export function markdownToPlainText(text: string): string {
+  return text
+    .replace(/\*\*(.+?)\*\*/g, "$1")
+    .replace(/\*(.+?)\*/g, "$1")
+    .replace(/__(.+?)__/g, "$1")
+    .replace(/_(.+?)_/g, "$1")
+    .replace(/`(.+?)`/g, "$1")
+    .trim();
+}
+
+/** Convert Markdown to HTML for rich-text paste (LinkedIn composer, etc.). */
+export function markdownToHtml(text: string): string {
+  const escaped = text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+  return escaped
+    .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
+    .replace(/\*(.+?)\*/g, "<em>$1</em>")
+    .replace(/__(.+?)__/g, "<strong>$1</strong>")
+    .replace(/_(.+?)_/g, "<em>$1</em>")
+    .replace(/`(.+?)`/g, "<code>$1</code>")
+    .replace(/\n/g, "<br/>");
+}
diff --git a/src/app/employer/documents/components/marketing-pipeline/useMarketingPipelineController.ts b/src/app/employer/documents/components/marketing-pipeline/useMarketingPipelineController.ts
new file mode 100644
index 00000000..7bf487e8
--- /dev/null
+++ b/src/app/employer/documents/components/marketing-pipeline/useMarketingPipelineController.ts
@@ -0,0 +1,491 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import type { RewriteWorkflowStateSnapshot } from "~/app/employer/documents/components/generator/RewriteWorkflow";
+import {
+  MARKETING_ACTIVE_SESSION_KEY,
+  MARKETING_SESSIONS_STORAGE_KEY,
+  MAX_MARKETING_SESSIONS,
+  PENDING_REWRITE_STORAGE_KEY,
+  PIPELINE_STEP_ORDER,
+  PLATFORM_OPTIONS,
+  markdownToHtml,
+  markdownToPlainText,
+  type MarketingSession,
+  type MessageVariant,
+  type PipelineData,
+  type PipelineSSEEvent,
+  type PipelineStepState,
+  type PlatformMeta,
+} from "./shared";
+
+function buildInitialSteps(): PipelineStepState[] {
+  return PIPELINE_STEP_ORDER.map((s) => ({
+    id: s.id,
+    label: s.label,
+    status: "pending" as const,
+  }));
+}
+
+export function useMarketingPipelineController(options: { debug: boolean }) {
+  const { debug } = options;
+  const router = useRouter();
+  const [platform, setPlatform] = useState<MarketingSession["platform"]>(null);
+  const [prompt, setPrompt] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<PipelineData | null>(null);
+  const [editableMessage, setEditableMessage] = useState("");
+  const [showRewriteSheet, setShowRewriteSheet] = useState(false);
+  const [copySuccess, setCopySuccess] = useState(false);
+  const [viewMode, setViewMode] = useState<"preview" | "edit">("preview");
+  const [sessions, setSessions] = useState<MarketingSession[]>([]);
+  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
+  const [pipelineSteps, setPipelineSteps] = useState<PipelineStepState[]>([]);
+  const [generationStartTime, setGenerationStartTime] = useState<number | null>(null);
+  const [platformMeta, setPlatformMeta] = useState<PlatformMeta>({});
+  const [messageVariants, setMessageVariants] = useState<MessageVariant[]>([]);
+  const [activeVariantId, setActiveVariantId] = useState<string | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const selectedPlatform = PLATFORM_OPTIONS.find((option) => option.id === platform) ?? null;
+
+  const applySession = useCallback((session: MarketingSession) => {
+    setPlatform(session.platform);
+    setPrompt(session.prompt);
+    setResult(session.result);
+    setEditableMessage(session.editableMessage);
+    setViewMode(session.viewMode);
+    setPlatformMeta(session.platformMeta ?? {});
+    setMessageVariants(session.messageVariants ?? []);
+    setActiveVariantId(session.activeVariantId ?? null);
+    setError(null);
+    setShowRewriteSheet(false);
+  }, []);
+
+  useEffect(() => {
+    try {
+      const rawSessions = sessionStorage.getItem(MARKETING_SESSIONS_STORAGE_KEY);
+      if (!rawSessions) return;
+
+      const parsed = JSON.parse(rawSessions) as MarketingSession[];
+      if (!Array.isArray(parsed) || parsed.length === 0) return;
+
+      setSessions(parsed);
+      const storedActiveSessionId = sessionStorage.getItem(MARKETING_ACTIVE_SESSION_KEY);
+      const targetSession = storedActiveSessionId
+        ? parsed.find((session) => session.id === storedActiveSessionId)
+        : parsed[0];
+
+      if (targetSession) {
+        setActiveSessionId(targetSession.id);
+        applySession(targetSession);
+      }
+    } catch {
+      // Ignore malformed cached sessions.
+    }
+  }, [applySession]);
+
+  useEffect(() => {
+    try {
+      sessionStorage.setItem(MARKETING_SESSIONS_STORAGE_KEY, JSON.stringify(sessions));
+      if (activeSessionId) {
+        sessionStorage.setItem(MARKETING_ACTIVE_SESSION_KEY, activeSessionId);
+      } else {
+        sessionStorage.removeItem(MARKETING_ACTIVE_SESSION_KEY);
+      }
+    } catch {
+      // Ignore storage write failures.
+    }
+  }, [activeSessionId, sessions]);
+
+  useEffect(() => {
+    if (!activeSessionId || !result) return;
+
+    setSessions((prev) =>
+      prev.map((session) =>
+        session.id === activeSessionId
+          ? {
+              ...session,
+              prompt,
+              platform: result.platform,
+              result,
+              editableMessage,
+              viewMode,
+              platformMeta,
+              messageVariants,
+              activeVariantId: activeVariantId ?? undefined,
+              updatedAt: Date.now(),
+            }
+          : session,
+      ),
+    );
+  }, [activeSessionId, activeVariantId, editableMessage, messageVariants, platform, platformMeta, prompt, result, viewMode]);
+
+  const handleSelectSession = useCallback(
+    (session: MarketingSession) => {
+      setActiveSessionId(session.id);
+      applySession(session);
+    },
+    [applySession],
+  );
+
+  const handleStartNewSession = useCallback(() => {
+    const now = Date.now();
+    const newSession: MarketingSession = {
+      id:
+        typeof crypto !== "undefined" && "randomUUID" in crypto
+          ? crypto.randomUUID()
+          : `session-${now}`,
+      createdAt: now,
+      updatedAt: now,
+      platform: null,
+      prompt: "",
+      result: null,
+      editableMessage: "",
+      viewMode: "preview",
+      rewriteWorkflowState: undefined,
+      platformMeta: undefined,
+      messageVariants: undefined,
+      activeVariantId: undefined,
+    };
+    setActiveSessionId(newSession.id);
+    setSessions((prev) => [newSession, ...prev].slice(0, MAX_MARKETING_SESSIONS));
+    setPlatform(null);
+    setPrompt("");
+    setResult(null);
+    setEditableMessage("");
+    setViewMode("preview");
+    setError(null);
+    setShowRewriteSheet(false);
+    setPipelineSteps([]);
+    setPlatformMeta({});
+    setMessageVariants([]);
+    setActiveVariantId(null);
+  }, []);
+
+  const handleRewriteComplete = useCallback(
+    (rewrittenText: string) => {
+      const variantId =
+        typeof crypto !== "undefined" && "randomUUID" in crypto
+          ? crypto.randomUUID()
+          : `variant-${Date.now()}`;
+
+      setMessageVariants((prev) => {
+        const newVariant: MessageVariant = {
+          id: variantId,
+          label: `Rewrite ${prev.length}`,
+          text: rewrittenText,
+          createdAt: Date.now(),
+        };
+        return [...prev, newVariant];
+      });
+      setActiveVariantId(variantId);
+      setEditableMessage(rewrittenText);
+      setShowRewriteSheet(false);
+
+      if (activeSessionId) {
+        setSessions((prev) =>
+          prev.map((session) =>
+            session.id === activeSessionId
+              ? { ...session, editableMessage: rewrittenText, updatedAt: Date.now() }
+              : session,
+          ),
+        );
+      }
+    },
+    [activeSessionId],
+  );
+
+  const selectVariant = useCallback(
+    (variantId: string) => {
+      setActiveVariantId(variantId);
+      setMessageVariants((prev) => {
+        const variant = prev.find((v) => v.id === variantId);
+        if (variant) setEditableMessage(variant.text);
+        return prev;
+      });
+    },
+    [],
+  );
+
+  const handleRewriteWorkflowStateChange = useCallback(
+    (state: RewriteWorkflowStateSnapshot) => {
+      if (!activeSessionId) return;
+      setSessions((prev) =>
+        prev.map((session) =>
+          session.id === activeSessionId
+            ? { ...session, rewriteWorkflowState: state, updatedAt: Date.now() }
+            : session,
+        ),
+      );
+    },
+    [activeSessionId],
+  );
+
+  const handlePushToRewriteDocument = useCallback(() => {
+    if (!editableMessage.trim()) return;
+    try {
+      sessionStorage.setItem(
+        PENDING_REWRITE_STORAGE_KEY,
+        JSON.stringify({
+          title: `Campaign Draft (${selectedPlatform?.label ?? "Marketing"})`,
+          content: editableMessage,
+          createdAt: Date.now(),
+          source: "marketing-pipeline",
+        }),
+      );
+    } catch {
+      // Ignore storage errors and still navigate.
+    }
+    router.push("/employer/documents?view=rewrite");
+  }, [editableMessage, router, selectedPlatform?.label]);
+
+  const handleCopy = useCallback(async () => {
+    if (!editableMessage.trim()) return;
+    try {
+      const targetPlatform = result?.platform;
+      const plainText =
+        targetPlatform === "reddit" ? editableMessage : markdownToPlainText(editableMessage);
+      const html = markdownToHtml(editableMessage);
+
+      if (typeof navigator.clipboard.write === "function") {
+        await navigator.clipboard.write([
+          new ClipboardItem({
+            "text/plain": new Blob([plainText], { type: "text/plain" }),
+            "text/html": new Blob([html], { type: "text/html" }),
+          }),
+        ]);
+      } else {
+        await navigator.clipboard.writeText(plainText);
+      }
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    } catch {
+      setCopySuccess(false);
+    }
+  }, [editableMessage, result?.platform]);
+
+  const handleSSEEvent = useCallback((event: PipelineSSEEvent) => {
+    switch (event.type) {
+      case "step_start":
+        setPipelineSteps((prev) =>
+          prev.map((s) =>
+            s.id === event.step ? { ...s, status: "active" as const, label: event.label } : s,
+          ),
+        );
+        break;
+      case "step_complete":
+        setPipelineSteps((prev) =>
+          prev.map((s) =>
+            s.id === event.step
+              ? { ...s, status: "completed" as const, durationMs: event.durationMs, detail: event.detail }
+              : s,
+          ),
+        );
+        break;
+    }
+  }, []);
+
+  const runPipeline = useCallback(async () => {
+    setError(null);
+    setResult(null);
+
+    if (!platform) {
+      setError("Choose a platform to continue.");
+      return;
+    }
+
+    const normalizedPrompt = prompt.trim();
+    if (!normalizedPrompt) {
+      setError("Add a short description of what you want to promote.");
+      return;
+    }
+
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    setLoading(true);
+    setPipelineSteps(buildInitialSteps());
+    setGenerationStartTime(Date.now());
+
+    try {
+      const apiUrl = debug ? "/api/marketing-pipeline?debug=true" : "/api/marketing-pipeline";
+      const response = await fetch(apiUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          platform,
+          prompt: normalizedPrompt,
+          platformMeta: Object.keys(platformMeta).length > 0 ? platformMeta : undefined,
+        }),
+        signal: controller.signal,
+      });
+
+      if (!response.ok || !response.body) {
+        const text = await response.text();
+        let message = "We couldn't generate a campaign right now. Please try again.";
+        try {
+          const payload = JSON.parse(text) as { message?: string; error?: string };
+          message = payload.message ?? message;
+          if (payload.error) message += ` ${payload.error}`;
+        } catch {
+          if (text) message = text.slice(0, 200);
+        }
+        setError(message);
+        return;
+      }
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let pipelineResult: PipelineData | null = null;
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const parts = buffer.split("\n\n");
+        buffer = parts.pop() ?? "";
+
+        for (const part of parts) {
+          const trimmed = part.trim();
+          if (!trimmed.startsWith("data: ")) continue;
+          const json = trimmed.slice(6);
+          try {
+            const event = JSON.parse(json) as PipelineSSEEvent;
+
+            if (event.type === "step_start" || event.type === "step_complete") {
+              handleSSEEvent(event);
+            } else if (event.type === "result" && event.success) {
+              pipelineResult = event.data;
+            } else if (event.type === "error") {
+              const detail = event.error ? ` ${event.error}` : "";
+              setError((event.message ?? "Pipeline failed") + detail);
+              return;
+            }
+          } catch {
+            // skip malformed SSE lines
+          }
+        }
+      }
+
+      if (!pipelineResult) {
+        setError("Server returned an incomplete response. Please try again.");
+        return;
+      }
+
+      const now = Date.now();
+      const sessionId =
+        activeSessionId ??
+        (typeof crypto !== "undefined" && "randomUUID" in crypto
+          ? crypto.randomUUID()
+          : `session-${now}`);
+
+      const originalVariantId =
+        typeof crypto !== "undefined" && "randomUUID" in crypto
+          ? crypto.randomUUID()
+          : `variant-${now}`;
+      const originalVariant: MessageVariant = {
+        id: originalVariantId,
+        label: "Original",
+        text: pipelineResult.message,
+        createdAt: now,
+      };
+
+      const nextSession: MarketingSession = {
+        id: sessionId,
+        createdAt: now,
+        updatedAt: now,
+        platform,
+        prompt: normalizedPrompt,
+        result: pipelineResult,
+        editableMessage: pipelineResult.message,
+        viewMode: "preview",
+        rewriteWorkflowState: undefined,
+        platformMeta: Object.keys(platformMeta).length > 0 ? platformMeta : undefined,
+        messageVariants: [originalVariant],
+        activeVariantId: originalVariantId,
+      };
+
+      setResult(pipelineResult);
+      setEditableMessage(pipelineResult.message);
+      setViewMode("preview");
+      setMessageVariants([originalVariant]);
+      setActiveVariantId(originalVariantId);
+      setActiveSessionId(nextSession.id);
+      setSessions((prev) => {
+        const existingIndex = prev.findIndex((session) => session.id === nextSession.id);
+        if (existingIndex === -1) {
+          return [nextSession, ...prev].slice(0, MAX_MARKETING_SESSIONS);
+        }
+
+        const updated = [...prev];
+        const existing = updated[existingIndex];
+        updated[existingIndex] = {
+          ...nextSession,
+          createdAt: existing?.createdAt ?? nextSession.createdAt,
+        };
+        return updated;
+      });
+    } catch (requestError) {
+      if (requestError instanceof DOMException && requestError.name === "AbortError") return;
+      console.error("[marketing-pipeline] request error:", requestError);
+      setError("Something went wrong talking to the marketing engine. Try again.");
+    } finally {
+      setLoading(false);
+      setGenerationStartTime(null);
+    }
+  }, [activeSessionId, debug, handleSSEEvent, platform, platformMeta, prompt]);
+
+  const cancelPipeline = useCallback(() => {
+    abortRef.current?.abort();
+    setLoading(false);
+    setPipelineSteps([]);
+    setGenerationStartTime(null);
+  }, []);
+
+  const activeSession = sessions.find((session) => session.id === activeSessionId) ?? null;
+
+  return {
+    platform,
+    setPlatform,
+    prompt,
+    setPrompt,
+    loading,
+    error,
+    setError,
+    result,
+    setResult,
+    editableMessage,
+    setEditableMessage,
+    showRewriteSheet,
+    setShowRewriteSheet,
+    copySuccess,
+    viewMode,
+    setViewMode,
+    sessions,
+    activeSessionId,
+    setActiveSessionId,
+    selectedPlatform,
+    activeSession,
+    pipelineSteps,
+    generationStartTime,
+    platformMeta,
+    setPlatformMeta,
+    messageVariants,
+    activeVariantId,
+    selectVariant,
+    handleSelectSession,
+    handleStartNewSession,
+    handleRewriteComplete,
+    handleRewriteWorkflowStateChange,
+    handlePushToRewriteDocument,
+    handleCopy,
+    runPipeline,
+    cancelPipeline,
+  };
+}
diff --git a/src/app/employer/tools/marketing-pipeline/page.tsx b/src/app/employer/tools/marketing-pipeline/page.tsx
index 2478edba..d9530f9d 100644
--- a/src/app/employer/tools/marketing-pipeline/page.tsx
+++ b/src/app/employer/tools/marketing-pipeline/page.tsx
@@ -1,412 +1,59 @@
 "use client";
 
-import { Suspense, useMemo, useState } from "react";
-import Image from "next/image";
+import { Suspense } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
-import { ArrowLeft, Brain, ChevronDown, ChevronRight, Loader2, MessageSquareText, Megaphone, Sparkles } from "lucide-react";
+import { ArrowLeft, Brain } from "lucide-react";
 import ProfileDropdown from "~/app/employer/_components/ProfileDropdown";
 import { ThemeToggle } from "~/app/_components/ThemeToggle";
+import { MarketingPipelineWorkspace } from "~/app/employer/documents/components/marketing-pipeline/MarketingPipelineWorkspace";
 import homeStyles from "~/styles/Employer/Home.module.css";
 import styles from "~/styles/Employer/MarketingPipeline.module.css";
 
-type Platform = "x" | "linkedin" | "reddit" | "bluesky";
-
-interface DNADebugInfo {
-    source: "metadata" | "rag";
-    contextUsed: string;
-    dna: {
-        coreMission: string;
-        keyDifferentiators: string[];
-        provenResults: string[];
-        humanStory: string;
-        technicalEdge: string;
-    };
-}
-
-interface PipelineResponse {
-    success: boolean;
-    message?: string;
-    data?: {
-        platform: Platform;
-        message: string;
-        "image/video": "image" | "video";
-        research: Array<{
-            title: string;
-            url: string;
-            snippet: string;
-            source: Platform;
-        }>;
-        dnaDebug?: DNADebugInfo;
-    };
-}
-
-const REDDIT_SNOO_URL = "/images/reddit-snoo.png";
-
-const PLATFORM_OPTIONS: Array<{ id: Platform; label: string; subtitle: string; logoText: string; logoImg?: string }> = [
-    { id: "reddit", label: "Reddit", subtitle: "Community-first threads", logoText: "reddit", logoImg: REDDIT_SNOO_URL },
-    { id: "x", label: "Twitter / X", subtitle: "Fast-moving trends", logoText: "𝕏" },
-    { id: "linkedin", label: "LinkedIn", subtitle: "B2B + thought leadership", logoText: "in" },
-    { id: "bluesky", label: "Bluesky", subtitle: "Decentralized trends", logoText: "🦋" },
-];
-
-function usePlatformLogoClassNames() {
-    return useMemo(
-        () => ({
-            reddit: styles.platformLogoReddit,
-            x: styles.platformLogoX,
-            linkedin: styles.platformLogoLinkedin,
-            bluesky: styles.platformLogoBluesky,
-        }),
-        [],
-    );
-}
-
 export default function MarketingPipelinePage() {
-    return (
-        <Suspense>
-            <MarketingPipelineContent />
-        </Suspense>
-    );
+  return (
+    <Suspense>
+      <MarketingPipelineContent />
+    </Suspense>
+  );
 }
 
 function MarketingPipelineContent() {
-    const router = useRouter();
-    const searchParams = useSearchParams();
-    const isDebug = searchParams.get("debug") === "true";
-    const [platform, setPlatform] = useState<Platform | null>(null);
-    const [prompt, setPrompt] = useState("");
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [result, setResult] = useState<PipelineResponse["data"] | null>(null);
-    const [debugOpen, setDebugOpen] = useState(false);
-
-    const logoClassNames = usePlatformLogoClassNames();
-    const selectedPlatform = PLATFORM_OPTIONS.find((option) => option.id === platform) ?? null;
-
-    const runPipeline = async () => {
-        setError(null);
-        setResult(null);
-
-        if (!platform) {
-            setError("Choose a platform to continue.");
-            return;
-        }
-
-        const normalizedPrompt = prompt.trim();
-        if (!normalizedPrompt) {
-            setError("Add a short description of what you want to promote.");
-            return;
-        }
-
-        setLoading(true);
-        try {
-            const apiUrl = isDebug ? "/api/marketing-pipeline?debug=true" : "/api/marketing-pipeline";
-            const response = await fetch(apiUrl, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify({
-                    platform,
-                    prompt: normalizedPrompt,
-                }),
-            });
-
-            const payload = (await response.json()) as PipelineResponse;
-            if (!response.ok || !payload.success || !payload.data) {
-                setError(payload.message ?? "We couldn't generate a campaign right now. Please try again.");
-                return;
-            }
-
-            setResult(payload.data);
-        } catch (requestError) {
-            console.error("[marketing-pipeline] request error:", requestError);
-            setError("Something went wrong talking to the marketing engine. Try again.");
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    return (
-        <div className={homeStyles.container}>
-            <nav className={homeStyles.navbar}>
-                <div className={homeStyles.navContent}>
-                    <div
-                        className={homeStyles.logoContainer}
-                        onClick={() => router.push("/employer/home")}
-                        onKeyDown={(e) => e.key === "Enter" && router.push("/employer/home")}
-                        role="button"
-                        tabIndex={0}
-                    >
-                        <Brain className={homeStyles.logoIcon} />
-                        <span className={homeStyles.logoText}>Launchstack</span>
-                    </div>
-                    <div className={homeStyles.navActions}>
-                        <button
-                            type="button"
-                            className={styles.backNavButton}
-                            onClick={() => router.push("/employer/home")}
-                        >
-                            <ArrowLeft className="w-4 h-4" />
-                            Home
-                        </button>
-                        <ThemeToggle />
-                        <ProfileDropdown />
-                    </div>
-                </div>
-            </nav>
-
-            <main className={styles.main}>
-                <div className={styles.pageHeaderRow}>
-                    <div className={styles.pageTitleIcon}>
-                        <Megaphone className={styles.pageTitleIconInner} />
-                    </div>
-                    <div>
-                        <h1 className={styles.pageTitle}>Marketing Pipeline</h1>
-                        <p className={styles.pageSubtitle}>Create campaign-ready posts for Reddit, X, LinkedIn & Bluesky from your company knowledge base</p>
-                    </div>
-                </div>
-
-            {!platform ? (
-                <section className={styles.mainContent}>
-                    <section className={styles.platformShell}>
-                        <h2 className={styles.platformShellTitle}>Choose platform</h2>
-                        <div className={styles.platformGrid}>
-                            {PLATFORM_OPTIONS.map((option) => (
-                                <button
-                                    key={option.id}
-                                    type="button"
-                                    className={styles.platformCard}
-                                    onClick={() => {
-                                        setPlatform(option.id);
-                                        setError(null);
-                                        setResult(null);
-                                    }}
-                                >
-                                    <span
-                                        className={`${styles.platformLogo} ${
-                                            logoClassNames[option.id]
-                                        } ${option.logoImg ? styles.platformLogoImgContainer : ""}`}
-                                    >
-                                        {option.logoImg ? (
-                                            <Image src={option.logoImg} alt="" width={64} height={64} className={styles.platformLogoImg} />
-                                        ) : (
-                                            option.logoText
-                                        )}
-                                    </span>
-                                    <span className={styles.platformName}>{option.label}</span>
-                                    <span className={styles.platformSubtitle}>{option.subtitle}</span>
-                                </button>
-                            ))}
-                        </div>
-                        {error && <p className={styles.errorInline}>{error}</p>}
-                    </section>
-                </section>
-            ) : (
-                <section className={styles.mainContent}>
-                    <section className={styles.workspaceShell}>
-                        <div className={styles.workspaceLeft}>
-                            <header className={styles.workspaceLeftHeader}>
-                                <div className={styles.selectedPlatformPill}>
-                                    <span
-                                        className={`${styles.selectedPlatformLogo} ${
-                                            selectedPlatform ? logoClassNames[selectedPlatform.id] : ""
-                                        } ${selectedPlatform?.logoImg ? styles.platformLogoImgContainer : ""}`}
-                                    >
-                                        {selectedPlatform?.logoImg ? (
-                                            <Image src={selectedPlatform.logoImg} alt="" width={64} height={64} className={styles.platformLogoImg} />
-                                        ) : (
-                                            selectedPlatform?.logoText
-                                        )}
-                                    </span>
-                                    <span className={styles.selectedPlatformLabel}>{selectedPlatform?.label}</span>
-                                </div>
-                                <button
-                                    type="button"
-                                    className={styles.changePlatformButton}
-                                    onClick={() => {
-                                        setPlatform(null);
-                                        setPrompt("");
-                                        setResult(null);
-                                        setError(null);
-                                    }}
-                                >
-                                    Change platform
-                                </button>
-                            </header>
-
-                            <div className={styles.promptCard}>
-                                <div className={styles.promptHeaderRow}>
-                                    <h2 className={styles.promptTitle}>Describe what you want to promote</h2>
-                                    <span className={styles.promptHint}>1–3 sentences is perfect.</span>
-                                </div>
-                                <textarea
-                                    className={styles.textarea}
-                                    value={prompt}
-                                    onChange={(event) => setPrompt(event.target.value)}
-                                    placeholder="Example: Promote our AI-powered document workflow for startup operations teams this month."
-                                />
-                                {error && (
-                                    <div className={styles.inlineAlert}>
-                                        <span>{error}</span>
-                                    </div>
-                                )}
-                                <button
-                                    type="button"
-                                    className={styles.generateButton}
-                                    onClick={runPipeline}
-                                    disabled={loading}
-                                >
-                                    {loading ? (
-                                        <>
-                                            <Loader2 size={16} className={styles.spinIcon} />
-                                            Generating campaign...
-                                        </>
-                                    ) : (
-                                        <>
-                                            <Sparkles size={16} />
-                                            Generate campaign draft
-                                        </>
-                                    )}
-                                </button>
-                            </div>
-                        </div>
-
-                        <aside className={styles.workspaceRight}>
-                            <div className={styles.assistantCard}>
-                                <header className={styles.assistantHeader}>
-                                    <MessageSquareText size={18} className={styles.assistantIcon} />
-                                    <h2 className={styles.assistantTitle}>AI Assistant</h2>
-                                </header>
-
-                                {!result && !loading && (
-                                    <p className={styles.assistantEmptyState}>
-                                        Enter a prompt and click Generate.
-                                    </p>
-                                )}
-
-                                {loading && (
-                                    <div className={styles.assistantLoading}>
-                                        <Loader2 size={18} className={styles.spinIcon} />
-                                        <span>Researching trends and drafting your message...</span>
-                                    </div>
-                                )}
-
-                                {result && !loading && (
-                                    <div className={styles.assistantResult}>
-                                        <div className={styles.assistantSectionHeader}>Campaign draft</div>
-                                        <div className={styles.outputBlock}>
-                                            {`platform: ${result.platform}
-message: ${result.message}
-image/video: ${result["image/video"]}`}
-                                        </div>
-
-                                        {result.research.length > 0 && (
-                                            <>
-                                                <div className={styles.assistantSectionHeader}>Trend references</div>
-                                                <div className={styles.researchList}>
-                                                    {result.research.map((item) => (
-                                                        <article
-                                                            key={`${item.url}-${item.source}`}
-                                                            className={styles.researchItem}
-                                                        >
-                                                            <div className={styles.researchTitle}>{item.title}</div>
-                                                            <a
-                                                                className={styles.researchLink}
-                                                                href={item.url}
-                                                                target="_blank"
-                                                                rel="noreferrer"
-                                                            >
-                                                                {item.url}
-                                                            </a>
-                                                            <p className={styles.researchSnippet}>{item.snippet}</p>
-                                                        </article>
-                                                    ))}
-                                                </div>
-                                            </>
-                                        )}
-
-                                        {isDebug && result.dnaDebug && (
-                                            <div style={{ marginTop: "1rem", borderTop: "1px solid var(--border-color, #e5e7eb)", paddingTop: "0.75rem" }}>
-                                                <button
-                                                    type="button"
-                                                    onClick={() => setDebugOpen((prev) => !prev)}
-                                                    style={{
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        gap: "0.375rem",
-                                                        background: "none",
-                                                        border: "none",
-                                                        cursor: "pointer",
-                                                        padding: 0,
-                                                        fontSize: "0.75rem",
-                                                        fontWeight: 600,
-                                                        color: "var(--text-muted, #6b7280)",
-                                                    }}
-                                                >
-                                                    {debugOpen ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-                                                    Debug: DNA Source
-                                                    <span style={{
-                                                        marginLeft: "0.5rem",
-                                                        padding: "0.125rem 0.5rem",
-                                                        borderRadius: "9999px",
-                                                        fontSize: "0.625rem",
-                                                        fontWeight: 700,
-                                                        textTransform: "uppercase",
-                                                        letterSpacing: "0.05em",
-                                                        background: result.dnaDebug.source === "metadata" ? "#dcfce7" : "#fef3c7",
-                                                        color: result.dnaDebug.source === "metadata" ? "#166534" : "#92400e",
-                                                    }}>
-                                                        {result.dnaDebug.source}
-                                                    </span>
-                                                </button>
-
-                                                {debugOpen && (
-                                                    <div style={{ marginTop: "0.5rem", fontSize: "0.75rem" }}>
-                                                        <div style={{ fontWeight: 600, marginBottom: "0.25rem", color: "var(--text-muted, #6b7280)" }}>
-                                                            CompanyDNA
-                                                        </div>
-                                                        <pre style={{
-                                                            background: "var(--bg-secondary, #f9fafb)",
-                                                            padding: "0.5rem",
-                                                            borderRadius: "0.375rem",
-                                                            overflow: "auto",
-                                                            maxHeight: "12rem",
-                                                            fontSize: "0.6875rem",
-                                                            lineHeight: 1.5,
-                                                        }}>
-                                                            {JSON.stringify(result.dnaDebug.dna, null, 2)}
-                                                        </pre>
-
-                                                        <div style={{ fontWeight: 600, marginTop: "0.5rem", marginBottom: "0.25rem", color: "var(--text-muted, #6b7280)" }}>
-                                                            Raw context sent to LLM
-                                                        </div>
-                                                        <pre style={{
-                                                            background: "var(--bg-secondary, #f9fafb)",
-                                                            padding: "0.5rem",
-                                                            borderRadius: "0.375rem",
-                                                            overflow: "auto",
-                                                            maxHeight: "16rem",
-                                                            fontSize: "0.6875rem",
-                                                            lineHeight: 1.5,
-                                                            whiteSpace: "pre-wrap",
-                                                            wordBreak: "break-word",
-                                                        }}>
-                                                            {result.dnaDebug.contextUsed}
-                                                        </pre>
-                                                    </div>
-                                                )}
-                                            </div>
-                                        )}
-                                    </div>
-                                )}
-                            </div>
-                        </aside>
-                    </section>
-                </section>
-            )}
-            </main>
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const isDebug = searchParams.get("debug") === "true";
+
+  return (
+    <div className={homeStyles.container}>
+      <nav className={homeStyles.navbar}>
+        <div className={homeStyles.navContent}>
+          <div
+            className={homeStyles.logoContainer}
+            onClick={() => router.push("/employer/home")}
+            onKeyDown={(e) => e.key === "Enter" && router.push("/employer/home")}
+            role="button"
+            tabIndex={0}
+          >
+            <Brain className={homeStyles.logoIcon} />
+            <span className={homeStyles.logoText}>Launchstack</span>
+          </div>
+          <div className={homeStyles.navActions}>
+            <button
+              type="button"
+              className={styles.backNavButton}
+              onClick={() => router.push("/employer/home")}
+            >
+              <ArrowLeft className="w-4 h-4" />
+              Home
+            </button>
+            <ThemeToggle />
+            <ProfileDropdown />
+          </div>
         </div>
-    );
-}
+      </nav>
 
+      <main className={styles.main}>
+        <MarketingPipelineWorkspace debug={isDebug} showDnaDebugSection={isDebug} />
+      </main>
+    </div>
+  );
+}
diff --git a/src/lib/models.ts b/src/lib/models.ts
index 95e631f4..7afe32d8 100644
--- a/src/lib/models.ts
+++ b/src/lib/models.ts
@@ -118,7 +118,8 @@ export function getEmbeddings(): OpenAIEmbeddings {
 
 /** Marketing pipeline model config: one place to swap models per stage. */
 export const MARKETING_MODELS = {
-  dnaExtraction: "gpt-4o" as AIModelType,
-  competitorAnalysis: "gpt-4o" as AIModelType,
+  dnaExtraction: "gpt-5-nano" as AIModelType,
+  competitorAnalysis: "gpt-5-nano" as AIModelType,
+  strategyBuilding: "gpt-5-nano" as AIModelType,
   contentGeneration: "gpt-4o" as AIModelType,
 } as const;
diff --git a/src/lib/tools/marketing-pipeline/competitor.ts b/src/lib/tools/marketing-pipeline/competitor.ts
index 7a9d2571..6825370d 100644
--- a/src/lib/tools/marketing-pipeline/competitor.ts
+++ b/src/lib/tools/marketing-pipeline/competitor.ts
@@ -1,3 +1,4 @@
+import { createHash } from "node:crypto";
 import { HumanMessage, SystemMessage } from "@langchain/core/messages";
 import { executeSearch } from "~/lib/tools/trend-search/web-search";
 import type { PlannedQuery } from "~/lib/tools/trend-search/types";
@@ -5,33 +6,73 @@ import { getChatModel, MARKETING_MODELS } from "~/lib/models";
 import type { CompetitorAnalysis } from "~/lib/tools/marketing-pipeline/types";
 import { CompetitorAnalysisSchema } from "~/lib/tools/marketing-pipeline/types";
 
-/**
- * Build search queries to find competitor messaging and positioning.
- */
+/* ──────────────────────────────────────────────────────────────
+ * In-memory cache — competitor landscape changes slowly.
+ * ────────────────────────────────────────────────────────────── */
+
+const COMPETITOR_CACHE_TTL_MS = 24 * 60 * 60 * 1000; // 24 hours
+
+interface CompetitorCacheEntry {
+  result: CompetitorAnalysis;
+  expiresAt: number;
+}
+
+const cache = new Map<string, CompetitorCacheEntry>();
+
+function buildCacheKey(companyName: string, categories: string[]): string {
+  const normalized = `${companyName.trim().toLowerCase()}::${[...categories].sort().join(",").toLowerCase()}`;
+  return createHash("sha256").update(normalized).digest("hex");
+}
+
+function pruneCache(): void {
+  const now = Date.now();
+  for (const [key, entry] of cache.entries()) {
+    if (entry.expiresAt <= now) cache.delete(key);
+  }
+}
+
+function getCached(companyName: string, categories: string[]): CompetitorAnalysis | null {
+  const key = buildCacheKey(companyName, categories);
+  const entry = cache.get(key);
+  if (!entry) return null;
+  if (entry.expiresAt <= Date.now()) {
+    cache.delete(key);
+    return null;
+  }
+  return entry.result;
+}
+
+function setCache(companyName: string, categories: string[], result: CompetitorAnalysis): void {
+  if (cache.size > 50) pruneCache();
+  const key = buildCacheKey(companyName, categories);
+  cache.set(key, { result, expiresAt: Date.now() + COMPETITOR_CACHE_TTL_MS });
+}
+
+/* ──────────────────────────────────────────────────────────────
+ * Search query builder
+ * ────────────────────────────────────────────────────────────── */
+
 function buildCompetitorQueries(companyName: string, categories: string[]): PlannedQuery[] {
   const categoryStr = categories.length > 0 ? categories.join(" ") : "industry";
+  const currentYear = new Date().getFullYear();
   return [
     {
-      searchQuery: `${companyName} competitors ${categoryStr} positioning`,
+      searchQuery: `${companyName} competitors ${categoryStr} positioning ${currentYear}`,
       category: "business",
       rationale: "Find direct competitors and their positioning",
     },
     {
-      searchQuery: `${categoryStr} market leaders alternative solutions 2025`,
+      searchQuery: `${categoryStr} market leaders alternative solutions ${currentYear}`,
       category: "business",
       rationale: "Find alternatives and market leaders",
     },
-    {
-      searchQuery: `${companyName} vs competitors comparison`,
-      category: "business",
-      rationale: "Find comparison content and differentiators",
-    },
   ];
 }
 
-/**
- * Use web search + LLM to synthesize a competitor landscape for the company.
- */
+/* ──────────────────────────────────────────────────────────────
+ * Main competitor analysis
+ * ────────────────────────────────────────────────────────────── */
+
 export async function analyzeCompetitors(args: {
   companyName: string;
   categories: string[];
@@ -39,6 +80,12 @@ export async function analyzeCompetitors(args: {
 }): Promise<CompetitorAnalysis> {
   const { companyName, categories, companyContext = "" } = args;
 
+  const cached = getCached(companyName, categories);
+  if (cached) {
+    console.log("[marketing-pipeline] competitor analysis cache HIT for %s", companyName);
+    return cached;
+  }
+
   const plannedQueries = buildCompetitorQueries(companyName, categories);
 
   let rawContext = companyContext;
@@ -84,5 +131,7 @@ Return valid JSON matching the schema.`;
     new HumanMessage(rawContext),
   ]);
 
-  return CompetitorAnalysisSchema.parse(response);
+  const result = CompetitorAnalysisSchema.parse(response);
+  setCache(companyName, categories, result);
+  return result;
 }
diff --git a/src/lib/tools/marketing-pipeline/generator.ts b/src/lib/tools/marketing-pipeline/generator.ts
index d0036d03..65298703 100644
--- a/src/lib/tools/marketing-pipeline/generator.ts
+++ b/src/lib/tools/marketing-pipeline/generator.ts
@@ -1,3 +1,4 @@
+import { z } from "zod";
 import { HumanMessage, SystemMessage } from "@langchain/core/messages";
 import { getChatModel, MARKETING_MODELS } from "~/lib/models";
 import type {
@@ -14,7 +15,7 @@ Voice & craft:
 - Lead every post with tension, contrast, or a surprising insight. The first line must stop the scroll.
 - Every sentence must earn its place. Cut filler, qualifiers, and throat-clearing ("Introducing…", "We're excited to…").
 - Match format to content: use narrative paragraphs for stories and lessons learned; use structured bullets/lists for educational breakdowns, comparisons, or frameworks. Pick whichever serves the message best.
-- End with a question or soft CTA that invites genuine conversation, not a generic "Let's connect!"
+- End with a SINGLE question or soft CTA that invites genuine conversation, not a generic "Let's connect!" Only one question — never two in a row.
 - Use trend references to frame the narrative or set up a tension, but never quote or attribute them directly.
 
 Staying honest:
@@ -23,6 +24,14 @@ Staying honest:
 - If a detail isn't in the context, reframe it as a general industry observation or an open question.
 - Skip hype words ("revolutionary", "game-changing", "best-in-class") unless the context explicitly supports them.
 
+STRICT anti-patterns — NEVER do any of these:
+- NEVER list product features as bullet points (e.g. "Here's how X empowers you: - Feature A… - Feature B…"). Weave capabilities into a narrative instead.
+- NEVER acknowledge product shortcomings, roadmap gaps, or areas "we're still working on." Marketing copy should project confidence.
+- NEVER open with generic statements like "Many teams find themselves…" or "In today's fast-paced world…". These are the same as "Excited to announce" — instant scroll-past.
+- NEVER use more than 3 hashtags on LinkedIn, 2 on X, or 0 on Reddit. Fewer is always better.
+- NEVER end with two questions. Pick one focused question.
+- NEVER write in a way that reads like a product page, press release, or ad copy.
+
 Media selection:
 - Pick "image" for static visuals (diagrams, workflows, checklists, data snapshots).
 - Pick "video" for demos, explainers, or anything that benefits from motion.
@@ -110,10 +119,19 @@ return research
 }
 
 
+function formatStrategyBlock(strategy: MessagingStrategy): string {
+  return [
+    `Positioning angle: ${strategy.angle}`,
+    `Key proof: ${strategy.keyProof.join("; ")}`,
+    `Human hook: ${strategy.humanHook}`,
+    `Avoid: ${strategy.avoidList.join("; ")}`,
+  ].join("\n");
+}
+
 const PLATFORM_EXAMPLES: Record<MarketingPlatform, string> = {
     linkedin: `Two examples of strong LinkedIn posts (for style reference only — do NOT copy content):
 
-Example A — Narrative style:
+Example A — Narrative style (GOOD):
 """
 Most marketing teams are still building campaigns the same way they did in 2019. The ones pulling ahead aren't just adopting AI — they're rethinking the entire pipeline.
 
@@ -126,7 +144,7 @@ The result isn't just speed — it's focus. Our team now spends time on strategy
 What's the biggest bottleneck in your marketing workflow right now?
 """
 
-Example B — Educational breakdown style:
+Example B — Educational breakdown style (GOOD):
 """
 Marketing automation and marketing strategy are not the same thing. But they're increasingly being treated like they are.
 
@@ -149,7 +167,24 @@ Predictive analytics can surface which segments are underserved. Trend analysis
 But the risk is real — when automation outpaces strategy, you're scaling the wrong things faster.
 
 Where does your team draw the line between automating and strategizing?
-"""`,
+"""
+
+Example C — BAD post (DO NOT write like this):
+"""
+Many teams find themselves buried under a mountain of documents, but those who succeed transform this challenge into an advantage.
+
+Here's how ProductX empowers you:
+- Feature A: It analyzes your documents, turning them into actionable insights.
+- Feature B: Our open-source platform benefits from a vibrant community.
+- Feature C: While enhancing customizability remains a priority, our workflows already support quick decision-making.
+
+This isn't just about speed—it's about clarity and focus.
+
+How does your team handle document overload? Where do you see the biggest opportunity to streamline?
+
+#Marketing #AI #Efficiency #Automation #Tech #ProductX
+"""
+Why this is bad: Generic opener, feature bullet list reads like a product page, acknowledges a weakness ("remains a priority"), two questions at the end, 6 hashtags is excessive, hollow claims without specific proof.`,
     x: `Example of a strong X post (for style reference only — do NOT copy content):
 """
 Your marketing team's bottleneck isn't creative talent — it's manual processes eating 60% of their week.
@@ -176,13 +211,9 @@ We rebuilt our pipeline around that idea. Early results are promising.
 """`,
 };
 
-function formatStrategyBlock(strategy: MessagingStrategy): string {
-  return [
-    `Positioning angle: ${strategy.angle}`,
-    `Key proof: ${strategy.keyProof.join("; ")}`,
-    `Human hook: ${strategy.humanHook}`,
-    `Avoid: ${strategy.avoidList.join("; ")}`,
-  ].join("\n");
+interface PlatformMeta {
+  subreddit?: string;
+  hashtags?: string[];
 }
 
 function buildPrompt(args: {
@@ -191,6 +222,7 @@ function buildPrompt(args: {
     companyContext: string;
     research: MarketingResearchResult[];
     strategy?: MessagingStrategy;
+    platformMeta?: PlatformMeta;
 }): string {
   const parts = [
     `Selected platform: ${args.platform}`,
@@ -205,29 +237,96 @@ function buildPrompt(args: {
   if (args.strategy) {
     parts.push("", "Messaging strategy (use this angle and proof; respect avoid list):", formatStrategyBlock(args.strategy));
   }
+
+  if (args.platformMeta?.subreddit) {
+    parts.push(
+      "",
+      `Target subreddit: ${args.platformMeta.subreddit}`,
+      "Tailor your tone and content to match this subreddit's norms and audience.",
+    );
+  }
+  if (args.platformMeta?.hashtags?.length) {
+    parts.push(
+      "",
+      `Preferred hashtags (incorporate naturally if relevant): ${args.platformMeta.hashtags.join(", ")}`,
+    );
+  }
+
   parts.push(
     "",
     platformTemplate(args.platform),
     "",
-    PLATFORM_EXAMPLES[args.platform] ?? "",
+    (PLATFORM_EXAMPLES[args.platform] ?? ""),
     "",
     "Task:",
     args.strategy
       ? "- Write ONE post using the messaging strategy angle and proof; respect the avoid list."
-      : "- Pick ONE angle (either from trend references or company context).",
-    "- Write ONE post that fits the platform format above.",
-    "- Do NOT add facts not supported by company context.",
-    "- Return JSON only matching the schema.",
+      : "- Pick ONE angle — a tension, trend, or insight — and commit to it.",
+    "- Open with a hook that creates curiosity or contrast. Never open with an announcement or generic statement.",
+    "- Build a short narrative arc: hook → insight/story → takeaway → CTA/question.",
+    "- Write as a person sharing what they've learned, not a brand listing features.",
+    "- NEVER list features as bullet points. Weave capabilities into the narrative naturally.",
+    "- NEVER acknowledge product weaknesses or areas under development.",
+    "- Ground all product claims in the company context. Reframe anything unsupported as an industry observation.",
+    "- End with exactly ONE question or CTA, not two.",
+    `- Use at most ${args.platform === "linkedin" ? 3 : args.platform === "x" ? 2 : 0} hashtags. Fewer is better.`,
+    args.platformMeta?.hashtags?.length
+      ? "- Prefer the user's preferred hashtags over generic ones."
+      : "",
+    "- Return JSON matching the schema exactly.",
   );
   return parts.join("\n");
 }
 
+/* ──────────────────────────────────────────────────────────────
+ * Quality gate — optional post-generation validation
+ * ────────────────────────────────────────────────────────────── */
+
+const QualityScoreSchema = z.object({
+  score: z.number().min(1).max(10),
+  issues: z.array(z.string()),
+  rewrite: z.string().nullable(),
+});
+
+const QUALITY_THRESHOLD = 6;
+
+async function validatePostQuality(
+  post: string,
+  platform: MarketingPlatform,
+): Promise<{ score: number; issues: string[]; rewrite: string | null }> {
+  const chat = getChatModel(MARKETING_MODELS.dnaExtraction);
+  const model = chat.withStructuredOutput(QualityScoreSchema, { name: "quality_check" });
+
+  const response = await model.invoke([
+    new SystemMessage(
+      `You are a social media copy editor. Score this ${platform} post 1-10 on these criteria:
+1. Hook strength (does the first line stop the scroll?)
+2. Authenticity (does it sound like a person, not a brand?)
+3. Platform fit (does it match ${platform} conventions?)
+4. Specificity (are claims backed by concrete details, not vague hype?)
+5. Structure (is it narrative-driven rather than a feature list?)
+
+If score < ${QUALITY_THRESHOLD}, provide a "rewrite" field with an improved version that fixes the issues.
+Flag specific issues in "issues" array.`,
+    ),
+    new HumanMessage(post),
+  ]);
+
+  return QualityScoreSchema.parse(response);
+}
+
+/* ──────────────────────────────────────────────────────────────
+ * Main generation
+ * ────────────────────────────────────────────────────────────── */
+
 export async function generateCampaignOutput(args: {
     platform: MarketingPlatform;
     prompt: string;
     companyContext: string;
     research: MarketingResearchResult[];
     strategy?: MessagingStrategy;
+    enableQualityGate?: boolean;
+    platformMeta?: PlatformMeta;
 }): Promise<{
   platform: MarketingPlatform;
   message: string;
@@ -246,10 +345,34 @@ export async function generateCampaignOutput(args: {
 
   const response = await model.invoke([
     new SystemMessage(systemPrompt),
-    new HumanMessage(buildPrompt(args)),
+    new HumanMessage(buildPrompt({
+      platform: args.platform,
+      prompt: args.prompt,
+      companyContext: args.companyContext,
+      research: args.research,
+      strategy: args.strategy,
+      platformMeta: args.platformMeta,
+    })),
   ]);
 
-  const parsed = MarketingPipelineOutputSchema.parse(response);
+  let parsed = MarketingPipelineOutputSchema.parse(response);
+
+  if (args.enableQualityGate) {
+    try {
+      const quality = await validatePostQuality(parsed.message, args.platform);
+      console.log(
+        "[marketing-pipeline] quality gate: score=%d issues=%d",
+        quality.score, quality.issues.length,
+      );
+      if (quality.score < QUALITY_THRESHOLD && quality.rewrite) {
+        parsed = { ...parsed, message: quality.rewrite };
+        console.log("[marketing-pipeline] quality gate rewrote post (score was %d)", quality.score);
+      }
+    } catch (err) {
+      console.warn("[marketing-pipeline] quality gate failed, using original:", err);
+    }
+  }
+
   const out: {
     platform: MarketingPlatform;
     message: string;
diff --git a/src/lib/tools/marketing-pipeline/index.ts b/src/lib/tools/marketing-pipeline/index.ts
index 94f4f553..8e02da6c 100644
--- a/src/lib/tools/marketing-pipeline/index.ts
+++ b/src/lib/tools/marketing-pipeline/index.ts
@@ -4,6 +4,7 @@ export {
     MarketingPipelineInputSchema,
     MarketingPipelineOutputSchema,
     MarketingPlatformEnum,
+    PIPELINE_STEPS,
 } from "~/lib/tools/marketing-pipeline/types";
 export type {
     MarketingPipelineInput,
@@ -11,5 +12,8 @@ export type {
     MarketingPipelineResult,
     MarketingPlatform,
     MarketingResearchResult,
+    PipelineStepId,
+    PipelineSSEEvent,
+    OnPipelineProgress,
 } from "~/lib/tools/marketing-pipeline/types";
 
diff --git a/src/lib/tools/marketing-pipeline/knowledge.ts b/src/lib/tools/marketing-pipeline/knowledge.ts
new file mode 100644
index 00000000..f59a196a
--- /dev/null
+++ b/src/lib/tools/marketing-pipeline/knowledge.ts
@@ -0,0 +1,393 @@
+/**
+ * new backend intelligence layer
+ */
+
+import { eq } from "drizzle-orm";
+import { HumanMessage, SystemMessage } from "@langchain/core/messages";
+
+import { db } from "~/server/db";
+import { company, category } from "~/server/db/schema";
+
+import {
+  companyEnsembleSearch,
+  createOpenAIEmbeddings,
+  type CompanySearchOptions,
+  type SearchResult,
+} from "~/lib/tools/rag";
+
+import { getChatModel, MARKETING_MODELS } from "~/lib/models";
+
+import type {
+  CompanyDNA,
+  EvidenceCitation,
+  KnowledgeValidationReport,
+  NormalizedCompanyKnowledge,
+} from "~/lib/tools/marketing-pipeline/types";
+
+import {
+  CompanyDNASchema,
+  KnowledgeValidationReportSchema,
+  NormalizedCompanyKnowledgeSchema,
+} from "~/lib/tools/marketing-pipeline/types";
+
+const DEFAULT_TOP_K = 4;
+
+function cleanSnippet(text: string, maxLen = 500): string {
+  return text.trim().replace(/\s+/g, " ").slice(0, maxLen);
+}
+
+function dedupeStrings(values: string[]): string[] {
+  return [...new Set(values.map((v) => v.trim()).filter(Boolean))];
+}
+
+function buildKnowledgeQueries(baseMeta: string, userPrompt: string): string[] {
+  return [
+    `${baseMeta} company overview products services target customer`,
+    `${baseMeta} differentiators competitive advantages key benefits`,
+    `${baseMeta} proof points metrics outcomes customer results`,
+    `${baseMeta} ${userPrompt}`,
+  ];
+}
+
+function searchResultToCitation(result: SearchResult): EvidenceCitation {
+  return {
+    documentId: result.documentId,
+    title: result.title,
+    page: result.pageNumber,
+    sectionPath: result.source,
+    snippet: cleanSnippet(result.pageContent, 280),
+    sourceType: result.retrievalMethod,
+  };
+}
+
+function formatEvidenceForPrompt(results: SearchResult[]): string {
+  if (!results.length) return "No evidence retrieved.";
+
+  return results
+    .map((r, i) => {
+      const citation = searchResultToCitation(r);
+      return [
+        `Evidence ${i + 1}:`,
+        `Title: ${citation.title ?? "Unknown"}`,
+        `Document ID: ${String(citation.documentId ?? "Unknown")}`,
+        `Page: ${citation.page ?? "Unknown"}`,
+        `Section: ${citation.sectionPath ?? "Unknown"}`,
+        `Source type: ${citation.sourceType ?? "Unknown"}`,
+        `Snippet: ${citation.snippet}`,
+      ].join("\n");
+    })
+    .join("\n\n");
+}
+
+async function getCompanyMetadata(companyId: number): Promise<{
+  companyName: string;
+  categoryNames: string[];
+  baseMeta: string;
+}> {
+  const [companyRow, categoryRows] = await Promise.all([
+    db.select().from(company).where(eq(company.id, companyId)).limit(1),
+    db.select().from(category).where(eq(category.companyId, BigInt(companyId))).limit(8),
+  ]);
+
+  const companyName = companyRow[0]?.name ?? "Unknown Company";
+  const categoryNames = categoryRows.map((r) => r.name).filter(Boolean);
+  const baseMeta = `Company: ${companyName}. Categories: ${categoryNames.join(", ") || "None"}.`;
+
+  return { companyName, categoryNames, baseMeta };
+}
+/**
+ * runs multiple focused RAG queries over company KB instead of just one generic search
+ * this gives better raw material without changing the rest of the RAG system
+ */
+export async function retrieveCompanyKnowledgeEvidence(args: {
+  companyId: number;
+  prompt: string;
+}): Promise<SearchResult[]> {
+  const { companyId, prompt } = args;
+  const { baseMeta } = await getCompanyMetadata(companyId);
+
+  const embeddings = createOpenAIEmbeddings();
+  const options: CompanySearchOptions = {
+    companyId,
+    topK: DEFAULT_TOP_K,
+    weights: [0.4, 0.6],
+  };
+
+  const queries = buildKnowledgeQueries(baseMeta, prompt);
+
+  const resultsPerQuery = await Promise.all(
+    queries.map(async (query) => {
+      try {
+        return await companyEnsembleSearch(query, options, embeddings);
+      } catch (error) {
+        console.warn("[marketing-pipeline] evidence retrieval failed for query:", query, error);
+        return [];
+      }
+    }),
+  );
+
+  const flattened = resultsPerQuery.flat();
+
+  const seen = new Set<string>();
+  const deduped: SearchResult[] = [];
+
+  for (const result of flattened) {
+    const key = [
+      result.documentId ?? "",
+      result.pageNumber ?? "",
+      cleanSnippet(result.pageContent, 200),
+    ].join("::");
+
+    if (!seen.has(key)) {
+      seen.add(key);
+      deduped.push(result);
+    }
+  }
+
+  return deduped.slice(0, 20);
+}
+
+/**
+ * first pass LLM - takes the raw retreived evidence and converts it into a stable structure
+ * gives normalized format 
+ */
+export async function normalizeCompanyKnowledge(args: {
+  companyId: number;
+  prompt: string;
+  evidence: SearchResult[];
+}): Promise<NormalizedCompanyKnowledge> {
+  const { companyId, prompt, evidence } = args;
+  const { companyName, categoryNames } = await getCompanyMetadata(companyId);
+
+  const evidenceBlock = formatEvidenceForPrompt(evidence);
+
+  const systemPrompt = `You are a document intelligence system that converts company knowledge-base evidence into a normalized structured profile.
+
+Rules:
+- Use ONLY information supported by the provided evidence.
+- Do not invent product claims, metrics, customers, partnerships, or differentiators.
+- If something is not supported, say "Not specified" for strings or [] for arrays.
+- Keep wording concise and factual.
+- claims should contain only evidence-backed claims.
+- confidence should reflect how directly the evidence supports the claim.
+- missingInformation should list important gaps.
+- risksOrUnknowns should capture ambiguity, weak support, or unclear positioning.
+Return valid JSON exactly matching the schema.`;
+
+  const humanPrompt = [
+    `Company name: ${companyName}`,
+    `Categories: ${categoryNames.join(", ") || "None"}`,
+    `User focus: ${prompt}`,
+    "",
+    "Evidence:",
+    evidenceBlock,
+  ].join("\n");
+
+  const chat = getChatModel(MARKETING_MODELS.dnaExtraction);
+  const model = chat.withStructuredOutput(NormalizedCompanyKnowledgeSchema, {
+    name: "normalized_company_knowledge",
+  });
+
+  const response = await model.invoke([
+    new SystemMessage(systemPrompt),
+    new HumanMessage(humanPrompt),
+  ]);
+
+  return NormalizedCompanyKnowledgeSchema.parse(response);
+}
+
+/**
+ * second pass LLM - checks if output is grounded, complete, internally consistent, what claims look weak or unsupported
+ * grading/validation pass
+ */
+export async function validateCompanyKnowledge(args: {
+  knowledge: NormalizedCompanyKnowledge;
+  evidence: SearchResult[];
+}): Promise<KnowledgeValidationReport> {
+  const { knowledge, evidence } = args;
+
+  const evidenceBlock = formatEvidenceForPrompt(evidence);
+
+  const systemPrompt = `You are a strict reviewer checking whether a normalized company profile is grounded in retrieved evidence.
+
+Score each dimension from 0 to 10:
+- groundednessScore: are claims supported by evidence?
+- completenessScore: does the profile cover the important company fields well?
+- consistencyScore: are there contradictions or mismatches?
+
+Rules:
+- Flag unsupported or weakly supported claims.
+- Flag critical missing fields if they matter for downstream marketing.
+- needsRevision should be true if the profile is too weak, incomplete, or contains unsupported claims.
+- revisionNotes should be practical and brief.
+Return valid JSON exactly matching the schema.`;
+
+  const humanPrompt = [
+    "Normalized company knowledge:",
+    JSON.stringify(knowledge, null, 2),
+    "",
+    "Retrieved evidence:",
+    evidenceBlock,
+  ].join("\n");
+
+  const chat = getChatModel(MARKETING_MODELS.dnaExtraction);
+  const model = chat.withStructuredOutput(KnowledgeValidationReportSchema, {
+    name: "knowledge_validation_report",
+  });
+
+  const response = await model.invoke([
+    new SystemMessage(systemPrompt),
+    new HumanMessage(humanPrompt),
+  ]);
+
+  return KnowledgeValidationReportSchema.parse(response);
+}
+
+/**
+ * if validation function says result is weak, this pass rewrites it - removes unsupported clains,
+ * tightens vague working, preserves supported information only
+ * pipeline is now: retreive->normalize->validate->revise
+ */
+export async function reviseCompanyKnowledgeIfNeeded(args: {
+  knowledge: NormalizedCompanyKnowledge;
+  validation: KnowledgeValidationReport;
+  evidence: SearchResult[];
+}): Promise<NormalizedCompanyKnowledge> {
+  const { knowledge, validation, evidence } = args;
+
+  if (!validation.needsRevision) {
+    return knowledge;
+  }
+
+  const evidenceBlock = formatEvidenceForPrompt(evidence);
+
+  const systemPrompt = `You are revising a normalized company profile after QA review.
+
+Rules:
+- Remove unsupported claims.
+- Tighten vague or speculative statements.
+- Preserve supported information.
+- Fill missing fields only if the evidence directly supports them.
+- Keep the same schema.
+Return valid JSON exactly matching the schema.`;
+
+  const humanPrompt = [
+    "Current normalized company knowledge:",
+    JSON.stringify(knowledge, null, 2),
+    "",
+    "Validation report:",
+    JSON.stringify(validation, null, 2),
+    "",
+    "Evidence:",
+    evidenceBlock,
+  ].join("\n");
+
+  const chat = getChatModel(MARKETING_MODELS.dnaExtraction);
+  const model = chat.withStructuredOutput(NormalizedCompanyKnowledgeSchema, {
+    name: "revised_normalized_company_knowledge",
+  });
+
+  const response = await model.invoke([
+    new SystemMessage(systemPrompt),
+    new HumanMessage(humanPrompt),
+  ]);
+
+  return NormalizedCompanyKnowledgeSchema.parse(response);
+}
+/**
+ * Fast path: single normalize pass, no validation/revise. Use for lower latency.
+ */
+export async function buildCompanyKnowledgeFast(args: {
+  companyId: number;
+  prompt: string;
+}): Promise<{
+  knowledge: NormalizedCompanyKnowledge;
+  evidence: SearchResult[];
+}> {
+  const evidence = await retrieveCompanyKnowledgeEvidence(args);
+  const knowledge = await normalizeCompanyKnowledge({
+    companyId: args.companyId,
+    prompt: args.prompt,
+    evidence,
+  });
+  return { knowledge, evidence };
+}
+
+/**
+ * returns final knowledge object, validation report, raw evidence
+ */
+export async function buildValidatedCompanyKnowledge(args: {
+  companyId: number;
+  prompt: string;
+}): Promise<{
+  knowledge: NormalizedCompanyKnowledge;
+  validation: KnowledgeValidationReport;
+  evidence: SearchResult[];
+}> {
+  const evidence = await retrieveCompanyKnowledgeEvidence(args);
+
+  const normalized = await normalizeCompanyKnowledge({
+    companyId: args.companyId,
+    prompt: args.prompt,
+    evidence,
+  });
+
+  const validation = await validateCompanyKnowledge({
+    knowledge: normalized,
+    evidence,
+  });
+
+  const revised = await reviseCompanyKnowledgeIfNeeded({
+    knowledge: normalized,
+    validation,
+    evidence,
+  });
+
+  return {
+    knowledge: revised,
+    validation,
+    evidence,
+  };
+}
+
+/**
+ * converts deeper structured object we created here into the simpler object
+ * expected by marketing pipeline
+ */
+export function mapValidatedKnowledgeToCompanyDNA(
+  knowledge: NormalizedCompanyKnowledge,
+): CompanyDNA {
+  const coreMission =
+    knowledge.whatItDoes && knowledge.whatItDoes !== "Not specified"
+      ? knowledge.targetAudience.length > 0
+        ? `${knowledge.whatItDoes} for ${knowledge.targetAudience.join(", ")}.`
+        : knowledge.whatItDoes
+      : "Not specified";
+
+  const provenResults = dedupeStrings([
+    ...knowledge.proofPoints,
+    ...knowledge.outcomes,
+  ]).slice(0, 5);
+
+  const humanStory =
+    knowledge.founderStory && knowledge.founderStory !== "Not specified"
+      ? knowledge.founderStory
+      : knowledge.brandValues.length > 0
+        ? `Values signaled: ${knowledge.brandValues.join(", ")}`
+        : "Not specified";
+
+  const technicalEdge =
+    knowledge.technicalEdge && knowledge.technicalEdge !== "Not specified"
+      ? knowledge.technicalEdge
+      : knowledge.capabilities.length > 0
+        ? `Capabilities include ${knowledge.capabilities.slice(0, 3).join(", ")}.`
+        : "Not specified";
+
+  return CompanyDNASchema.parse({
+    coreMission,
+    keyDifferentiators: knowledge.keyDifferentiators.slice(0, 5),
+    provenResults,
+    humanStory,
+    technicalEdge,
+  });
+}
\ No newline at end of file
diff --git a/src/lib/tools/marketing-pipeline/positioning.ts b/src/lib/tools/marketing-pipeline/positioning.ts
index 77b5774d..9946a4a4 100644
--- a/src/lib/tools/marketing-pipeline/positioning.ts
+++ b/src/lib/tools/marketing-pipeline/positioning.ts
@@ -18,6 +18,12 @@ export async function buildMessagingStrategy(args: {
 }): Promise<MessagingStrategy> {
   const { dna, competitors, trendsSummary = "", userPrompt = "" } = args;
 
+  const MAX_COMPETITORS = 3;
+  const MAX_WEAKNESSES = 2;
+  const MAX_TRENDS_CHARS = 800;
+
+  const topCompetitors = competitors.competitors.slice(0, MAX_COMPETITORS);
+
   const contextParts: string[] = [
     "## Company DNA",
     `Mission: ${dna.coreMission}`,
@@ -27,16 +33,17 @@ export async function buildMessagingStrategy(args: {
     `Technical edge: ${dna.technicalEdge}`,
     "",
     "## Competitor landscape",
-    ...competitors.competitors.map(
+    ...topCompetitors.map(
       (c) =>
-        `- ${c.name}: ${c.positioning}. Weaknesses: ${c.weaknesses.join(", ")}`,
+        `- ${c.name}: ${c.positioning}. Weaknesses: ${c.weaknesses.slice(0, MAX_WEAKNESSES).join(", ")}`,
     ),
     `Our advantages: ${competitors.ourAdvantages.join("; ")}`,
     `Market gaps: ${competitors.marketGaps.join("; ")}`,
     `Messaging to avoid: ${competitors.messagingAntiPatterns.join("; ")}`,
   ];
   if (trendsSummary.trim()) {
-    contextParts.push("", "## Platform / trend context", trendsSummary.trim());
+    const trimmed = trendsSummary.trim().slice(0, MAX_TRENDS_CHARS);
+    contextParts.push("", "## Platform / trend context", trimmed);
   }
   if (userPrompt.trim()) {
     contextParts.push("", "## User request", userPrompt.trim());
@@ -52,7 +59,7 @@ Rules:
 
 Use only information from the provided context. Return valid JSON matching the schema.`;
 
-  const chat = getChatModel(MARKETING_MODELS.contentGeneration);
+  const chat = getChatModel(MARKETING_MODELS.strategyBuilding);
   const model = chat.withStructuredOutput(MessagingStrategySchema, {
     name: "messaging_strategy",
   });
diff --git a/src/lib/tools/marketing-pipeline/research.ts b/src/lib/tools/marketing-pipeline/research.ts
index 67463de8..0c911b0d 100644
--- a/src/lib/tools/marketing-pipeline/research.ts
+++ b/src/lib/tools/marketing-pipeline/research.ts
@@ -2,7 +2,34 @@ import type {
   MarketingPlatform,
   MarketingResearchResult,
 } from "~/lib/tools/marketing-pipeline/types";
+import type { PlannedQuery } from "~/lib/tools/trend-search";
 import { runTrendSearch } from "~/lib/tools/trend-search";
+import { getCachedTrendSearch, setCachedTrendSearch } from "~/lib/tools/trend-search/cache";
+
+function buildTrendQueries(
+  platform: MarketingPlatform,
+  companyName: string,
+  prompt: string,
+): PlannedQuery[] {
+  const year = new Date().getFullYear();
+  return [
+    {
+      searchQuery: `${platform} marketing trends ${year} ${prompt}`,
+      category: "business" as const,
+      rationale: "Platform-specific trends for the campaign",
+    },
+    {
+      searchQuery: `${companyName} ${platform} content strategy best practices ${year}`,
+      category: "tech" as const,
+      rationale: "Company-relevant content strategy trends",
+    },
+    {
+      searchQuery: `${platform} engagement strategies ${prompt} ${year}`,
+      category: "business" as const,
+      rationale: "Engagement tactics for the target platform",
+    },
+  ];
+}
 
 export async function researchPlatformTrends(args: {
   platform: MarketingPlatform;
@@ -11,15 +38,19 @@ export async function researchPlatformTrends(args: {
   companyContext: string;
   maxResults: number;
 }): Promise<MarketingResearchResult[]> {
-  const { platform, prompt, companyContext, maxResults } = args;
+  const { platform, prompt, companyName, companyContext, maxResults } = args;
 
   try {
-    const trendOutput = await runTrendSearch({
-      query: prompt,
-      companyContext,
-      // Categories are optional; let the planner infer from query + context for now.
-      categories: undefined,
-    });
+    const cached = getCachedTrendSearch(prompt, companyContext);
+    const preBuiltQueries = buildTrendQueries(platform, companyName, prompt);
+    const trendOutput = cached ?? (await runTrendSearch(
+      { query: prompt, companyContext, categories: undefined },
+      { preBuiltQueries },
+    ));
+
+    if (!cached) {
+      setCachedTrendSearch(prompt, companyContext, trendOutput);
+    }
 
     const top = trendOutput.results.slice(0, maxResults);
 
diff --git a/src/lib/tools/marketing-pipeline/run.ts b/src/lib/tools/marketing-pipeline/run.ts
index 51811051..352e3b86 100644
--- a/src/lib/tools/marketing-pipeline/run.ts
+++ b/src/lib/tools/marketing-pipeline/run.ts
@@ -6,9 +6,11 @@ import type {
   MarketingPipelineInput,
   MarketingPipelineResult,
   MarketingResearchResult,
+  OnPipelineProgress,
+  PipelineStepId,
 } from "~/lib/tools/marketing-pipeline/types";
+import { PIPELINE_STEPS } from "~/lib/tools/marketing-pipeline/types";
 
-// additional imports for query building and for fetching trend information
 import { eq } from "drizzle-orm";
 import { db } from "~/server/db";
 import { company, category } from "~/server/db/schema";
@@ -22,6 +24,7 @@ function normalizeInput(input: MarketingPipelineInput): MarketingPipelineInput {
         platform: input.platform,
         prompt: prompt || DEFAULT_PROMPT,
         maxResearchResults: input.maxResearchResults ?? 6,
+        platformMeta: input.platformMeta,
     };
 }
 
@@ -45,14 +48,35 @@ function formatTrendsSummary(research: MarketingResearchResult[]): string {
     .join("\n");
 }
 
+function stepLabel(step: PipelineStepId): string {
+  return PIPELINE_STEPS.find((s) => s.id === step)?.label ?? step;
+}
+
 export async function runMarketingPipeline(args: {
   companyId: number;
   input: MarketingPipelineInput;
   debug?: boolean;
+  onProgress?: OnPipelineProgress;
 }): Promise<MarketingPipelineResult> {
+  const { onProgress } = args;
+  const pipelineStart = Date.now();
+
+  function emitStart(step: PipelineStepId) {
+    onProgress?.({ type: "step_start", step, label: stepLabel(step) });
+  }
+  function emitComplete(step: PipelineStepId, startTime: number, detail?: string) {
+    const durationMs = Date.now() - startTime;
+    console.log(
+      "[marketing-pipeline] %s completed in %dms%s",
+      step, durationMs, detail ? ` – ${detail}` : "",
+    );
+    onProgress?.({ type: "step_complete", step, durationMs, detail });
+  }
+
   const normalizedInput = normalizeInput(args.input);
+  const userPrompt = normalizedInput.prompt ?? DEFAULT_PROMPT;
 
-  // 1) Fetch company name and categories
+  // 1) Fetch company name + categories (fast DB query)
   const [companyRow] = await db
     .select({ name: company.name })
     .from(company)
@@ -67,75 +91,129 @@ export async function runMarketingPipeline(args: {
     .limit(8);
   const categories = categoryRows.map((r) => r.name).filter(Boolean);
 
-  // 2) Build KB context (needed for research and generator)
-  const companyContextBase = await buildCompanyKnowledgeContext({
-    companyId: args.companyId,
-    prompt: normalizedInput.prompt ?? DEFAULT_PROMPT,
-  });
+  // 2) Run KB context, DNA, competitors, and trends ALL in parallel.
+  //    KB context was previously sequential; moving it here saves 1-3s.
+  let research: MarketingResearchResult[] = [];
 
-  const platformGuidelines = buildPlatformGuidelines(normalizedInput.platform);
-  const companyContext = `${companyContextBase}
+  const t0 = Date.now();
+  emitStart("loading-context");
 
-Platform best practices:
-${platformGuidelines}`;
+  const [companyContextBase, dnaResult, competitors] = await Promise.all([
+    (async () => {
+      const ctx = await buildCompanyKnowledgeContext({
+        companyId: args.companyId,
+        prompt: userPrompt,
+      });
+      emitComplete("loading-context", t0, `Loaded knowledge for ${companyName}`);
+      return ctx;
+    })(),
 
-  // 3) Run DNA extraction, competitor analysis, and trend research in parallel
-  let research: MarketingResearchResult[] = [];
-  const [dnaResult, competitors] = await Promise.all([
-    extractCompanyDNA({ companyId: args.companyId, prompt: normalizedInput.prompt ?? DEFAULT_PROMPT }),
-    analyzeCompetitors({
-      companyName,
-      categories,
-      companyContext: companyContextBase,
-    }),
-    (async (): Promise<MarketingResearchResult[]> => {
+    (async () => {
+      const t1 = Date.now();
+      emitStart("extracting-dna");
+      const result = await extractCompanyDNA({ companyId: args.companyId, prompt: userPrompt });
+      const diffCount = result.dna.keyDifferentiators.length;
+      emitComplete("extracting-dna", t1,
+        `Found ${diffCount} differentiator${diffCount !== 1 ? "s" : ""}`,
+      );
+      return result;
+    })(),
+
+    (async () => {
+      const t2 = Date.now();
+      emitStart("analyzing-competitors");
+      const result = await analyzeCompetitors({
+        companyName,
+        categories,
+        companyContext: "",
+      });
+      const compCount = result.competitors.length;
+      emitComplete("analyzing-competitors", t2,
+        `Identified ${compCount} competitor${compCount !== 1 ? "s" : ""}`,
+      );
+      return result;
+    })(),
+
+    (async () => {
+      const t3 = Date.now();
+      emitStart("researching-trends");
       try {
+        const platformGuidelines = buildPlatformGuidelines(normalizedInput.platform, normalizedInput.platformMeta);
+        const basicContext = [
+          `Company: ${companyName}.`,
+          `Categories: ${categories.join(", ") || "None"}.`,
+          "",
+          "Platform best practices:",
+          platformGuidelines,
+        ].join("\n");
         const raw = await researchPlatformTrends({
           platform: normalizedInput.platform,
-          prompt: normalizedInput.prompt ?? DEFAULT_PROMPT,
+          prompt: userPrompt,
           companyName,
-          companyContext,
+          companyContext: basicContext,
           maxResults: normalizedInput.maxResearchResults ?? 6,
         });
-        return normalizeResearch(raw);
+        const normalized = normalizeResearch(raw);
+        emitComplete("researching-trends", t3,
+          `Discovered ${normalized.length} trending topic${normalized.length !== 1 ? "s" : ""}`,
+        );
+        return normalized;
       } catch (err) {
         const message = err instanceof Error ? err.message : String(err);
         console.warn("[marketing-pipeline] trend research failed:", message);
-        return [];
+        emitComplete("researching-trends", t3, "Trend search unavailable");
+        return [] as MarketingResearchResult[];
       }
     })(),
-  ]).then(([d, c, r]) => {
-    research = r;
-    return [d, c] as const;
+  ]).then(([ctx, dna, comp, res]) => {
+    research = res;
+    return [ctx, dna, comp] as const;
   });
 
   const { dna, debug: dnaDebug } = dnaResult;
 
-  // 4) Build messaging strategy from DNA + competitors + trends
+  // 3) Build messaging strategy from DNA + competitors + trends
+  const t4 = Date.now();
+  emitStart("building-strategy");
+
   const trendsSummary = formatTrendsSummary(research);
   const strategy = await buildMessagingStrategy({
     dna,
     competitors,
     trendsSummary,
-    userPrompt: normalizedInput.prompt ?? DEFAULT_PROMPT,
+    userPrompt,
   });
+  emitComplete("building-strategy", t4, `Angle: ${strategy.angle.slice(0, 80)}`);
+
+  // 4) Generate campaign output with full company context
+  const t5 = Date.now();
+  emitStart("generating-content");
+
+  const platformGuidelines = buildPlatformGuidelines(normalizedInput.platform, normalizedInput.platformMeta);
+  const companyContext = `${companyContextBase}\n\nPlatform best practices:\n${platformGuidelines}`;
 
-  // 5) Generate campaign output with strategy
   const generated = await generateCampaignOutput({
     platform: normalizedInput.platform,
-    prompt: normalizedInput.prompt ?? DEFAULT_PROMPT,
+    prompt: userPrompt,
     companyContext,
     research,
     strategy,
+    enableQualityGate: true,
+    platformMeta: normalizedInput.platformMeta ?? undefined,
   });
+  emitComplete("generating-content", t5,
+    `${generated.message.length} chars, ${generated["image/video"]} recommended`,
+  );
+
+  const totalMs = Date.now() - pipelineStart;
+  console.log("[marketing-pipeline] total pipeline completed in %dms", totalMs);
 
-  // 6) Return result with competitiveAngle and strategyUsed
   return {
     ...generated,
     research,
     normalizedInput: {
       platform: normalizedInput.platform,
-      prompt: normalizedInput.prompt ?? DEFAULT_PROMPT,
+      prompt: userPrompt,
     },
     competitiveAngle: generated.competitiveAngle,
     strategyUsed: generated.strategyUsed,
@@ -143,16 +221,28 @@ ${platformGuidelines}`;
   };
 }
 
-function buildPlatformGuidelines(platform: MarketingPipelineInput["platform"]): string {
+function buildPlatformGuidelines(
+  platform: MarketingPipelineInput["platform"],
+  platformMeta?: MarketingPipelineInput["platformMeta"],
+): string {
   switch (platform) {
-    case "reddit":
-      return [
+    case "reddit": {
+      const lines = [
         "- Speak like a real community member, not a brand account.",
         "- Lead with a specific pain point or story that matches the subreddit.",
         "- Avoid pure self-promotion: focus on value, insight, or behind-the-scenes context.",
         "- Use clear, descriptive titles; body can be longer and conversational.",
         "- Invite discussion with an authentic question at the end.",
-      ].join("\n");
+      ];
+      if (platformMeta?.subreddit) {
+        lines.push(
+          "",
+          `Target subreddit: ${platformMeta.subreddit}`,
+          "Tailor your tone, vocabulary, and content depth to match this subreddit's norms and audience expectations.",
+        );
+      }
+      return lines.join("\n");
+    }
     case "x":
       return [
         "- Keep posts tight and high-signal; front-load the hook in the first line.",
diff --git a/src/lib/tools/marketing-pipeline/types.ts b/src/lib/tools/marketing-pipeline/types.ts
index f0a3ae59..80db1494 100644
--- a/src/lib/tools/marketing-pipeline/types.ts
+++ b/src/lib/tools/marketing-pipeline/types.ts
@@ -1,5 +1,65 @@
 import { z } from "zod";
 
+/**
+ * till company DNA - adds a lower level structured layer before CompanyDNA
+ * this layer gives normalized structured facts, citations, confidence, validation
+ * so model has to be stricter
+ */
+
+/** OpenAI structured outputs require .nullable() instead of .optional() - all fields must be present. */
+export const EvidenceCitationSchema = z.object({
+  documentId: z.union([z.string(), z.number()]).nullable(),
+  title: z.string().nullable(),
+  page: z.number().int().nullable(),
+  sectionPath: z.string().nullable(),
+  snippet: z.string().min(1),
+  sourceType: z.string().nullable(),
+});
+
+export type EvidenceCitation = z.infer<typeof EvidenceCitationSchema>;
+
+export const NormalizedClaimSchema = z.object({
+  claim: z.string(),
+  category: z.string(),
+  confidence: z.enum(["high", "medium", "low"]),
+  citations: z.array(EvidenceCitationSchema).default([]),
+});
+
+export type NormalizedClaim = z.infer<typeof NormalizedClaimSchema>;
+
+export const NormalizedCompanyKnowledgeSchema = z.object({
+  companyName: z.string(),
+  whatItDoes: z.string(),
+  targetAudience: z.array(z.string()).default([]),
+  categories: z.array(z.string()).default([]),
+  keyDifferentiators: z.array(z.string()).default([]),
+  proofPoints: z.array(z.string()).default([]),
+  capabilities: z.array(z.string()).default([]),
+  customerPainPoints: z.array(z.string()).default([]),
+  outcomes: z.array(z.string()).default([]),
+  brandValues: z.array(z.string()).default([]),
+  founderStory: z.string(),
+  technicalEdge: z.string(),
+  risksOrUnknowns: z.array(z.string()).default([]),
+  claims: z.array(NormalizedClaimSchema).default([]),
+  summary: z.string(),
+  missingInformation: z.array(z.string()).default([]),
+});
+
+export type NormalizedCompanyKnowledge = z.infer<typeof NormalizedCompanyKnowledgeSchema>;
+
+export const KnowledgeValidationReportSchema = z.object({
+  groundednessScore: z.number().min(0).max(10),
+  completenessScore: z.number().min(0).max(10),
+  consistencyScore: z.number().min(0).max(10),
+  needsRevision: z.boolean(),
+  unsupportedClaims: z.array(z.string()).default([]),
+  missingCriticalFields: z.array(z.string()).default([]),
+  revisionNotes: z.array(z.string()).default([]),
+});
+
+export type KnowledgeValidationReport = z.infer<typeof KnowledgeValidationReportSchema>;
+
 /** Structured company profile distilled from KB for marketing (issue #232). */
 export interface CompanyDNA {
   coreMission: string;
@@ -60,10 +120,16 @@ export const MessagingStrategySchema = z.object({
 export const MarketingPlatformEnum = z.enum(["x", "linkedin", "reddit", "bluesky"]);
 export type MarketingPlatform = z.infer<typeof MarketingPlatformEnum>;
 
+export const PlatformMetaSchema = z.object({
+    subreddit: z.string().max(100).optional(),
+    hashtags: z.array(z.string().max(50)).max(5).optional(),
+}).optional();
+
 export const MarketingPipelineInputSchema = z.object({
     platform: MarketingPlatformEnum,
     prompt: z.string().min(1).max(2000).optional(),
     maxResearchResults: z.number().int().min(1).max(12).optional(),
+    platformMeta: PlatformMetaSchema,
 });
 export type MarketingPipelineInput = z.infer<typeof MarketingPipelineInputSchema>;
 
@@ -102,3 +168,35 @@ export interface MarketingPipelineResult extends MarketingPipelineOutput {
     dnaDebug?: DNADebugInfo;
 }
 
+/* ──────────────────────────────────────────────────────────────
+ * Pipeline progress / SSE streaming types
+ * ────────────────────────────────────────────────────────────── */
+
+export type PipelineStepId =
+    | "loading-context"
+    | "extracting-dna"
+    | "analyzing-competitors"
+    | "researching-trends"
+    | "building-strategy"
+    | "generating-content";
+
+export const PIPELINE_STEPS: ReadonlyArray<{ id: PipelineStepId; label: string }> = [
+    { id: "loading-context", label: "Loading company knowledge" },
+    { id: "extracting-dna", label: "Extracting company DNA" },
+    { id: "analyzing-competitors", label: "Analyzing competitors" },
+    { id: "researching-trends", label: "Researching platform trends" },
+    { id: "building-strategy", label: "Building messaging strategy" },
+    { id: "generating-content", label: "Generating campaign draft" },
+];
+
+export type PipelineSSEEvent =
+    | { type: "step_start"; step: PipelineStepId; label: string }
+    | { type: "step_complete"; step: PipelineStepId; durationMs: number; detail?: string }
+    | { type: "result"; success: true; data: MarketingPipelineResult }
+    | { type: "error"; success: false; message: string; error?: string };
+
+export type OnPipelineProgress = (event:
+    | { type: "step_start"; step: PipelineStepId; label: string }
+    | { type: "step_complete"; step: PipelineStepId; durationMs: number; detail?: string }
+) => void;
+
diff --git a/src/lib/tools/rag/types.ts b/src/lib/tools/rag/types.ts
index 161ff965..6d7a0323 100644
--- a/src/lib/tools/rag/types.ts
+++ b/src/lib/tools/rag/types.ts
@@ -27,6 +27,11 @@ export interface BaseSearchMetadata {
 }
 
 export interface SearchResult<T extends BaseSearchMetadata = BaseSearchMetadata> {
+  retrievalMethod: string | undefined;
+  source: string | undefined;
+  pageNumber: number | undefined;
+  title: string | undefined;
+  documentId: string | number | undefined;
   pageContent: string;
   metadata: T;
 }
diff --git a/src/lib/tools/trend-search/cache.ts b/src/lib/tools/trend-search/cache.ts
new file mode 100644
index 00000000..2ae06d9b
--- /dev/null
+++ b/src/lib/tools/trend-search/cache.ts
@@ -0,0 +1,59 @@
+/**
+ * In-memory cache for trend search results.
+ * Reduces redundant API calls (Tavily/Serper) and LLM work when the same
+ * query + company context is used within the TTL window.
+ */
+import { createHash } from "node:crypto";
+import type { TrendSearchOutput } from "./types";
+
+const TTL_MS = 60 * 60 * 1000; // 1 hour – trends don't change that fast
+
+interface CacheEntry {
+  output: TrendSearchOutput;
+  expiresAt: number;
+}
+
+const cache = new Map<string, CacheEntry>();
+
+function buildCacheKey(query: string, companyContext: string): string {
+  const normalized = `${query.trim().replace(/\s+/g, " ")}::${companyContext.trim().replace(/\s+/g, " ")}`;
+  return createHash("sha256").update(normalized).digest("hex");
+}
+
+function prune(): void {
+  const now = Date.now();
+  for (const [key, entry] of cache.entries()) {
+    if (entry.expiresAt <= now) {
+      cache.delete(key);
+    }
+  }
+}
+
+export function getCachedTrendSearch(
+  query: string,
+  companyContext: string,
+): TrendSearchOutput | null {
+  const key = buildCacheKey(query, companyContext);
+  const entry = cache.get(key);
+  if (!entry) return null;
+  if (entry.expiresAt <= Date.now()) {
+    cache.delete(key);
+    return null;
+  }
+  return entry.output;
+}
+
+export function setCachedTrendSearch(
+  query: string,
+  companyContext: string,
+  output: TrendSearchOutput,
+): void {
+  if (cache.size > 100) {
+    prune();
+  }
+  const key = buildCacheKey(query, companyContext);
+  cache.set(key, {
+    output,
+    expiresAt: Date.now() + TTL_MS,
+  });
+}
diff --git a/src/lib/tools/trend-search/index.ts b/src/lib/tools/trend-search/index.ts
index d55c9439..dc321831 100644
--- a/src/lib/tools/trend-search/index.ts
+++ b/src/lib/tools/trend-search/index.ts
@@ -8,6 +8,7 @@
 export { runTrendSearch } from "~/lib/tools/trend-search/run";
 export type { RunTrendSearchOptions, TrendSearchPipelineStage } from "~/lib/tools/trend-search/run";
 export type {
+    PlannedQuery,
     TrendSearchInput,
     TrendSearchOutput,
     SearchResult,
diff --git a/src/lib/tools/trend-search/query-planner.ts b/src/lib/tools/trend-search/query-planner.ts
index 8fcf5001..cc06d8b7 100644
--- a/src/lib/tools/trend-search/query-planner.ts
+++ b/src/lib/tools/trend-search/query-planner.ts
@@ -75,7 +75,7 @@ export async function planQueries(
     const chat = new ChatOpenAI({
         openAIApiKey: process.env.OPENAI_API_KEY,
         modelName: "gpt-5-nano",
-        temperature: 0.2,
+        temperature: 1, // gpt-5-nano only supports default (1), not 0.2
     });
 
     const structuredModel = chat.withStructuredOutput(QueryPlannerOutputSchema, {
diff --git a/src/lib/tools/trend-search/run.ts b/src/lib/tools/trend-search/run.ts
index 2d02f660..68c492bc 100644
--- a/src/lib/tools/trend-search/run.ts
+++ b/src/lib/tools/trend-search/run.ts
@@ -1,4 +1,5 @@
 import type {
+  PlannedQuery,
   TrendSearchInput,
   TrendSearchOutput,
 } from "~/lib/tools/trend-search/types";
@@ -10,6 +11,8 @@ export type TrendSearchPipelineStage = "searching" | "synthesizing";
 
 export interface RunTrendSearchOptions {
     onStageChange?: (stage: TrendSearchPipelineStage) => Promise<void> | void;
+    /** Pre-built queries to skip the LLM planQueries step. */
+    preBuiltQueries?: PlannedQuery[];
 }
 
 /**
@@ -22,13 +25,9 @@ export async function runTrendSearch(
   input: TrendSearchInput,
   options: RunTrendSearchOptions = {},
 ): Promise<TrendSearchOutput> {
-  // Step 1: Plan queries
   const categories = input.categories;
-  const plannedQueries = await planQueries(
-    input.query,
-    input.companyContext,
-    categories,
-  );
+  const plannedQueries = options.preBuiltQueries
+    ?? await planQueries(input.query, input.companyContext, categories);
 
   // Step 2: Execute web searches
   await options.onStageChange?.("searching");
diff --git a/src/lib/tools/trend-search/synthesizer.ts b/src/lib/tools/trend-search/synthesizer.ts
index 57616c0b..a52115e8 100644
--- a/src/lib/tools/trend-search/synthesizer.ts
+++ b/src/lib/tools/trend-search/synthesizer.ts
@@ -87,7 +87,7 @@ export async function synthesizeResults(
     const chat = new ChatOpenAI({
         openAIApiKey: process.env.OPENAI_API_KEY,
         modelName: "gpt-5-nano",
-        temperature: 0.2,
+        temperature: 1, // gpt-5-nano only supports default (1), not 0.2
     });
 
     const structuredModel = chat.withStructuredOutput(SynthesizerOutputSchema, {
diff --git a/src/lib/tools/trend-search/web-search.ts b/src/lib/tools/trend-search/web-search.ts
index 151bc9f5..2a49e9d7 100644
--- a/src/lib/tools/trend-search/web-search.ts
+++ b/src/lib/tools/trend-search/web-search.ts
@@ -26,53 +26,55 @@ function normalizeUrl(url: string): string {
  * Runs all sub-queries through a single provider with retry and URL deduplication.
  * @returns Combined RawSearchResult[] (deduplicated by URL).
  */
-async function executeWithProvider(
-  subQueries: PlannedQuery[],
+async function runSubQueryWithRetry(
+  query: string,
   provider: SearchProviderFn,
 ): Promise<RawSearchResult[]> {
-  const seenUrls = new Set<string>();
-  const combined: RawSearchResult[] = [];
+  let lastError: Error | null = null;
 
-  for (const sub of subQueries) {
-    const query = sub.searchQuery;
-    let lastError: Error | null = null;
-    let results: RawSearchResult[] = [];
-
-    for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
-      try {
-        results = await provider(query);
-        lastError = null;
-        break;
-      } catch (err) {
-        lastError = err instanceof Error ? err : new Error(String(err));
-        if (attempt < MAX_RETRIES) {
-          console.warn(
-            `[web-search] Sub-query failed (attempt ${
-              attempt + 1
-            }/${MAX_RETRIES + 1}): "${query.slice(0, 50)}..."`,
-            lastError.message,
-          );
-        } else {
-          console.error(
-            `[web-search] Sub-query failed after ${
-              MAX_RETRIES + 1
-            } attempts: "${query.slice(0, 50)}..."`,
-            lastError,
-          );
-        }
+  for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
+    try {
+      return await provider(query);
+    } catch (err) {
+      lastError = err instanceof Error ? err : new Error(String(err));
+      if (attempt < MAX_RETRIES) {
+        console.warn(
+          `[web-search] Sub-query failed (attempt ${
+            attempt + 1
+          }/${MAX_RETRIES + 1}): "${query.slice(0, 50)}..."`,
+          lastError.message,
+        );
+      } else {
+        console.error(
+          `[web-search] Sub-query failed after ${
+            MAX_RETRIES + 1
+          } attempts: "${query.slice(0, 50)}..."`,
+          lastError,
+        );
       }
     }
+  }
 
-    if (results.length === 0 && lastError) {
-      continue;
-    }
-    if (results.length === 0) {
-      console.warn(
-        `[web-search] Zero results for sub-query: "${query.slice(0, 80)}..."`,
-      );
-      continue;
-    }
+  if (lastError) return [];
+
+  console.warn(
+    `[web-search] Zero results for sub-query: "${query.slice(0, 80)}..."`,
+  );
+  return [];
+}
+
+async function executeWithProvider(
+  subQueries: PlannedQuery[],
+  provider: SearchProviderFn,
+): Promise<RawSearchResult[]> {
+  const perQueryResults = await Promise.all(
+    subQueries.map((sub) => runSubQueryWithRetry(sub.searchQuery, provider)),
+  );
+
+  const seenUrls = new Set<string>();
+  const combined: RawSearchResult[] = [];
 
+  for (const results of perQueryResults) {
     for (const r of results) {
       const normalizedUrl = normalizeUrl(r.url);
       if (normalizedUrl && !seenUrls.has(normalizedUrl)) {
diff --git a/src/server/db/schema/trend-search-cache.ts b/src/server/db/schema/trend-search-cache.ts
new file mode 100644
index 00000000..eab6fd9b
--- /dev/null
+++ b/src/server/db/schema/trend-search-cache.ts
@@ -0,0 +1,20 @@
+/**
+ * Persistent cache for trend search results.
+ * Survives serverless cold starts; dramatically reduces latency for repeated
+ * or similar queries (e.g. marketing pipeline runs with same prompt + context).
+ */
+import { sql } from "drizzle-orm";
+import type { InferSelectModel } from "drizzle-orm";
+import { jsonb, timestamp, varchar } from "drizzle-orm/pg-core";
+import { pgTable } from "./helpers";
+
+export const trendSearchCache = pgTable("trend_search_cache", {
+  cacheKey: varchar("cache_key", { length: 64 }).primaryKey(),
+  output: jsonb("output").notNull(),
+  expiresAt: timestamp("expires_at", { withTimezone: true }).notNull(),
+  createdAt: timestamp("created_at", { withTimezone: true })
+    .default(sql`CURRENT_TIMESTAMP`)
+    .notNull(),
+});
+
+export type TrendSearchCacheEntry = InferSelectModel<typeof trendSearchCache>;
diff --git a/src/styles/Employer/MarketingPipeline.module.css b/src/styles/Employer/MarketingPipeline.module.css
index 2cf42350..42a0b3d4 100644
--- a/src/styles/Employer/MarketingPipeline.module.css
+++ b/src/styles/Employer/MarketingPipeline.module.css
@@ -1,3 +1,95 @@
+/* New styles for marketing pipeline session history list and controls */
+.sessionPanel {
+    border-radius: 1rem;
+    border: 1px solid rgba(124, 58, 237, 0.18);
+    background: rgba(255, 255, 255, 0.88);
+    backdrop-filter: blur(8px);
+    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.08);
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
+}
+
+.sessionPanelHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.7rem;
+}
+
+.sessionPanelTitle {
+    margin: 0;
+    font-size: 0.9rem;
+    font-weight: 700;
+}
+
+.newSessionButton {
+    border-radius: 999px;
+    border: 1px solid var(--border);
+    background: transparent;
+    color: var(--muted-foreground);
+    font-size: 0.8rem;
+    padding: 0.25rem 0.7rem;
+    cursor: pointer;
+}
+
+.newSessionButton:hover {
+    background: rgba(124, 58, 237, 0.08);
+    color: var(--foreground);
+}
+
+.sessionEmpty {
+    margin: 0;
+    font-size: 0.82rem;
+    color: var(--muted-foreground);
+}
+
+.sessionList {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    /* Grow with content, then scroll after ~5 session rows */
+    max-height: calc((5 * 72px) + (4 * 0.5rem));
+    overflow: auto;
+    padding-right: 0.2rem;
+}
+
+.sessionItem {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+    width: 100%;
+    border-radius: 0.65rem;
+    border: 1px solid var(--border);
+    background: var(--background);
+    color: var(--foreground);
+    text-align: left;
+    padding: 0.6rem 0.7rem;
+    cursor: pointer;
+}
+
+.sessionItem:hover {
+    border-color: rgba(124, 58, 237, 0.35);
+    background: rgba(124, 58, 237, 0.06);
+}
+
+.sessionItemActive {
+    border-color: rgba(124, 58, 237, 0.45);
+    background: rgba(124, 58, 237, 0.11);
+}
+
+.sessionItemTitle {
+    font-size: 0.84rem;
+    font-weight: 600;
+    line-height: 1.35;
+}
+
+.sessionItemMeta {
+    font-size: 0.74rem;
+    color: var(--muted-foreground);
+}
 /* Back button in nav */
 .backNavButton {
     display: inline-flex;
@@ -21,7 +113,8 @@
 
 /* Main container with gradient background */
 .main {
-    max-width: 56rem;
+    width: 100%;
+    max-width: 1280px;
     margin: 0 auto;
     padding: 1.5rem 1.25rem 2rem;
     min-height: calc(100vh - 4rem);
@@ -512,517 +605,1956 @@
     box-shadow: 0 4px 16px rgba(124, 58, 237, 0.05);
 }
 
-.assistantSectionHeader {
-    font-weight: 700;
-    font-size: 0.95rem;
-    margin: 1.5rem 0 1rem 0;
-    background: linear-gradient(135deg, #374151 0%, #7c3aed 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+/* Platform preview card — post-style display */
+.platformPreviewCard {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(8px);
+    border: 1px solid var(--border);
+    border-radius: 0.875rem;
+    overflow: hidden;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
 }
 
-.researchList {
-    display: grid;
-    gap: 0.75rem;
-    margin-top: 0.75rem;
+.platformPreviewHeader {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border);
+    background: rgba(0, 0, 0, 0.02);
 }
 
-.researchItem {
-    background: rgba(255, 255, 255, 0.7);
-    backdrop-filter: blur(8px);
-    border: 1px solid rgba(124, 58, 237, 0.1);
-    border-radius: 0.75rem;
-    padding: 0.875rem;
-    transition: all 0.3s ease;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+.platformPreviewBadge {
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 0.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: #fff;
+    flex-shrink: 0;
 }
 
-.researchItem:hover {
-    transform: translateY(-1px);
-    border-color: rgba(124, 58, 237, 0.2);
-    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.08);
+.platformPreviewBadge img {
+    object-fit: contain;
 }
 
-.researchTitle {
-    font-weight: 700;
-    font-size: 0.9rem;
-    margin-bottom: 0.5rem;
-    line-height: 1.4;
+.platformPreviewBadgeReddit {
+    background: transparent;
 }
 
-.researchLink {
-    font-size: 0.825rem;
-    color: #3b82f6;
-    word-break: break-all;
-    text-decoration: none;
-    transition: color 0.2s ease;
+.platformPreviewBadgeImg {
+    width: 1.1rem;
+    height: 1.1rem;
 }
 
-.researchLink:hover {
-    color: #1d4ed8;
+.platformPreviewBadgeX {
+    background: #000;
 }
 
-/* Responsive design improvements */
-@media (max-width: 768px) {
-    .pageHeaderRow {
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-        gap: 1rem;
-    }
-    
-    .pageTitle {
-        font-size: 1.75rem;
-    }
-    
-    .pageSubtitle {
-        font-size: 1rem;
-    }
-    
-    .platformGrid {
-        grid-template-columns: 1fr;
-        gap: 1rem;
-    }
-    
-    .workspaceShell {
-        grid-template-columns: 1fr;
-        gap: 1.5rem;
-        padding: 1rem;
-    }
-    
-    .workspaceLeftHeader {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 1rem;
-    }
-    
-    .platformShell, .assistantCard {
-        padding: 1rem;
-    }
+.platformPreviewBadgeLinkedin {
+    background: #0a66c2;
 }
 
-@media (max-width: 480px) {
-    .main {
-        padding: 1rem 0.75rem;
-    }
-    
-    .pageTitle {
-        font-size: 1.5rem;
-    }
-    
-    .platformCard {
-        padding: 1.5rem 1rem;
-    }
-    
-    .platformLogo {
-        width: 3rem;
-        height: 3rem;
-        font-size: 1.25rem;
-    }
-}
-.error {
-    margin-top: 1rem;
-    padding: 1rem;
-    background: rgba(239, 68, 68, 0.1);
-    color: #dc2626;
-    border: 1px solid rgba(239, 68, 68, 0.2);
-    border-radius: 0.75rem;
-    backdrop-filter: blur(8px);
+.platformPreviewBadgeBluesky {
+    background: #0085ff;
 }
 
-.errorInline {
-    margin-top: 1rem;
-    font-size: 0.9rem;
-    color: #dc2626;
+.platformPreviewLabel {
+    flex: 1;
+    font-size: 0.8125rem;
     font-weight: 500;
+    color: var(--muted-foreground);
 }
 
-.researchSnippet {
-    margin-top: 0.35rem;
+.mediaBadge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.7rem;
     color: var(--muted-foreground);
+    padding: 0.2rem 0.5rem;
+    border-radius: 0.375rem;
+    background: rgba(124, 58, 237, 0.08);
+    color: var(--foreground);
 }
 
-.spinIcon {
-    animation: spin 1s linear infinite;
+.platformPreviewBody {
+    padding: 1rem 1.25rem;
+    font-size: 0.9rem;
+    line-height: 1.65;
+    color: var(--foreground);
 }
 
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
+.platformPreviewBody p {
+    margin: 0 0 0.75em 0;
 }
 
-@media (max-width: 960px) {
-    .workspaceShell {
-        grid-template-columns: minmax(0, 1fr);
-    }
-
-    .workspaceRight {
-        position: static;
-    }
+.platformPreviewBody p:last-child {
+    margin-bottom: 0;
 }
 
-@media (max-width: 720px) {
-    .platformGrid {
-        grid-template-columns: minmax(0, 1fr);
-    }
+.platformPreviewBody ul,
+.platformPreviewBody ol {
+    margin: 0.5em 0 0.75em;
+    padding-left: 1.25em;
 }
 
-/* New prompt + assistant refinements */
+.platformPreviewBody li {
+    margin-bottom: 0.25em;
+}
 
-.promptCard {
-    border-radius: 1rem;
-    border: 1px solid var(--border);
-    background: var(--card);
-    backdrop-filter: blur(8px);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
-    padding: 1.25rem 1.25rem 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.7rem;
+.platformPreviewBody strong {
+    font-weight: 600;
 }
 
-.promptHeaderRow {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 0.5rem;
+.platformPreviewBody a {
+    color: #0a66c2;
+    text-decoration: none;
 }
 
-.promptTitle {
-    margin: 0;
-    font-size: 0.9375rem;
-    font-weight: 600;
+.platformPreviewBody a:hover {
+    text-decoration: underline;
 }
 
-.promptHint {
-    font-size: 0.8125rem;
+.viewModeToggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 0.375rem;
+    border: 1px solid var(--border);
+    background: transparent;
     color: var(--muted-foreground);
+    cursor: pointer;
+    transition: all 0.2s;
 }
 
-.promptTextarea {
+.viewModeToggle:hover {
+    background: rgba(124, 58, 237, 0.08);
+    color: var(--foreground);
+}
+
+.editableMessageTextarea {
     width: 100%;
-    min-height: 100px;
+    min-height: 180px;
     resize: vertical;
-    border-radius: 10px;
     border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    padding: 0.75rem 1rem;
+    font-size: 0.9rem;
+    line-height: 1.6;
     background: var(--background);
     color: var(--foreground);
-    padding: 0.7rem;
-    line-height: 1.45;
+    outline: none;
 }
 
-.inlineAlert {
-    margin-top: 0.25rem;
-    margin-bottom: 0.1rem;
-    padding: 0.45rem 0.55rem;
-    border-radius: 0.6rem;
-    background: rgba(220, 38, 38, 0.08);
-    color: #b91c1c;
+.editableMessageTextarea:focus {
+    border-color: rgba(124, 58, 237, 0.4);
+    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
+}
+
+.draftActions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+
+.refineInRewriteButton {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid rgba(124, 58, 237, 0.3);
+    background: rgba(124, 58, 237, 0.08);
+    color: #7c3aed;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.refineInRewriteButton:hover:not(:disabled) {
+    background: rgba(124, 58, 237, 0.15);
+}
+
+.refineInRewriteButton:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.refineRow {
+    display: flex;
+    gap: 0.5rem;
+    align-items: stretch;
+}
+
+.refineInput {
+    flex: 1;
+    min-width: 0;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
     font-size: 0.85rem;
+    background: var(--background);
+    color: var(--foreground);
+    outline: none;
 }
 
-.generateButton {
+.refineInput:focus {
+    border-color: rgba(124, 58, 237, 0.4);
+}
+
+.refineButton {
     display: inline-flex;
     align-items: center;
-    gap: 0.4rem;
-    margin-top: 0.75rem;
-    border: 0;
+    gap: 0.35rem;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid rgba(124, 58, 237, 0.3);
+    background: rgba(124, 58, 237, 0.1);
+    color: #7c3aed;
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.refineButton:hover:not(:disabled) {
+    background: rgba(124, 58, 237, 0.2);
+}
+
+.refineButton:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.refineError {
+    margin: 0;
+    font-size: 0.8rem;
+    color: #dc2626;
+}
+
+.refineProposalCard {
+    border: 1px solid rgba(124, 58, 237, 0.25);
     border-radius: 0.75rem;
-    background: linear-gradient(135deg, #7c3aed, #7e22ce);
+    background: rgba(124, 58, 237, 0.04);
+    overflow: hidden;
+}
+
+.refineProposalHeader {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--foreground);
+    border-bottom: 1px solid rgba(124, 58, 237, 0.15);
+}
+
+.refineProposalBody {
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+    line-height: 1.6;
+}
+
+.refineProposalBody p {
+    margin: 0 0 0.5em 0;
+}
+
+.refineProposalBody p:last-child {
+    margin-bottom: 0;
+}
+
+.refineProposalActions {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-top: 1px solid rgba(124, 58, 237, 0.15);
+}
+
+.acceptButton {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.4rem 0.75rem;
+    border-radius: 0.5rem;
+    border: 0;
+    background: #16a34a;
     color: white;
-    padding: 0.6rem 1.25rem;
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.acceptButton:hover {
+    background: #15803d;
+}
+
+.discardButton {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.4rem 0.75rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--border);
+    background: transparent;
+    color: var(--muted-foreground);
+    font-size: 0.85rem;
+    cursor: pointer;
+}
+
+.discardButton:hover {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+.copyButton {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.35rem;
+    padding: 0.6rem 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid rgba(124, 58, 237, 0.3);
+    background: linear-gradient(135deg, #7e22ce 0%, #7c3aed 100%);
+    color: white;
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.copyButton:hover:not(:disabled) {
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
+}
+
+.copyButton:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.assistantSectionHeader {
+    font-weight: 700;
+    font-size: 0.95rem;
+    margin: 1.5rem 0 1rem 0;
+    background: linear-gradient(135deg, #374151 0%, #7c3aed 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.researchList {
+    display: grid;
+    gap: 0.75rem;
+    margin-top: 0.75rem;
+}
+
+.researchItem {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(124, 58, 237, 0.1);
+    border-radius: 0.75rem;
+    padding: 0.875rem;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.researchItem:hover {
+    transform: translateY(-1px);
+    border-color: rgba(124, 58, 237, 0.2);
+    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.08);
+}
+
+.researchTitle {
+    font-weight: 700;
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+    line-height: 1.4;
+}
+
+.researchLink {
+    font-size: 0.825rem;
+    color: #3b82f6;
+    word-break: break-all;
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+.researchLink:hover {
+    color: #1d4ed8;
+}
+
+/* Responsive design improvements */
+@media (max-width: 768px) {
+    .pageHeaderRow {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        gap: 1rem;
+    }
+    
+    .pageTitle {
+        font-size: 1.75rem;
+    }
+    
+    .pageSubtitle {
+        font-size: 1rem;
+    }
+    
+    .platformGrid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+    
+    .workspaceShell {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+        padding: 1rem;
+    }
+    
+    .workspaceLeftHeader {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+    
+    .platformShell, .assistantCard {
+        padding: 1rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .main {
+        padding: 1rem 0.75rem;
+    }
+    
+    .pageTitle {
+        font-size: 1.5rem;
+    }
+    
+    .platformCard {
+        padding: 1.5rem 1rem;
+    }
+    
+    .platformLogo {
+        width: 3rem;
+        height: 3rem;
+        font-size: 1.25rem;
+    }
+}
+.error {
+    margin-top: 1rem;
+    padding: 1rem;
+    background: rgba(239, 68, 68, 0.1);
+    color: #dc2626;
+    border: 1px solid rgba(239, 68, 68, 0.2);
+    border-radius: 0.75rem;
+    backdrop-filter: blur(8px);
+}
+
+.errorInline {
+    margin-top: 1rem;
+    font-size: 0.9rem;
+    color: #dc2626;
+    font-weight: 500;
+}
+
+.researchSnippet {
+    margin-top: 0.35rem;
+    color: var(--muted-foreground);
+}
+
+.spinIcon {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (max-width: 960px) {
+    .workspaceShell {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .workspaceRight {
+        position: static;
+    }
+}
+
+@media (max-width: 720px) {
+    .platformGrid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+/* New prompt + assistant refinements */
+
+.promptCard {
+    border-radius: 1rem;
+    border: 1px solid var(--border);
+    background: var(--card);
+    backdrop-filter: blur(8px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
+    padding: 1.25rem 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.7rem;
+}
+
+.promptHeaderRow {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.5rem;
+}
+
+.promptTitle {
+    margin: 0;
+    font-size: 0.9375rem;
+    font-weight: 600;
+}
+
+.promptHint {
+    font-size: 0.8125rem;
+    color: var(--muted-foreground);
+}
+
+.promptTextarea {
+    width: 100%;
+    min-height: 100px;
+    resize: vertical;
+    border-radius: 10px;
+    border: 1px solid var(--border);
+    background: var(--background);
+    color: var(--foreground);
+    padding: 0.7rem;
+    line-height: 1.45;
+}
+
+.inlineAlert {
+    margin-top: 0.25rem;
+    margin-bottom: 0.1rem;
+    padding: 0.45rem 0.55rem;
+    border-radius: 0.6rem;
+    background: rgba(220, 38, 38, 0.08);
+    color: #b91c1c;
+    font-size: 0.85rem;
+}
+
+.generateButton {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin-top: 0.75rem;
+    border: 0;
+    border-radius: 0.75rem;
+    background: linear-gradient(135deg, #7c3aed, #7e22ce);
+    color: white;
+    padding: 0.6rem 1.25rem;
+    font-weight: 600;
+    cursor: pointer;
+    box-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.3);
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.generateButton:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 12px -2px rgba(124, 58, 237, 0.4);
+}
+
+.generateButton:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+
+.assistantEmptyState {
+    font-size: 0.8125rem;
+    color: var(--muted-foreground);
+    margin: 0;
+}
+
+.assistantSectionHeader {
+    margin-top: 0.6rem;
+    margin-bottom: 0.45rem;
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+
+.assistantResult {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+.workspaceLeftHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.8rem;
+}
+
+.selectedPlatformPill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    border-radius: 999px;
+    border: 1px solid var(--border);
+    padding: 0.35rem 0.6rem;
+    font-size: 0.9rem;
+}
+
+.selectedPlatformLabel {
+    font-weight: 500;
+}
+
+.changePlatformButton {
+    border-radius: 999px;
+    border: 1px solid var(--border);
+    background: transparent;
+    color: var(--muted-foreground);
+    font-size: 0.85rem;
+    padding: 0.3rem 0.7rem;
+    cursor: pointer;
+}
+
+.platformShell {
+    border-radius: 0.75rem;
+    border: 1px solid var(--border);
+    background: var(--card);
+    backdrop-filter: blur(8px);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+    padding: 1rem 1.25rem;
+}
+
+.platformShellTitle {
+    margin: 0 0 0.85rem 0;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: var(--foreground);
+}
+
+/* Animation and loading states */
+.spinIcon {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Enhanced hover animations */
+.platformShell {
+    animation: fadeInUp 0.5s ease-out;
+}
+
+.workspaceShell {
+    animation: fadeInUp 0.6s ease-out;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Improved focus states */
+.generateButton:focus {
+    outline: 2px solid rgba(124, 58, 237, 0.5);
+    outline-offset: 2px;
+}
+
+.changePlatformButton:focus {
+    outline: 2px solid rgba(124, 58, 237, 0.3);
+    outline-offset: 2px;
+}
+
+.textarea:focus {
+    outline: none; /* Already handled above */
+}
+
+/* Final layout overrides: use top-down flow instead of left-right */
+.workspaceLayout {
+    grid-template-columns: 250px minmax(0, 1fr) !important;
+    display: grid;
+    gap: 1.25rem !important;
+    align-items: start;
+}
+
+.workspaceShell {
+    grid-template-columns: minmax(0, 1fr) !important;
+    display: grid;
+    gap: 1.25rem !important;
+}
+
+.sessionSidebar {
+    position: sticky;
+    top: 1.25rem;
+}
+
+.workspaceMain {
+    display: grid;
+    grid-template-columns: minmax(520px, 1.35fr) minmax(360px, 1fr);
+    gap: 1.25rem;
+    align-items: flex-start;
+}
+
+.workspaceMainSingle {
+    grid-template-columns: minmax(0, 1fr);
+}
+
+.workspaceLeft {
+    min-width: 0;
+}
+
+.workspaceMainHeader {
+    grid-column: 1 / -1;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.1rem 0 0.35rem;
+}
+
+.workspaceMainTitle {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--foreground);
+}
+
+.assistantContent {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+.workspaceRight {
+    position: static !important;
+    top: auto !important;
+}
+
+@media (max-width: 1200px) {
+    .workspaceMain {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+@media (max-width: 960px) {
+    .workspaceLayout {
+        grid-template-columns: minmax(0, 1fr) !important;
+    }
+
+    .sessionSidebar {
+        position: static;
+        top: auto;
+    }
+}
+
+/* Keep long assistant output readable */
+.assistantResult {
+    gap: 0.6rem !important;
+}
+
+.outputBlock {
+    max-height: 220px;
+    overflow: auto;
+}
+
+.researchList {
+    max-height: 360px;
+    overflow: auto;
+    padding-right: 0.25rem;
+}
+
+.researchSnippet {
+    display: -webkit-box;
+    line-clamp: 3;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* ─── Pipeline stepper ─── */
+
+.pipelineStepper {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    padding: 0.75rem 0;
+}
+
+.stepperItem {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 0.45rem 0;
+    position: relative;
+}
+
+.stepperItem:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    left: 0.5rem;
+    top: 1.6rem;
+    bottom: -0.2rem;
+    width: 2px;
+    background: var(--border);
+    transition: background 0.3s ease;
+}
+
+.stepperCompleted:not(:last-child)::after {
+    background: #16a34a;
+}
+
+.stepperActive:not(:last-child)::after {
+    background: linear-gradient(to bottom, #7c3aed 30%, var(--border) 100%);
+}
+
+.stepperIndicator {
+    width: 1.125rem;
+    height: 1.125rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    flex-shrink: 0;
+    margin-top: 0.1rem;
+    position: relative;
+    z-index: 1;
+}
+
+.stepperPending .stepperIndicator {
+    color: var(--muted-foreground);
+    opacity: 0.35;
+}
+
+.stepperActive .stepperIndicator {
+    color: #7c3aed;
+}
+
+.stepperCompleted .stepperIndicator {
+    color: #16a34a;
+}
+
+.stepperContent {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    min-width: 0;
+}
+
+.stepperLabel {
+    font-size: 0.85rem;
+    font-weight: 500;
+    line-height: 1.35;
+}
+
+.stepperPending .stepperLabel {
+    color: var(--muted-foreground);
+    opacity: 0.5;
+}
+
+.stepperActive .stepperLabel {
+    color: var(--foreground);
+    font-weight: 600;
+}
+
+.stepperCompleted .stepperLabel {
+    color: var(--foreground);
+}
+
+.stepperMeta {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    flex-wrap: wrap;
+}
+
+.stepperDuration {
+    font-size: 0.7rem;
+    color: var(--muted-foreground);
+    font-variant-numeric: tabular-nums;
+    background: rgba(22, 163, 106, 0.08);
+    padding: 0.05rem 0.35rem;
+    border-radius: 0.25rem;
+}
+
+.stepperDetail {
+    font-size: 0.7rem;
+    color: var(--muted-foreground);
+    font-style: italic;
+}
+
+/* ─── How-it-works (Fix 1) ─── */
+
+.howItWorks {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+    margin-bottom: 1.5rem;
+    padding: 0.75rem 0;
+}
+
+.howItWorksStep {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0 0.75rem;
+}
+
+.howItWorksNumber {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #7c3aed, #7e22ce);
+    color: white;
+    flex-shrink: 0;
+}
+
+.howItWorksText {
+    font-size: 0.85rem;
+    color: var(--muted-foreground);
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.howItWorksDivider {
+    width: 2rem;
+    height: 1px;
+    background: var(--border);
+    flex-shrink: 0;
+}
+
+/* ─── Platform card enrichments (Fix 1) ─── */
+
+.platformBestFor {
+    font-size: 0.78rem;
+    color: var(--muted-foreground);
+    opacity: 0.8;
+    position: relative;
+    z-index: 2;
+}
+
+.platformCharLimit {
+    font-size: 0.7rem;
+    color: var(--muted-foreground);
+    opacity: 0.6;
+    font-variant-numeric: tabular-nums;
+    padding: 0.1rem 0.5rem;
+    border-radius: 999px;
+    background: rgba(124, 58, 237, 0.06);
+    position: relative;
+    z-index: 2;
+}
+
+/* ─── Prompt chips (Fix 2) ─── */
+
+.promptChips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    margin-top: 0.25rem;
+}
+
+.promptChip {
+    display: inline-block;
+    padding: 0.35rem 0.7rem;
+    border-radius: 999px;
+    border: 1px solid var(--border);
+    background: transparent;
+    color: var(--muted-foreground);
+    font-size: 0.78rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: left;
+    line-height: 1.35;
+}
+
+.promptChip:hover {
+    border-color: rgba(124, 58, 237, 0.4);
+    background: rgba(124, 58, 237, 0.06);
+    color: var(--foreground);
+}
+
+/* ─── Generate row with cancel (Fix 3) ─── */
+
+.generateRow {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+}
+
+.cancelButton {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.6rem 1rem;
+    border-radius: 0.75rem;
+    border: 1px solid var(--border);
+    background: transparent;
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.cancelButton:hover {
+    border-color: rgba(239, 68, 68, 0.4);
+    background: rgba(239, 68, 68, 0.06);
+    color: #dc2626;
+}
+
+/* ─── Stepper header (Fix 3) ─── */
+
+.stepperHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+    padding: 0 0.1rem;
+}
+
+.stepperProgress {
+    font-size: 0.78rem;
+    font-weight: 600;
+    color: var(--foreground);
+}
+
+.stepperElapsed {
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+    font-variant-numeric: tabular-nums;
+}
+
+/* ─── Action button hierarchy (Fix 4) ─── */
+
+.actionPrimary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.6rem 1.15rem;
+    border-radius: 0.5rem;
+    border: none;
+    background: linear-gradient(135deg, #7e22ce 0%, #7c3aed 100%);
+    color: white;
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
+    margin-left: auto;
+}
+
+.actionPrimary:hover:not(:disabled) {
+    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.4);
+    transform: translateY(-1px);
+}
+
+.actionPrimary:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.actionSecondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid rgba(124, 58, 237, 0.3);
+    background: rgba(124, 58, 237, 0.06);
+    color: #7c3aed;
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.actionSecondary:hover:not(:disabled) {
+    background: rgba(124, 58, 237, 0.12);
+}
+
+.actionSecondary:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.actionTertiary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.5rem;
+    border: none;
+    background: transparent;
+    color: var(--muted-foreground);
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.actionTertiary:hover:not(:disabled) {
+    background: rgba(0, 0, 0, 0.04);
+    color: var(--foreground);
+}
+
+.actionTertiary:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* ─── Strategy insights card (Fix 6) ─── */
+
+.strategyCard {
+    border-radius: 0.75rem;
+    border: 1px solid var(--border);
+    background: var(--card);
+    margin-top: 0.5rem;
+    overflow: hidden;
+}
+
+.strategyToggle {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    width: 100%;
+    padding: 0.65rem 0.85rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--foreground);
+    text-align: left;
+    transition: background 0.15s ease;
+}
+
+.strategyToggle:hover {
+    background: rgba(124, 58, 237, 0.04);
+}
+
+.strategyContent {
+    padding: 0 0.85rem 0.85rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    border-top: 1px solid var(--border);
+    padding-top: 0.75rem;
+}
+
+.strategySection {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+}
+
+.strategySectionLabel {
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--muted-foreground);
+}
+
+.strategySectionText {
+    margin: 0;
+    font-size: 0.85rem;
+    line-height: 1.5;
+    color: var(--foreground);
+}
+
+.strategyList {
+    margin: 0.15rem 0 0;
+    padding-left: 1.1rem;
+    font-size: 0.83rem;
+    line-height: 1.5;
+    color: var(--foreground);
+}
+
+.strategyList li {
+    margin-bottom: 0.2rem;
+}
+
+/* ─── Confirmation bar (Fix 7) ─── */
+
+.confirmBar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 0.6rem 0.85rem;
+    border-radius: 0.65rem;
+    background: rgba(250, 204, 21, 0.08);
+    border: 1px solid rgba(250, 204, 21, 0.25);
+    font-size: 0.82rem;
+    color: var(--foreground);
+    flex-wrap: wrap;
+}
+
+.confirmBarActions {
+    display: flex;
+    gap: 0.35rem;
+    flex-shrink: 0;
+}
+
+.confirmBarYes {
+    padding: 0.3rem 0.6rem;
+    border-radius: 0.4rem;
+    border: none;
+    background: linear-gradient(135deg, #7c3aed, #7e22ce);
+    color: white;
+    font-size: 0.78rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.confirmBarNo {
+    padding: 0.3rem 0.6rem;
+    border-radius: 0.4rem;
+    border: 1px solid var(--border);
+    background: transparent;
+    color: var(--muted-foreground);
+    font-size: 0.78rem;
+    cursor: pointer;
+}
+
+/* ─── Workspace single layout (Fix 5) ─── */
+
+.workspaceLayoutSingle {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) !important;
+    gap: 1.25rem !important;
+    align-items: start;
+}
+
+@media (max-width: 768px) {
+    .howItWorks {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .howItWorksDivider {
+        width: 1px;
+        height: 1rem;
+    }
+
+    .promptChips {
+        flex-direction: column;
+    }
+
+    .draftActions {
+        flex-direction: column;
+    }
+
+    .actionPrimary {
+        margin-left: 0;
+        width: 100%;
+        justify-content: center;
+    }
+
+    .confirmBar {
+        flex-direction: column;
+        text-align: center;
+    }
+}
+
+/* ─── Dark theme overrides ─── */
+
+[data-theme="dark"] .main {
+    background: transparent;
+}
+
+[data-theme="dark"] .platformCard {
+    background: rgba(15, 15, 30, 0.55);
+    border-color: rgba(139, 92, 246, 0.2);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(139, 92, 246, 0.08);
+}
+
+[data-theme="dark"] .platformCard::before {
+    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(79, 70, 229, 0.12) 100%);
+}
+
+[data-theme="dark"] .platformCard:hover {
+    border-color: rgba(139, 92, 246, 0.5);
+    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.2), 0 8px 30px rgba(0, 0, 0, 0.4);
+}
+
+[data-theme="dark"] .platformShellTitle {
+    background: linear-gradient(135deg, #e5e7eb 0%, #a78bfa 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+[data-theme="dark"] .platformLogoX {
+    background: #1a1a2e;
+    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.3), 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+[data-theme="dark"] .workspaceShell {
+    background: rgba(15, 15, 30, 0.55);
+    border-color: rgba(139, 92, 246, 0.15);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(139, 92, 246, 0.06);
+}
+
+[data-theme="dark"] .workspaceLeftHeader {
+    border-bottom-color: rgba(139, 92, 246, 0.2);
+}
+
+[data-theme="dark"] .textarea {
+    background: rgba(15, 15, 30, 0.6);
+    border-color: rgba(139, 92, 246, 0.25);
+}
+
+[data-theme="dark"] .textarea:focus {
+    border-color: rgba(167, 139, 250, 0.5);
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15), 0 4px 16px rgba(139, 92, 246, 0.12);
+}
+
+[data-theme="dark"] .assistantCard {
+    background: rgba(15, 15, 30, 0.55);
+    border-color: rgba(139, 92, 246, 0.15);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(139, 92, 246, 0.06);
+}
+
+[data-theme="dark"] .assistantCard:hover {
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(139, 92, 246, 0.1);
+}
+
+[data-theme="dark"] .assistantIcon {
+    color: #a78bfa;
+}
+
+[data-theme="dark"] .assistantTitle {
+    background: linear-gradient(135deg, #e5e7eb 0%, #a78bfa 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+[data-theme="dark"] .assistantSectionHeader {
+    background: linear-gradient(135deg, #e5e7eb 0%, #c084fc 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+[data-theme="dark"] .outputBlock {
+    background: rgba(15, 15, 30, 0.6);
+    border-color: rgba(139, 92, 246, 0.2);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme="dark"] .researchItem {
+    background: rgba(15, 15, 30, 0.5);
+    border-color: rgba(139, 92, 246, 0.15);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme="dark"] .researchItem:hover {
+    border-color: rgba(139, 92, 246, 0.3);
+    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.12);
+}
+
+[data-theme="dark"] .researchLink {
+    color: #818cf8;
+}
+
+[data-theme="dark"] .researchLink:hover {
+    color: #a5b4fc;
+}
+
+[data-theme="dark"] .error {
+    background: rgba(239, 68, 68, 0.15);
+    color: #fca5a5;
+    border-color: rgba(239, 68, 68, 0.3);
+}
+
+[data-theme="dark"] .errorInline {
+    color: #fca5a5;
+}
+
+[data-theme="dark"] .inlineAlert {
+    background: rgba(220, 38, 38, 0.15);
+    color: #fca5a5;
+}
+
+[data-theme="dark"] .backNavButton:hover {
+    background: rgba(139, 92, 246, 0.15);
+}
+
+[data-theme="dark"] .refineProposalCard {
+    border-color: rgba(139, 92, 246, 0.3);
+    background: rgba(139, 92, 246, 0.08);
+}
+
+[data-theme="dark"] .refineButton {
+    border-color: rgba(139, 92, 246, 0.4);
+    background: rgba(139, 92, 246, 0.15);
+    color: #a78bfa;
+}
+
+[data-theme="dark"] .refineButton:hover:not(:disabled) {
+    background: rgba(139, 92, 246, 0.25);
+}
+
+[data-theme="dark"] .refineInRewriteButton {
+    border-color: rgba(139, 92, 246, 0.4);
+    background: rgba(139, 92, 246, 0.12);
+    color: #a78bfa;
+}
+
+[data-theme="dark"] .refineInRewriteButton:hover:not(:disabled) {
+    background: rgba(139, 92, 246, 0.22);
+}
+
+[data-theme="dark"] .platformPreviewCard {
+    background: rgba(15, 15, 30, 0.7);
+    border-color: rgba(139, 92, 246, 0.2);
+}
+
+[data-theme="dark"] .platformPreviewHeader {
+    background: rgba(0, 0, 0, 0.2);
+    border-bottom-color: rgba(139, 92, 246, 0.15);
+}
+
+[data-theme="dark"] .mediaBadge {
+    background: rgba(139, 92, 246, 0.15);
+}
+
+/* Session sidebar dark mode — ensure readable text on dark background */
+[data-theme="dark"] .sessionPanel {
+    background: rgba(15, 15, 30, 0.85);
+    border-color: rgba(139, 92, 246, 0.2);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(139, 92, 246, 0.06);
+}
+
+[data-theme="dark"] .sessionPanelTitle {
+    color: var(--foreground);
+}
+
+[data-theme="dark"] .newSessionButton {
+    color: var(--muted-foreground);
+    border-color: rgba(139, 92, 246, 0.3);
+}
+
+[data-theme="dark"] .newSessionButton:hover {
+    background: rgba(139, 92, 246, 0.15);
+    color: var(--foreground);
+}
+
+[data-theme="dark"] .sessionEmpty {
+    color: var(--muted-foreground);
+}
+
+[data-theme="dark"] .sessionItem {
+    background: rgba(30, 30, 50, 0.6);
+    border-color: rgba(139, 92, 246, 0.2);
+    color: var(--foreground);
+}
+
+[data-theme="dark"] .sessionItem:hover {
+    border-color: rgba(139, 92, 246, 0.4);
+    background: rgba(139, 92, 246, 0.1);
+}
+
+[data-theme="dark"] .sessionItemActive {
+    border-color: rgba(139, 92, 246, 0.5);
+    background: rgba(139, 92, 246, 0.18);
+}
+
+[data-theme="dark"] .sessionItemTitle {
+    color: var(--foreground);
+}
+
+[data-theme="dark"] .sessionItemMeta {
+    color: var(--muted-foreground);
+}
+
+[data-theme="dark"] .stepperActive .stepperIndicator {
+    color: #a78bfa;
+}
+
+[data-theme="dark"] .stepperCompleted .stepperIndicator {
+    color: #4ade80;
+}
+
+[data-theme="dark"] .stepperCompleted:not(:last-child)::after {
+    background: #4ade80;
+}
+
+[data-theme="dark"] .stepperActive:not(:last-child)::after {
+    background: linear-gradient(to bottom, #a78bfa 30%, var(--border) 100%);
+}
+
+[data-theme="dark"] .stepperDuration {
+    background: rgba(74, 222, 128, 0.1);
+}
+
+[data-theme="dark"] .howItWorksText {
+    color: var(--muted-foreground);
+}
+
+[data-theme="dark"] .howItWorksDivider {
+    background: rgba(139, 92, 246, 0.25);
+}
+
+[data-theme="dark"] .platformCharLimit {
+    background: rgba(139, 92, 246, 0.12);
+}
+
+[data-theme="dark"] .promptChip {
+    border-color: rgba(139, 92, 246, 0.25);
+    color: var(--muted-foreground);
+}
+
+[data-theme="dark"] .promptChip:hover {
+    border-color: rgba(139, 92, 246, 0.5);
+    background: rgba(139, 92, 246, 0.1);
+    color: var(--foreground);
+}
+
+[data-theme="dark"] .cancelButton {
+    border-color: rgba(139, 92, 246, 0.25);
+}
+
+[data-theme="dark"] .cancelButton:hover {
+    border-color: rgba(239, 68, 68, 0.5);
+    background: rgba(239, 68, 68, 0.12);
+    color: #fca5a5;
+}
+
+[data-theme="dark"] .actionSecondary {
+    border-color: rgba(139, 92, 246, 0.4);
+    background: rgba(139, 92, 246, 0.12);
+    color: #a78bfa;
+}
+
+[data-theme="dark"] .actionSecondary:hover:not(:disabled) {
+    background: rgba(139, 92, 246, 0.22);
+}
+
+[data-theme="dark"] .actionTertiary:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.06);
+}
+
+[data-theme="dark"] .strategyCard {
+    background: rgba(15, 15, 30, 0.6);
+    border-color: rgba(139, 92, 246, 0.2);
+}
+
+[data-theme="dark"] .strategyToggle:hover {
+    background: rgba(139, 92, 246, 0.08);
+}
+
+[data-theme="dark"] .strategyContent {
+    border-top-color: rgba(139, 92, 246, 0.15);
+}
+
+[data-theme="dark"] .confirmBar {
+    background: rgba(250, 204, 21, 0.06);
+    border-color: rgba(250, 204, 21, 0.2);
+}
+
+/* ──────────────────────────────────────────────────────────────
+ * Platform-specific fields (subreddit / hashtags)
+ * ────────────────────────────────────────────────────────────── */
+
+.platformFieldsSection {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-top: 0.75rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--border, #e5e7eb);
+}
+
+.platformFieldGroup {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+}
+
+.platformFieldLabel {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.75rem;
     font-weight: 600;
-    cursor: pointer;
-    box-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.3);
-    transition: transform 0.15s ease, box-shadow 0.15s ease;
+    color: var(--text-muted, #6b7280);
 }
 
-.generateButton:hover:not(:disabled) {
-    transform: translateY(-1px);
-    box-shadow: 0 6px 12px -2px rgba(124, 58, 237, 0.4);
+.platformFieldCount {
+    font-weight: 400;
+    color: var(--text-muted, #9ca3af);
+    font-size: 0.6875rem;
 }
 
-.generateButton:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
+.subredditInputWrapper {
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--border, #e5e7eb);
+    border-radius: 0.5rem;
+    background: var(--bg-primary, #fff);
+    overflow: hidden;
 }
 
+.subredditPrefix {
+    padding: 0.5rem 0 0.5rem 0.75rem;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--text-muted, #6b7280);
+    user-select: none;
+}
 
-.assistantEmptyState {
+.subredditInput {
+    flex: 1;
+    padding: 0.5rem 0.75rem 0.5rem 0;
     font-size: 0.8125rem;
-    color: var(--muted-foreground);
-    margin: 0;
+    border: none;
+    background: transparent;
+    outline: none;
+    color: var(--foreground, #111);
 }
 
-.assistantSectionHeader {
-    margin-top: 0.6rem;
-    margin-bottom: 0.45rem;
-    font-size: 0.9rem;
-    font-weight: 600;
+.subredditDropdown {
+    position: absolute;
+    top: calc(100% + 2px);
+    left: 0;
+    right: 0;
+    z-index: 20;
+    background: var(--bg-primary, #fff);
+    border: 1px solid var(--border, #e5e7eb);
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    max-height: 10rem;
+    overflow-y: auto;
 }
 
-.assistantResult {
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
+.subredditOption {
+    display: block;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8125rem;
+    text-align: left;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--foreground, #111);
 }
 
-.workspaceLeftHeader {
+.subredditOption:hover {
+    background: var(--accent, #f3f4f6);
+}
+
+.hashtagInputContainer {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    justify-content: space-between;
-    gap: 0.8rem;
+    gap: 0.375rem;
+    padding: 0.375rem 0.5rem;
+    border: 1px solid var(--border, #e5e7eb);
+    border-radius: 0.5rem;
+    background: var(--bg-primary, #fff);
+    min-height: 2.25rem;
 }
 
-.selectedPlatformPill {
+.hashtagTag {
     display: inline-flex;
     align-items: center;
-    gap: 0.4rem;
-    border-radius: 999px;
-    border: 1px solid var(--border);
-    padding: 0.35rem 0.6rem;
-    font-size: 0.9rem;
-}
-
-.selectedPlatformLabel {
+    gap: 0.25rem;
+    padding: 0.125rem 0.375rem 0.125rem 0.5rem;
+    font-size: 0.75rem;
     font-weight: 500;
+    color: #7c3aed;
+    background: rgba(139, 92, 246, 0.1);
+    border-radius: 9999px;
+    white-space: nowrap;
 }
 
-.changePlatformButton {
-    border-radius: 999px;
-    border: 1px solid var(--border);
-    background: transparent;
-    color: var(--muted-foreground);
-    font-size: 0.85rem;
-    padding: 0.3rem 0.7rem;
+.hashtagTagRemove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    background: none;
+    border: none;
+    border-radius: 50%;
     cursor: pointer;
+    color: #7c3aed;
+    padding: 0;
 }
 
-.platformShell {
-    border-radius: 0.75rem;
-    border: 1px solid var(--border);
-    background: var(--card);
-    backdrop-filter: blur(8px);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-    padding: 1rem 1.25rem;
-}
-
-.platformShellTitle {
-    margin: 0 0 0.85rem 0;
-    font-size: 0.9375rem;
-    font-weight: 600;
-    color: var(--foreground);
+.hashtagTagRemove:hover {
+    background: rgba(139, 92, 246, 0.2);
 }
 
-/* Animation and loading states */
-.spinIcon {
-    animation: spin 1s linear infinite;
+.hashtagInput {
+    flex: 1;
+    min-width: 5rem;
+    padding: 0.125rem 0;
+    font-size: 0.8125rem;
+    border: none;
+    background: transparent;
+    outline: none;
+    color: var(--foreground, #111);
 }
 
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
+.hashtagSuggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+    margin-top: 0.125rem;
 }
 
-/* Enhanced hover animations */
-.platformShell {
-    animation: fadeInUp 0.5s ease-out;
+.hashtagSuggestionChip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.125rem;
+    padding: 0.125rem 0.5rem;
+    font-size: 0.6875rem;
+    color: var(--text-muted, #6b7280);
+    background: none;
+    border: 1px dashed var(--border, #d1d5db);
+    border-radius: 9999px;
+    cursor: pointer;
+    transition: all 0.15s ease;
 }
 
-.workspaceShell {
-    animation: fadeInUp 0.6s ease-out;
+.hashtagSuggestionChip:hover {
+    border-color: #7c3aed;
+    color: #7c3aed;
+    background: rgba(139, 92, 246, 0.06);
 }
 
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
+/* ──────────────────────────────────────────────────────────────
+ * Variant stack
+ * ────────────────────────────────────────────────────────────── */
 
-/* Improved focus states */
-.generateButton:focus {
-    outline: 2px solid rgba(124, 58, 237, 0.5);
-    outline-offset: 2px;
+.variantStack {
+    margin-top: 1rem;
+    border: 1px solid var(--border, #e5e7eb);
+    border-radius: 0.75rem;
+    overflow: hidden;
 }
 
-.changePlatformButton:focus {
-    outline: 2px solid rgba(124, 58, 237, 0.3);
-    outline-offset: 2px;
+.variantStackHeader {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--text-muted, #6b7280);
+    background: var(--bg-secondary, #f9fafb);
+    border-bottom: 1px solid var(--border, #e5e7eb);
 }
 
-.textarea:focus {
-    outline: none; /* Already handled above */
+.variantCard {
+    padding: 0.625rem 0.75rem;
+    border-bottom: 1px solid var(--border, #e5e7eb);
+    transition: background 0.15s ease;
 }
 
-/* Final layout overrides: use top-down flow instead of left-right */
-.workspaceShell {
-    grid-template-columns: minmax(0, 1fr) !important;
-    gap: 1.25rem !important;
+.variantCard:last-child {
+    border-bottom: none;
 }
 
-.workspaceRight {
-    position: static !important;
-    top: auto !important;
+.variantCard:hover {
+    background: var(--accent, #f9fafb);
 }
 
-/* Keep long assistant output readable */
-.assistantResult {
-    gap: 0.6rem !important;
+.variantCardActive {
+    background: rgba(139, 92, 246, 0.04);
+    border-left: 3px solid #7c3aed;
 }
 
-.outputBlock {
-    max-height: 220px;
-    overflow: auto;
+.variantCardHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.25rem;
 }
 
-.researchList {
-    max-height: 360px;
-    overflow: auto;
-    padding-right: 0.25rem;
+.variantLabel {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--foreground, #111);
 }
 
-.researchSnippet {
+.variantPreview {
+    font-size: 0.6875rem;
+    color: var(--text-muted, #6b7280);
+    line-height: 1.4;
+    overflow: hidden;
     display: -webkit-box;
-    -webkit-line-clamp: 3;
+    -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
-    overflow: hidden;
+    margin: 0;
 }
 
-/* ─── Dark theme overrides ─── */
+.variantActiveBadge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.125rem 0.5rem;
+    font-size: 0.625rem;
+    font-weight: 600;
+    color: #7c3aed;
+    background: rgba(139, 92, 246, 0.1);
+    border-radius: 9999px;
+}
 
-[data-theme="dark"] .main {
-    background: transparent;
+.variantUseButton {
+    padding: 0.125rem 0.625rem;
+    font-size: 0.6875rem;
+    font-weight: 500;
+    color: var(--text-muted, #6b7280);
+    background: none;
+    border: 1px solid var(--border, #d1d5db);
+    border-radius: 0.375rem;
+    cursor: pointer;
+    transition: all 0.15s ease;
 }
 
-[data-theme="dark"] .platformCard {
-    background: rgba(15, 15, 30, 0.55);
-    border-color: rgba(139, 92, 246, 0.2);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(139, 92, 246, 0.08);
+.variantUseButton:hover {
+    border-color: #7c3aed;
+    color: #7c3aed;
+    background: rgba(139, 92, 246, 0.06);
 }
 
-[data-theme="dark"] .platformCard::before {
-    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(79, 70, 229, 0.12) 100%);
+/* ──────────────────────────────────────────────────────────────
+ * Dark theme — platform fields + variants
+ * ────────────────────────────────────────────────────────────── */
+
+[data-theme="dark"] .platformFieldsSection {
+    border-top-color: rgba(139, 92, 246, 0.15);
 }
 
-[data-theme="dark"] .platformCard:hover {
-    border-color: rgba(139, 92, 246, 0.5);
-    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.2), 0 8px 30px rgba(0, 0, 0, 0.4);
+[data-theme="dark"] .subredditInputWrapper {
+    background: rgba(15, 15, 30, 0.5);
+    border-color: rgba(139, 92, 246, 0.25);
 }
 
-[data-theme="dark"] .platformShellTitle {
-    background: linear-gradient(135deg, #e5e7eb 0%, #a78bfa 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+[data-theme="dark"] .subredditInput {
+    color: var(--foreground);
 }
 
-[data-theme="dark"] .platformLogoX {
-    background: #1a1a2e;
-    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.3), 0 8px 25px rgba(0, 0, 0, 0.15);
+[data-theme="dark"] .subredditDropdown {
+    background: var(--bg-primary);
+    border-color: rgba(139, 92, 246, 0.3);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
 }
 
-[data-theme="dark"] .workspaceShell {
-    background: rgba(15, 15, 30, 0.55);
-    border-color: rgba(139, 92, 246, 0.15);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(139, 92, 246, 0.06);
+[data-theme="dark"] .subredditOption {
+    color: var(--foreground);
 }
 
-[data-theme="dark"] .workspaceLeftHeader {
-    border-bottom-color: rgba(139, 92, 246, 0.2);
+[data-theme="dark"] .subredditOption:hover {
+    background: rgba(139, 92, 246, 0.12);
 }
 
-[data-theme="dark"] .textarea {
-    background: rgba(15, 15, 30, 0.6);
+[data-theme="dark"] .hashtagInputContainer {
+    background: rgba(15, 15, 30, 0.5);
     border-color: rgba(139, 92, 246, 0.25);
 }
 
-[data-theme="dark"] .textarea:focus {
-    border-color: rgba(167, 139, 250, 0.5);
-    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15), 0 4px 16px rgba(139, 92, 246, 0.12);
+[data-theme="dark"] .hashtagTag {
+    color: #a78bfa;
+    background: rgba(139, 92, 246, 0.15);
 }
 
-[data-theme="dark"] .assistantCard {
-    background: rgba(15, 15, 30, 0.55);
-    border-color: rgba(139, 92, 246, 0.15);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(139, 92, 246, 0.06);
+[data-theme="dark"] .hashtagTagRemove {
+    color: #a78bfa;
 }
 
-[data-theme="dark"] .assistantCard:hover {
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(139, 92, 246, 0.1);
+[data-theme="dark"] .hashtagTagRemove:hover {
+    background: rgba(139, 92, 246, 0.3);
 }
 
-[data-theme="dark"] .assistantIcon {
-    color: #a78bfa;
+[data-theme="dark"] .hashtagInput {
+    color: var(--foreground);
 }
 
-[data-theme="dark"] .assistantTitle {
-    background: linear-gradient(135deg, #e5e7eb 0%, #a78bfa 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+[data-theme="dark"] .hashtagSuggestionChip {
+    border-color: rgba(139, 92, 246, 0.25);
+    color: var(--muted-foreground);
 }
 
-[data-theme="dark"] .assistantSectionHeader {
-    background: linear-gradient(135deg, #e5e7eb 0%, #c084fc 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+[data-theme="dark"] .hashtagSuggestionChip:hover {
+    border-color: rgba(139, 92, 246, 0.5);
+    color: #a78bfa;
+    background: rgba(139, 92, 246, 0.1);
 }
 
-[data-theme="dark"] .outputBlock {
-    background: rgba(15, 15, 30, 0.6);
+[data-theme="dark"] .variantStack {
     border-color: rgba(139, 92, 246, 0.2);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
 }
 
-[data-theme="dark"] .researchItem {
-    background: rgba(15, 15, 30, 0.5);
-    border-color: rgba(139, 92, 246, 0.15);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+[data-theme="dark"] .variantStackHeader {
+    background: rgba(15, 15, 30, 0.6);
+    border-bottom-color: rgba(139, 92, 246, 0.15);
+    color: var(--muted-foreground);
 }
 
-[data-theme="dark"] .researchItem:hover {
-    border-color: rgba(139, 92, 246, 0.3);
-    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.12);
+[data-theme="dark"] .variantCard {
+    border-bottom-color: rgba(139, 92, 246, 0.1);
 }
 
-[data-theme="dark"] .researchLink {
-    color: #818cf8;
+[data-theme="dark"] .variantCard:hover {
+    background: rgba(139, 92, 246, 0.06);
 }
 
-[data-theme="dark"] .researchLink:hover {
-    color: #a5b4fc;
+[data-theme="dark"] .variantCardActive {
+    background: rgba(139, 92, 246, 0.08);
+    border-left-color: #a78bfa;
 }
 
-[data-theme="dark"] .error {
-    background: rgba(239, 68, 68, 0.15);
-    color: #fca5a5;
-    border-color: rgba(239, 68, 68, 0.3);
+[data-theme="dark"] .variantLabel {
+    color: var(--foreground);
 }
 
-[data-theme="dark"] .errorInline {
-    color: #fca5a5;
+[data-theme="dark"] .variantActiveBadge {
+    color: #a78bfa;
+    background: rgba(139, 92, 246, 0.15);
 }
 
-[data-theme="dark"] .inlineAlert {
-    background: rgba(220, 38, 38, 0.15);
-    color: #fca5a5;
+[data-theme="dark"] .variantUseButton {
+    color: var(--muted-foreground);
+    border-color: rgba(139, 92, 246, 0.25);
 }
 
-[data-theme="dark"] .backNavButton:hover {
-    background: rgba(139, 92, 246, 0.15);
+[data-theme="dark"] .variantUseButton:hover {
+    border-color: rgba(139, 92, 246, 0.5);
+    color: #a78bfa;
+    background: rgba(139, 92, 246, 0.1);
 }