feat: complete marketing command center with pipeline, UI, and asset generation

- Dashboard with campaign management, asset gallery, and publishing queue - 7-agent pipeline: trend scout, research, scripts, ad creative, video, copy, distribution - Campaign form with screenshot upload, goal picker, platform selection - Campaign detail view with Details/Pipeline/Assets/Chat tabs - Two-set image generation: Gemini AI (NanoBanana MCP) + Canvas Design posters - Remotion video rendering with phone.png frame and real screenshot alignment - honeyDue branding: blue #0079FF, orange #FF9400, Inter font, warm off-white - Asset cards with source badges (Gemini/Canvas/Remotion/Playwright) - Markdown/JSON render endpoint for viewing pipeline outputs as HTML - Settings page with Tavily, Gemini, Postiz, Nextdoor integration management - Claude Chat for campaign feedback loop with streaming SSE - Postiz publishing modal with scheduling - Auth with NextAuth credentials + JWT sessions - SQLite via Prisma with better-sqlite3 adapter Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 21:05:26 -05:00
parent 6b08cfb73a
commit 66c2bbec8b
113 changed files with 12741 additions and 138 deletions
@@ -0,0 +1,85 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export interface AgentStatus {
+  agentName: string;
+  status: "pending" | "running" | "completed" | "failed";
+  durationMs?: number;
+  outputSummary?: string;
+  error?: string;
+}
+
+const AGENT_NAMES = [
+  "trend-scout",
+  "marketing-research-agent",
+  "script-writer",
+  "ad-creative-designer",
+  "video-ad-producer",
+  "copywriter-agent",
+  "distribution-agent",
+];
+
+export function usePipelineProgress(campaignId: string | null) {
+  const [agents, setAgents] = useState<AgentStatus[]>(
+    AGENT_NAMES.map((name) => ({ agentName: name, status: "pending" }))
+  );
+  const [pipelineStatus, setPipelineStatus] = useState<string>("idle");
+
+  useEffect(() => {
+    if (!campaignId) return;
+
+    const source = new EventSource(`/api/campaigns/${campaignId}/stream`);
+
+    source.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+
+        if (data.type === "pipeline_started") {
+          setPipelineStatus("running");
+        } else if (data.type === "agent_started") {
+          setAgents((prev) =>
+            prev.map((a) =>
+              a.agentName === data.agentName
+                ? { ...a, status: "running" }
+                : a
+            )
+          );
+        } else if (data.type === "agent_completed") {
+          setAgents((prev) =>
+            prev.map((a) =>
+              a.agentName === data.agentName
+                ? {
+                    ...a,
+                    status: "completed",
+                    durationMs: data.durationMs,
+                    outputSummary: data.outputSummary,
+                  }
+                : a
+            )
+          );
+        } else if (data.type === "agent_failed") {
+          setAgents((prev) =>
+            prev.map((a) =>
+              a.agentName === data.agentName
+                ? { ...a, status: "failed", error: data.error }
+                : a
+            )
+          );
+        } else if (data.type === "pipeline_complete") {
+          setPipelineStatus(data.status || "complete");
+        }
+      } catch {
+        // ignore parse errors
+      }
+    };
+
+    source.onerror = () => {
+      source.close();
+    };
+
+    return () => source.close();
+  }, [campaignId]);
+
+  return { agents, pipelineStatus };
+}