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>
This commit is contained in:
Trey t
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { use, useState } from "react";
|
||||
import { AssetGallery } from "@/components/asset-gallery";
|
||||
import { PostizPushModal } from "@/components/postiz-push-modal";
|
||||
|
||||
export default function CampaignAssetsPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = use(params);
|
||||
const [pushModalIds, setPushModalIds] = useState<string[] | null>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<AssetGallery
|
||||
campaignId={id}
|
||||
onPushToPostiz={(ids) => setPushModalIds(ids)}
|
||||
/>
|
||||
{pushModalIds && (
|
||||
<PostizPushModal
|
||||
assetIds={pushModalIds}
|
||||
onClose={() => setPushModalIds(null)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import { use } from "react";
|
||||
import { ClaudeChat } from "@/components/claude-chat";
|
||||
|
||||
export default function CampaignChatPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = use(params);
|
||||
|
||||
return <ClaudeChat campaignId={id} />;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { use } from "react";
|
||||
|
||||
const tabs = [
|
||||
{ label: "Details", href: "" },
|
||||
{ label: "Pipeline", href: "/pipeline" },
|
||||
{ label: "Assets", href: "/assets" },
|
||||
{ label: "Claude Chat", href: "/chat" },
|
||||
];
|
||||
|
||||
export default function CampaignDetailLayout({
|
||||
children,
|
||||
params,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = use(params);
|
||||
const pathname = usePathname();
|
||||
const basePath = `/campaigns/${id}`;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<nav className="flex gap-1 border-b">
|
||||
{tabs.map((tab) => {
|
||||
const href = `${basePath}${tab.href}`;
|
||||
const isActive =
|
||||
tab.href === ""
|
||||
? pathname === basePath
|
||||
: pathname.startsWith(href);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={tab.label}
|
||||
href={href}
|
||||
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||||
isActive
|
||||
? "border-primary text-primary"
|
||||
: "border-transparent text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
"use client";
|
||||
|
||||
import { use, useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { CampaignForm, type CampaignData } from "@/components/campaign-form";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Play } from "lucide-react";
|
||||
|
||||
interface CampaignResponse {
|
||||
id: string;
|
||||
name: string;
|
||||
status: string;
|
||||
platforms: string;
|
||||
config: string | null;
|
||||
}
|
||||
|
||||
export default function CampaignDetailsPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = use(params);
|
||||
const router = useRouter();
|
||||
const [campaign, setCampaign] = useState<CampaignResponse | null>(null);
|
||||
const [launching, setLaunching] = useState(false);
|
||||
const [saved, setSaved] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`/api/campaigns/${id}`)
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
setCampaign(data);
|
||||
setSaved(false);
|
||||
})
|
||||
.catch(() => {});
|
||||
}, [id]);
|
||||
|
||||
async function handleLaunch() {
|
||||
setLaunching(true);
|
||||
await fetch(`/api/campaigns/${id}/launch`, { method: "POST" });
|
||||
router.push(`/campaigns/${id}/pipeline`);
|
||||
}
|
||||
|
||||
if (!campaign) {
|
||||
return <p className="text-muted-foreground">Loading...</p>;
|
||||
}
|
||||
|
||||
const config = campaign.config ? JSON.parse(campaign.config) : {};
|
||||
const platforms: string[] = JSON.parse(campaign.platforms);
|
||||
const isDraft = campaign.status === "draft";
|
||||
|
||||
const initialData: CampaignData = {
|
||||
id: campaign.id,
|
||||
name: campaign.name,
|
||||
platforms,
|
||||
config: {
|
||||
goal: config.goal || "app_downloads",
|
||||
keyMessage: config.keyMessage || "",
|
||||
socialProof: config.socialProof || "",
|
||||
targetAudience: config.targetAudience || "",
|
||||
visualDirection: config.visualDirection || "clean",
|
||||
competitorApps: config.competitorApps || "",
|
||||
variations: config.variations ?? 5,
|
||||
useTrendReport: config.useTrendReport || false,
|
||||
screenshots: config.screenshots || [],
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{isDraft && (
|
||||
<div className="flex items-center justify-between rounded-lg border border-primary/20 bg-primary/5 p-4">
|
||||
<div>
|
||||
<p className="font-medium">Ready to launch?</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Review your campaign details below, then launch the pipeline.
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={handleLaunch} disabled={launching}>
|
||||
<Play className="mr-2 h-4 w-4" />
|
||||
{launching ? "Launching..." : "Launch Pipeline"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isDraft && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="secondary">{campaign.status}</Badge>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Campaign is {campaign.status} — fields are read-only.
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="max-w-2xl">
|
||||
{isDraft ? (
|
||||
<CampaignForm initialData={initialData} mode="edit" />
|
||||
) : (
|
||||
<ReadOnlyDetails data={initialData} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ReadOnlyDetails({ data }: { data: CampaignData }) {
|
||||
const goalLabels: Record<string, string> = {
|
||||
app_downloads: "App Downloads",
|
||||
brand_awareness: "Brand Awareness",
|
||||
engagement: "Engagement",
|
||||
};
|
||||
|
||||
const visualLabels: Record<string, string> = {
|
||||
clean: "Clean & Minimal",
|
||||
bold: "Bold & Vibrant",
|
||||
premium: "Premium & Dark",
|
||||
warm: "Warm & Friendly",
|
||||
tech: "Tech & Modern",
|
||||
};
|
||||
|
||||
const fields = [
|
||||
{ label: "Campaign Name", value: data.name },
|
||||
{ label: "Platforms", value: data.platforms.map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join(", ") },
|
||||
{ label: "Goal", value: goalLabels[data.config.goal] || data.config.goal },
|
||||
{ label: "Key Message", value: data.config.keyMessage },
|
||||
{ label: "Social Proof", value: data.config.socialProof },
|
||||
{ label: "Target Audience", value: data.config.targetAudience },
|
||||
{ label: "Visual Direction", value: visualLabels[data.config.visualDirection || ""] || data.config.visualDirection },
|
||||
{ label: "Competitor Apps", value: data.config.competitorApps },
|
||||
{ label: "Variations", value: String(data.config.variations ?? 5) },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border">
|
||||
<div className="divide-y">
|
||||
{fields.map((field) => (
|
||||
<div key={field.label} className="flex gap-4 px-4 py-3">
|
||||
<span className="w-40 shrink-0 text-sm font-medium text-muted-foreground">
|
||||
{field.label}
|
||||
</span>
|
||||
<span className="text-sm">{field.value || "—"}</span>
|
||||
</div>
|
||||
))}
|
||||
{data.config.screenshots && data.config.screenshots.length > 0 && (
|
||||
<div className="flex gap-4 px-4 py-3">
|
||||
<span className="w-40 shrink-0 text-sm font-medium text-muted-foreground">
|
||||
Screenshots
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
{data.config.screenshots.map((path, i) => (
|
||||
<img
|
||||
key={i}
|
||||
src={`/api/files/${path}`}
|
||||
alt={`Screenshot ${i + 1}`}
|
||||
className="h-24 rounded-md border object-cover"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user