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>

hooks/use-claude-chat.ts

@@ -0,0 +1,102 @@
+"use client";
+
+import { useState, useCallback } from "react";
+
+interface Message {
+  role: "user" | "assistant";
+  content: string;
+}
+
+export function useClaudeChat(campaignId: string) {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [sessionId, setSessionId] = useState<string | null>(null);
+
+  const sendMessage = useCallback(
+    async (content: string) => {
+      const userMessage: Message = { role: "user", content };
+      setMessages((prev) => [...prev, userMessage]);
+      setIsStreaming(true);
+
+      const assistantMessage: Message = { role: "assistant", content: "" };
+      setMessages((prev) => [...prev, assistantMessage]);
+
+      try {
+        const res = await fetch("/api/claude", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            message: content,
+            sessionId,
+            campaignId,
+          }),
+        });
+
+        if (!res.ok || !res.body) {
+          setMessages((prev) => {
+            const updated = [...prev];
+            updated[updated.length - 1] = {
+              role: "assistant",
+              content: "Failed to get response from Claude.",
+            };
+            return updated;
+          });
+          setIsStreaming(false);
+          return;
+        }
+
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+
+        let buffer = "";
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() || "";
+
+          for (const line of lines) {
+            if (!line.startsWith("data: ")) continue;
+            try {
+              const data = JSON.parse(line.slice(6));
+              if (data.done) continue;
+              if (data.text) {
+                setMessages((prev) => {
+                  const updated = [...prev];
+                  const last = updated[updated.length - 1];
+                  updated[updated.length - 1] = {
+                    ...last,
+                    content: last.content + data.text,
+                  };
+                  return updated;
+                });
+              }
+              if (data.sessionId) {
+                setSessionId(data.sessionId);
+              }
+            } catch {
+              // skip malformed lines
+            }
+          }
+        }
+      } catch {
+        setMessages((prev) => {
+          const updated = [...prev];
+          updated[updated.length - 1] = {
+            role: "assistant",
+            content: "Connection error. Please try again.",
+          };
+          return updated;
+        });
+      }
+
+      setIsStreaming(false);
+    },
+    [campaignId, sessionId]
+  );
+
+  return { messages, sendMessage, isStreaming };
+}

hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

hooks/use-pipeline-progress.ts

@@ -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 };
+}