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,89 @@
+"use client";
+
+import { use, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { PipelineProgress } from "@/components/pipeline-progress";
+import { usePipelineProgress } from "@/hooks/use-pipeline-progress";
+import { Play } from "lucide-react";
+
+interface Campaign {
+  id: string;
+  name: string;
+  status: string;
+  platforms: string;
+  agentRuns: Array<{
+    id: string;
+    agentName: string;
+    status: string;
+    durationMs?: number;
+    outputSummary?: string;
+    error?: string;
+  }>;
+}
+
+export default function CampaignPipelinePage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = use(params);
+  const [campaign, setCampaign] = useState<Campaign | null>(null);
+  const [launching, setLaunching] = useState(false);
+  const { agents, pipelineStatus } = usePipelineProgress(
+    campaign?.status === "running" ? id : null
+  );
+
+  useEffect(() => {
+    fetch(`/api/campaigns/${id}`)
+      .then((r) => r.json())
+      .then(setCampaign)
+      .catch(() => {});
+  }, [id, pipelineStatus]);
+
+  async function handleLaunch() {
+    setLaunching(true);
+    await fetch(`/api/campaigns/${id}/launch`, { method: "POST" });
+    setCampaign((prev) => (prev ? { ...prev, status: "running" } : prev));
+    setLaunching(false);
+  }
+
+  if (!campaign) {
+    return <p className="text-muted-foreground">Loading...</p>;
+  }
+
+  // Use SSE agents if pipeline is running, otherwise use stored agentRuns
+  const displayAgents =
+    campaign.status === "running"
+      ? agents
+      : campaign.agentRuns.length > 0
+        ? campaign.agentRuns.map((r) => ({
+            agentName: r.agentName,
+            status: r.status as "pending" | "running" | "completed" | "failed",
+            durationMs: r.durationMs ?? undefined,
+            outputSummary: r.outputSummary ?? undefined,
+            error: r.error ?? undefined,
+          }))
+        : agents;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold">{campaign.name}</h2>
+          <Badge variant="secondary" className="mt-1">
+            {campaign.status}
+          </Badge>
+        </div>
+        {campaign.status === "draft" && (
+          <Button onClick={handleLaunch} disabled={launching}>
+            <Play className="mr-2 h-4 w-4" />
+            {launching ? "Launching..." : "Launch Pipeline"}
+          </Button>
+        )}
+      </div>
+
+      <PipelineProgress agents={displayAgents} />
+    </div>
+  );
+}