Upload 7 files

web/components/AgentPulse.tsx

@@ -1,119 +1,119 @@
-"use client";
-
+"use client";
+
 import { useEffect, useRef } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Terminal, CheckCircle2, CircleDashed, X } from "lucide-react";
 import { cn } from "@/lib/utils";
-
-interface AgentPulseProps {
-    logs: string[];
-    status: 'IDLE' | 'PENDING' | 'STARTED' | 'SUCCESS' | 'FAILURE';
-    onClose?: () => void;
-}
-
-export function AgentPulse({ logs, status, onClose }: AgentPulseProps) {
-    const scrollRef = useRef<HTMLDivElement>(null);
-
-    // Auto-scroll to bottom of logs
-    useEffect(() => {
-        if (scrollRef.current) {
-            scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-        }
-    }, [logs]);
-
-    if (status === 'IDLE') return null;
-
-    return (
-        <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="fixed bottom-6 right-6 w-96 bg-[#0F1117] border border-white/10 rounded-xl shadow-2xl overflow-hidden z-50 font-mono text-xs"
-        >
-            {/* Header */}
-            <div className="flex items-center justify-between px-4 py-2 bg-white/5 border-b border-white/5">
-                <div className="flex items-center gap-2 text-gray-400">
-                    <Terminal className="w-3.5 h-3.5" />
-                    <span>Agent Neural Link</span>
-                </div>
-                <div className="flex items-center gap-2">
-                    {status === 'STARTED' && (
-                        <span className="relative flex h-2 w-2">
-                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-                            <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
-                        </span>
-                    )}
-                    <span className={cn(
-                        "capitalize mr-2",
-                        status === 'SUCCESS' ? "text-emerald-500" : "text-gray-400"
-                    )}>{status.toLowerCase()}</span>
-
-                    {onClose && (
-                        <button
-                            onClick={onClose}
-                            className="text-gray-500 hover:text-white transition-colors"
-                        >
-                            <X className="w-4 h-4" />
-                        </button>
-                    )}
-                </div>
-            </div>
-
-            {/* Logs Area */}
-            <div
-                ref={scrollRef}
-                className="h-48 overflow-y-auto p-4 space-y-2 text-gray-300"
-            >
-                <AnimatePresence initial={false}>
-                    {logs.map((log, i) => (
-                        <motion.div
-                            key={i}
-                            initial={{ opacity: 0, x: -10 }}
-                            animate={{ opacity: 1, x: 0 }}
-                            className="flex gap-2"
-                        >
-                            <span className="text-emerald-500/50">➜</span>
-                            <span>{log}</span>
-                        </motion.div>
-                    ))}
-                    {status === 'STARTED' && (
-                        <motion.div
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 1 }}
-                            transition={{ repeat: Infinity, duration: 1 }}
-                            className="flex gap-2 text-emerald-500/80"
-                        >
-                            <span className="text-emerald-500/50">➜</span>
-                            <span className="animate-pulse">_</span>
-                        </motion.div>
-                    )}
-                </AnimatePresence>
-            </div>
-
-            {/* Progress Steps (Visual Mockup) */}
-            <div className="flex items-center justify-between px-6 py-3 bg-black/20 border-t border-white/5">
-                <StepIcon label="Research" active={logs.some(l => l.toLowerCase().includes('research'))} />
-                <div className="h-[1px] flex-1 bg-white/10 mx-2" />
-                <StepIcon label="Drafting" active={logs.some(l => l.toLowerCase().includes('draft')) || logs.some(l => l.toLowerCase().includes('writ'))} />
-                <div className="h-[1px] flex-1 bg-white/10 mx-2" />
-                <StepIcon label="Review" active={status === 'SUCCESS'} />
-            </div>
-        </motion.div>
-    );
-}
-
-function StepIcon({ label, active }: { label: string, active: boolean }) {
-    return (
-        <div className="flex flex-col items-center gap-1">
-            {active ? (
-                <div className="w-5 h-5 rounded-full bg-emerald-500/20 text-emerald-500 flex items-center justify-center border border-emerald-500/50">
-                    <CheckCircle2 className="w-3 h-3" />
-                </div>
-            ) : (
-                <div className="w-5 h-5 rounded-full bg-white/5 text-gray-600 flex items-center justify-center border border-white/10">
-                    <CircleDashed className="w-3 h-3" />
-                </div>
-            )}
-            <span className={cn("text-[10px]", active ? "text-emerald-500" : "text-gray-600")}>{label}</span>
-        </div>
-    )
-}
+
+interface AgentPulseProps {
+    logs: string[];
+    status: 'IDLE' | 'PENDING' | 'STARTED' | 'SUCCESS' | 'FAILURE';
+    onClose?: () => void;
+}
+
+export function AgentPulse({ logs, status, onClose }: AgentPulseProps) {
+    const scrollRef = useRef<HTMLDivElement>(null);
+
+    // Auto-scroll to bottom of logs
+    useEffect(() => {
+        if (scrollRef.current) {
+            scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+        }
+    }, [logs]);
+
+    if (status === 'IDLE') return null;
+
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="fixed bottom-6 right-6 w-96 bg-[#0F1117] border border-white/10 rounded-xl shadow-2xl overflow-hidden z-50 font-mono text-xs"
+        >
+            {/* Header */}
+            <div className="flex items-center justify-between px-4 py-2 bg-white/5 border-b border-white/5">
+                <div className="flex items-center gap-2 text-gray-400">
+                    <Terminal className="w-3.5 h-3.5" />
+                    <span>Agent Neural Link</span>
+                </div>
+                <div className="flex items-center gap-2">
+                    {status === 'STARTED' && (
+                        <span className="relative flex h-2 w-2">
+                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                            <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+                        </span>
+                    )}
+                    <span className={cn(
+                        "capitalize mr-2",
+                        status === 'SUCCESS' ? "text-emerald-500" : "text-gray-400"
+                    )}>{status.toLowerCase()}</span>
+
+                    {onClose && (
+                        <button
+                            onClick={onClose}
+                            className="text-gray-500 hover:text-white transition-colors"
+                        >
+                            <X className="w-4 h-4" />
+                        </button>
+                    )}
+                </div>
+            </div>
+
+            {/* Logs Area */}
+            <div
+                ref={scrollRef}
+                className="h-48 overflow-y-auto p-4 space-y-2 text-gray-300"
+            >
+                <AnimatePresence initial={false}>
+                    {logs.map((log, i) => (
+                        <motion.div
+                            key={i}
+                            initial={{ opacity: 0, x: -10 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            className="flex gap-2"
+                        >
+                            <span className="text-emerald-500/50">➜</span>
+                            <span>{log}</span>
+                        </motion.div>
+                    ))}
+                    {status === 'STARTED' && (
+                        <motion.div
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            transition={{ repeat: Infinity, duration: 1 }}
+                            className="flex gap-2 text-emerald-500/80"
+                        >
+                            <span className="text-emerald-500/50">➜</span>
+                            <span className="animate-pulse">_</span>
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </div>
+
+            {/* Progress Steps (Visual Mockup) */}
+            <div className="flex items-center justify-between px-6 py-3 bg-black/20 border-t border-white/5">
+                <StepIcon label="Research" active={logs.some(l => l.toLowerCase().includes('research'))} />
+                <div className="h-[1px] flex-1 bg-white/10 mx-2" />
+                <StepIcon label="Drafting" active={logs.some(l => l.toLowerCase().includes('draft')) || logs.some(l => l.toLowerCase().includes('writ'))} />
+                <div className="h-[1px] flex-1 bg-white/10 mx-2" />
+                <StepIcon label="Review" active={status === 'SUCCESS'} />
+            </div>
+        </motion.div>
+    );
+}
+
+function StepIcon({ label, active }: { label: string, active: boolean }) {
+    return (
+        <div className="flex flex-col items-center gap-1">
+            {active ? (
+                <div className="w-5 h-5 rounded-full bg-emerald-500/20 text-emerald-500 flex items-center justify-center border border-emerald-500/50">
+                    <CheckCircle2 className="w-3 h-3" />
+                </div>
+            ) : (
+                <div className="w-5 h-5 rounded-full bg-white/5 text-gray-600 flex items-center justify-center border border-white/10">
+                    <CircleDashed className="w-3 h-3" />
+                </div>
+            )}
+            <span className={cn("text-[10px]", active ? "text-emerald-500" : "text-gray-600")}>{label}</span>
+        </div>
+    )
+}

web/components/ConfigPanel.tsx

@@ -1,14 +1,14 @@
-"use client";
-
+"use client";
+
 import { DomainKey, DOMAINS } from "@/lib/domains";
 import { cn } from "@/lib/utils";
 import { Zap } from "lucide-react";
-
+
 interface ConfigPanelProps {
     domain: DomainKey;
     topic: string;
     setTopic: (t: string) => void;
-    tone: string;
+    tone: string;
     setTone: (t: string) => void;
     onGenerate: () => void;
     isGenerating: boolean;
@@ -17,12 +17,12 @@ interface ConfigPanelProps {
     resetInSeconds?: number;
     mode?: "fingerprint" | "ip_fallback" | "authenticated";
 }
-
-export function ConfigPanel({
-    domain,
-    topic,
-    setTopic,
-    tone,
+
+export function ConfigPanel({
+    domain,
+    topic,
+    setTopic,
+    tone,
     setTone,
     onGenerate,
     isGenerating,
@@ -40,9 +40,9 @@ export function ConfigPanel({
     return (
         <div className="w-full max-w-3xl mx-auto space-y-6">
             <div className="space-y-2">
-                <h2 className="text-2xl font-semibold text-white">
-                    What should the <span className={activeDomain.accent}>{activeDomain.label}</span> Agents build today?
-                </h2>
+                <h2 className="text-2xl font-semibold text-white">
+                    What should the <span className={activeDomain.accent}>{activeDomain.label}</span> Agents build today?
+                </h2>
                 <p className="text-gray-400 text-sm">
                     Describe your topic in detail. The swarms will handle the rest.
                 </p>
@@ -62,66 +62,66 @@ export function ConfigPanel({
                     </p>
                 )}
             </div>
-
-            <div className="group relative">
-                <div className={cn(
-                    "absolute -inset-0.5 rounded-xl blur opacity-30 transition duration-500",
-                    activeDomain.bg
-                )}></div>
-                <div className="relative bg-zinc-900 rounded-xl p-4 border border-white/10 shadow-2xl">
-                    <textarea
-                        value={topic}
-                        onChange={(e) => setTopic(e.target.value)}
-                        placeholder={activeDomain.placeholder}
-                        className="w-full bg-transparent text-lg text-white placeholder-gray-600 focus:outline-none min-h-[120px] resize-none"
-                    />
-
-                    <div className="flex items-center justify-between mt-4 pt-4 border-t border-white/5">
-                        <div className="flex items-center gap-4">
-                            <label className="text-sm text-gray-500">Tone:</label>
-                            <div className="flex bg-black/40 rounded-lg p-1">
-                                {['Academic', 'Professional', 'Engaging'].map((t) => (
-                                    <button
-                                        key={t}
-                                        onClick={() => setTone(t)}
-                                        className={cn(
-                                            "px-3 py-1 text-xs rounded-md transition-all",
-                                            tone === t
-                                                ? "bg-white/10 text-white shadow-sm"
-                                                : "text-gray-500 hover:text-gray-300"
-                                        )}
-                                    >
-                                        {t}
-                                    </button>
-                                ))}
-                            </div>
-                        </div>
-
+
+            <div className="group relative">
+                <div className={cn(
+                    "absolute -inset-0.5 rounded-xl blur opacity-30 transition duration-500",
+                    activeDomain.bg
+                )}></div>
+                <div className="relative bg-zinc-900 rounded-xl p-4 border border-white/10 shadow-2xl">
+                    <textarea
+                        value={topic}
+                        onChange={(e) => setTopic(e.target.value)}
+                        placeholder={activeDomain.placeholder}
+                        className="w-full bg-transparent text-lg text-white placeholder-gray-600 focus:outline-none min-h-[120px] resize-none"
+                    />
+
+                    <div className="flex items-center justify-between mt-4 pt-4 border-t border-white/5">
+                        <div className="flex items-center gap-4">
+                            <label className="text-sm text-gray-500">Tone:</label>
+                            <div className="flex bg-black/40 rounded-lg p-1">
+                                {['Academic', 'Professional', 'Engaging'].map((t) => (
+                                    <button
+                                        key={t}
+                                        onClick={() => setTone(t)}
+                                        className={cn(
+                                            "px-3 py-1 text-xs rounded-md transition-all",
+                                            tone === t
+                                                ? "bg-white/10 text-white shadow-sm"
+                                                : "text-gray-500 hover:text-gray-300"
+                                        )}
+                                    >
+                                        {t}
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+
                         <button
                             onClick={onGenerate}
                             disabled={disableGenerate}
                             className={cn(
                                 "flex items-center gap-2 px-6 py-2 rounded-lg font-medium transition-all shadow-lg hover:bg-opacity-90 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed",
                                 activeDomain.bg,
-                                activeDomain.accent,
-                                "bg-opacity-20 hover:bg-opacity-30 border border-white/10"
-                            )}
-                        >
-                            {isGenerating ? (
-                                <>
-                                    <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
-                                    Agents Working...
-                                </>
-                            ) : (
-                                <>
-                                    <Zap className="w-4 h-4 fill-current" />
-                                    Ignite Swarm
-                                </>
-                            )}
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
+                                activeDomain.accent,
+                                "bg-opacity-20 hover:bg-opacity-30 border border-white/10"
+                            )}
+                        >
+                            {isGenerating ? (
+                                <>
+                                    <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
+                                    Agents Working...
+                                </>
+                            ) : (
+                                <>
+                                    <Zap className="w-4 h-4 fill-current" />
+                                    Ignite Swarm
+                                </>
+                            )}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

web/components/ContentCanvas.tsx

@@ -1,267 +1,267 @@
-"use client";
-
+"use client";
+
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import { cn } from "@/lib/utils";
 import { Copy, Download, Share2, ChevronDown, FileText, FileCode, FileType } from "lucide-react";
 import { useState, useRef, useEffect } from 'react';
-
-interface ContentCanvasProps {
-    content: string | null;
-    className?: string;
-}
-
-export function ContentCanvas({ content, className }: ContentCanvasProps) {
-    const [copied, setCopied] = useState(false);
-    const [showDownloadMenu, setShowDownloadMenu] = useState(false);
-    const downloadMenuRef = useRef<HTMLDivElement>(null);
-    const contentRef = useRef<HTMLDivElement>(null);
-
-    const [showShareMenu, setShowShareMenu] = useState(false);
-    const shareMenuRef = useRef<HTMLDivElement>(null);
-
-    // Close menu when clicking outside
-    useEffect(() => {
-        function handleClickOutside(event: MouseEvent) {
-            if (downloadMenuRef.current && !downloadMenuRef.current.contains(event.target as Node)) {
-                setShowDownloadMenu(false);
-            }
-            if (shareMenuRef.current && !shareMenuRef.current.contains(event.target as Node)) {
-                setShowShareMenu(false);
-            }
-        }
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, []);
-
-    const handleCopy = () => {
-        if (content) {
-            navigator.clipboard.writeText(content);
-            setCopied(true);
-            setTimeout(() => setCopied(false), 2000);
-        }
-    }
-
-    const cleanContent = (text: string | null) => {
-        if (!text) return "";
-        // Remove leading/trailing markdown code fences
-        return text.replace(/^```markdown\n/, '').replace(/^```\n/, '').replace(/\n```$/, '');
-    };
-
-    const downloadMarkdown = () => {
-        if (!content) return;
-        const blob = new Blob([cleanContent(content)], { type: 'text/markdown' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = 'generated-content.md';
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-        setShowDownloadMenu(false);
-    };
-
-    const getHTMLContent = () => {
-        if (!content || !contentRef.current) return "";
-        // Wrap content in a basic HTML structure for better viewing
-        return `<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>OmniContent Generation</title>
-    <style>
-        body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 2rem; }
-        pre { background: #f4f4f4; padding: 1rem; overflow-x: auto; border-radius: 4px; }
-        code { font-family: monospace; background: #f4f4f4; padding: 0.2rem 0.4rem; border-radius: 4px; }
-        img { max-width: 100%; height: auto; }
-        blockquote { border-left: 4px solid #ccc; margin: 0; padding-left: 1rem; color: #666; }
-        table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
-        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
-        th { background-color: #f2f2f2; }
-    </style>
-</head>
-<body>
-    ${contentRef.current.innerHTML}
-</body>
-</html>`;
-    }
-
-    const downloadHTML = () => {
-        const htmlContent = getHTMLContent();
-        if (!htmlContent) return;
-
-        const blob = new Blob([htmlContent], { type: 'text/html' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = 'generated-content.html';
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-        setShowDownloadMenu(false);
-    };
-
-    const handleShare = async (format: 'markdown' | 'html') => {
-        if (!content) return;
-
-        const shareText = format === 'html' ? getHTMLContent() : cleanContent(content);
-        const title = format === 'html' ? 'OmniContent Generation (HTML)' : 'OmniContent Generation (Markdown)';
-
-        if (format === 'html') {
-            // For HTML, we want to share as a FILE if possible, or Copy as Rich Text
-            // Sharing "text" via navigator.share just shares raw code.
-            try {
-                const blob = new Blob([shareText], { type: 'text/html' });
-                const file = new File([blob], 'omnicontent.html', { type: 'text/html' });
-
-                // 1. Try Native Share with File
-                if (navigator.canShare && navigator.canShare({ files: [file] })) {
-                    await navigator.share({
-                        files: [file],
-                        title: title,
-                    });
-                    return;
-                }
-
-                // 2. Fallback: Copy as Rich Text using Clipboard API
-                // This allows pasting rendered HTML into emails/docs
-                if (typeof ClipboardItem !== "undefined") {
-                    const data = [new ClipboardItem({
-                        "text/html": blob,
-                        "text/plain": new Blob([cleanContent(content)], { type: 'text/plain' })
-                    })];
-                    await navigator.clipboard.write(data);
-                    alert("HTML copied to clipboard as Rich Text!");
-                    return;
-                }
-            } catch (err) {
-                console.error("Error sharing HTML:", err);
-                // Fallthrough to basic text copy
-            }
-        }
-
-        // Markdown / Text Fallback
-        // Try Native Share if available (e.g. Mobile, Safari)
-        if (navigator.share) {
-            try {
-                await navigator.share({
-                    title: title,
-                    text: shareText,
-                });
-            } catch (err) {
-                console.log('Error sharing:', err);
-            }
-        } else {
-            // Fallback to clipboard if share not supported
-            navigator.clipboard.writeText(shareText);
-            alert(`${format.toUpperCase()} copied to clipboard!`);
-        }
-        setShowShareMenu(false);
-    };
-
-    const handleTwitterShare = () => {
-        if (!content) return;
-        // Fallback: Twitter Intent (Must respect 280 char limit)
-        // We can't share a full article as a Tweet, so we share a teaser.
-        const preview = cleanContent(content).slice(0, 240); // Leave room for URL/hashtags
-        const text = encodeURIComponent(`Check out this insights generated by OmniContent!\n\n${preview}...`);
-        window.open(`https://twitter.com/intent/tweet?text=${text}`, '_blank');
-        setShowShareMenu(false);
-    }
-
-
-    if (!content) {
-        return (
-            <div className={cn("flex items-center justify-center p-8 text-gray-500 border border-dashed border-white/10 rounded-xl h-full", className)}>
-                <p className="text-sm">Generated content will appear here...</p>
-            </div>
-        )
-    }
-
-
-
-    return (
-        <div className={cn("relative flex flex-col h-full bg-[#15171e] rounded-xl border border-white/10 overflow-hidden", className)}>
-            {/* Toolbar */}
-            <div className="flex items-center justify-between px-4 py-2 border-b border-white/5 bg-black/20 z-10">
-                <span className="text-xs font-semibold text-gray-400">Content Preview</span>
-                <div className="flex items-center gap-2">
-                    <button
-                        onClick={handleCopy}
-                        className="p-1.5 hover:bg-white/10 rounded-md text-gray-400 hover:text-white transition-colors" title="Copy">
-                        <Copy className={cn("w-4 h-4", copied && "text-emerald-500")} />
-                    </button>
-
-                    {/* Download Dropdown */}
-                    <div className="relative" ref={downloadMenuRef}>
-                        <button
-                            onClick={() => setShowDownloadMenu(!showDownloadMenu)}
-                            className={cn("p-1.5 hover:bg-white/10 rounded-md text-gray-400 hover:text-white transition-colors flex items-center gap-1", showDownloadMenu && "bg-white/10 text-white")}
-                            title="Download Options">
-                            <Download className="w-4 h-4" />
-                            <ChevronDown className="w-3 h-3" />
-                        </button>
-
-                        {showDownloadMenu && (
-                            <div className="absolute right-0 top-full mt-1 w-40 bg-[#1e2028] border border-white/10 rounded-lg shadow-xl overflow-hidden z-50">
-                                <button onClick={downloadMarkdown} className="w-full px-3 py-2 text-left text-sm text-gray-300 hover:bg-white/5 hover:text-white flex items-center gap-2">
-                                    <FileCode className="w-4 h-4 text-emerald-400" /> Markdown
-                                </button>
-                                <button onClick={downloadHTML} className="w-full px-3 py-2 text-left text-sm text-gray-300 hover:bg-white/5 hover:text-white flex items-center gap-2">
-                                    <FileText className="w-4 h-4 text-blue-400" /> HTML
-                                </button>
-                                <button disabled className="w-full px-3 py-2 text-left text-sm text-gray-600 flex items-center gap-2 cursor-not-allowed opacity-50">
-                                    <FileType className="w-4 h-4" /> PDF (Coming Soon)
-                                </button>
-                            </div>
-                        )}
-                    </div>
-
-                    {/* Share Dropdown */}
-                    <div className="relative" ref={shareMenuRef}>
-                        <button
-                            onClick={() => setShowShareMenu(!showShareMenu)}
-                            className={cn("p-1.5 hover:bg-white/10 rounded-md text-gray-400 hover:text-white transition-colors flex items-center gap-1", showShareMenu && "bg-white/10 text-white")}
-                            title="Share Options">
-                            <Share2 className="w-4 h-4" />
-                            <ChevronDown className="w-3 h-3" />
-                        </button>
-
-                        {showShareMenu && (
-                            <div className="absolute right-0 top-full mt-1 w-44 bg-[#1e2028] border border-white/10 rounded-lg shadow-xl overflow-hidden z-50">
-                                <button onClick={() => handleShare('markdown')} className="w-full px-3 py-2 text-left text-sm text-gray-300 hover:bg-white/5 hover:text-white flex items-center gap-2">
-                                    <FileCode className="w-4 h-4 text-emerald-400" /> Share Markdown
-                                </button>
-                                <button onClick={() => handleShare('html')} className="w-full px-3 py-2 text-left text-sm text-gray-300 hover:bg-white/5 hover:text-white flex items-center gap-2">
-                                    <FileText className="w-4 h-4 text-blue-400" /> Share HTML
-                                </button>
-                                <div className="h-[1px] bg-white/5 my-1" />
-                                <button onClick={handleTwitterShare} className="w-full px-3 py-2 text-left text-sm text-gray-300 hover:bg-white/5 hover:text-white flex items-center gap-2">
-                                    <svg viewBox="0 0 24 24" className="w-4 h-4 text-white fill-current"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" /></svg>
-                                    Share on X
-                                </button>
-                            </div>
-                        )}
-                    </div>
-                </div>
-            </div>
-
-            {/* Editor Area */}
-            <div className="flex-1 overflow-auto p-6 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
-                <div ref={contentRef} className="prose prose-invert lg:prose-xl max-w-none prose-headings:text-[#34d399] prose-a:text-[#60a5fa]">
-                    <MarkdownPreview
-                        source={cleanContent(content)}
-                        style={{ backgroundColor: 'transparent', color: 'inherit', fontFamily: 'inherit' }}
-                        wrapperElement={{
-                            "data-color-mode": "dark"
-                        }}
-                    />
-                </div>
-            </div>
-        </div>
-    );
-}
+
+interface ContentCanvasProps {
+    content: string | null;
+    className?: string;
+}
+
+export function ContentCanvas({ content, className }: ContentCanvasProps) {
+    const [copied, setCopied] = useState(false);
+    const [showDownloadMenu, setShowDownloadMenu] = useState(false);
+    const downloadMenuRef = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+
+    const [showShareMenu, setShowShareMenu] = useState(false);
+    const shareMenuRef = useRef<HTMLDivElement>(null);
+
+    // Close menu when clicking outside
+    useEffect(() => {
+        function handleClickOutside(event: MouseEvent) {
+            if (downloadMenuRef.current && !downloadMenuRef.current.contains(event.target as Node)) {
+                setShowDownloadMenu(false);
+            }
+            if (shareMenuRef.current && !shareMenuRef.current.contains(event.target as Node)) {
+                setShowShareMenu(false);
+            }
+        }
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+
+    const handleCopy = () => {
+        if (content) {
+            navigator.clipboard.writeText(content);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+    }
+
+    const cleanContent = (text: string | null) => {
+        if (!text) return "";
+        // Remove leading/trailing markdown code fences
+        return text.replace(/^```markdown\n/, '').replace(/^```\n/, '').replace(/\n```$/, '');
+    };
+
+    const downloadMarkdown = () => {
+        if (!content) return;
+        const blob = new Blob([cleanContent(content)], { type: 'text/markdown' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'generated-content.md';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        setShowDownloadMenu(false);
+    };
+
+    const getHTMLContent = () => {
+        if (!content || !contentRef.current) return "";
+        // Wrap content in a basic HTML structure for better viewing
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OmniContent Generation</title>
+    <style>
+        body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 2rem; }
+        pre { background: #f4f4f4; padding: 1rem; overflow-x: auto; border-radius: 4px; }
+        code { font-family: monospace; background: #f4f4f4; padding: 0.2rem 0.4rem; border-radius: 4px; }
+        img { max-width: 100%; height: auto; }
+        blockquote { border-left: 4px solid #ccc; margin: 0; padding-left: 1rem; color: #666; }
+        table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
+        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
+        th { background-color: #f2f2f2; }
+    </style>
+</head>
+<body>
+    ${contentRef.current.innerHTML}
+</body>
+</html>`;
+    }
+
+    const downloadHTML = () => {
+        const htmlContent = getHTMLContent();
+        if (!htmlContent) return;
+
+        const blob = new Blob([htmlContent], { type: 'text/html' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'generated-content.html';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        setShowDownloadMenu(false);
+    };
+
+    const handleShare = async (format: 'markdown' | 'html') => {
+        if (!content) return;
+
+        const shareText = format === 'html' ? getHTMLContent() : cleanContent(content);
+        const title = format === 'html' ? 'OmniContent Generation (HTML)' : 'OmniContent Generation (Markdown)';
+
+        if (format === 'html') {
+            // For HTML, we want to share as a FILE if possible, or Copy as Rich Text
+            // Sharing "text" via navigator.share just shares raw code.
+            try {
+                const blob = new Blob([shareText], { type: 'text/html' });
+                const file = new File([blob], 'omnicontent.html', { type: 'text/html' });
+
+                // 1. Try Native Share with File
+                if (navigator.canShare && navigator.canShare({ files: [file] })) {
+                    await navigator.share({
+                        files: [file],
+                        title: title,
+                    });
+                    return;
+                }
+
+                // 2. Fallback: Copy as Rich Text using Clipboard API
+                // This allows pasting rendered HTML into emails/docs
+                if (typeof ClipboardItem !== "undefined") {
+                    const data = [new ClipboardItem({
+                        "text/html": blob,
+                        "text/plain": new Blob([cleanContent(content)], { type: 'text/plain' })
+                    })];
+                    await navigator.clipboard.write(data);
+                    alert("HTML copied to clipboard as Rich Text!");
+                    return;
+                }
+            } catch (err) {
+                console.error("Error sharing HTML:", err);
+                // Fallthrough to basic text copy
+            }
+        }
+
+        // Markdown / Text Fallback
+        // Try Native Share if available (e.g. Mobile, Safari)
+        if (navigator.share) {
+            try {
+                await navigator.share({
+                    title: title,
+                    text: shareText,
+                });
+            } catch (err) {
+                console.log('Error sharing:', err);
+            }
+        } else {
+            // Fallback to clipboard if share not supported
+            navigator.clipboard.writeText(shareText);
+            alert(`${format.toUpperCase()} copied to clipboard!`);
+        }
+        setShowShareMenu(false);
+    };
+
+    const handleTwitterShare = () => {
+        if (!content) return;
+        // Fallback: Twitter Intent (Must respect 280 char limit)
+        // We can't share a full article as a Tweet, so we share a teaser.
+        const preview = cleanContent(content).slice(0, 240); // Leave room for URL/hashtags
+        const text = encodeURIComponent(`Check out this insights generated by OmniContent!\n\n${preview}...`);
+        window.open(`https://twitter.com/intent/tweet?text=${text}`, '_blank');
+        setShowShareMenu(false);
+    }
+
+
+    if (!content) {
+        return (
+            <div className={cn("flex items-center justify-center p-8 text-gray-500 border border-dashed border-white/10 rounded-xl h-full", className)}>
+                <p className="text-sm">Generated content will appear here...</p>
+            </div>
+        )
+    }
+
+
+
+    return (
+        <div className={cn("relative flex flex-col h-full bg-[#15171e] rounded-xl border border-white/10 overflow-hidden", className)}>
+            {/* Toolbar */}
+            <div className="flex items-center justify-between px-4 py-2 border-b border-white/5 bg-black/20 z-10">
+                <span className="text-xs font-semibold text-gray-400">Content Preview</span>
+                <div className="flex items-center gap-2">
+                    <button
+                        onClick={handleCopy}
+                        className="p-1.5 hover:bg-white/10 rounded-md text-gray-400 hover:text-white transition-colors" title="Copy">
+                        <Copy className={cn("w-4 h-4", copied && "text-emerald-500")} />
+                    </button>
+
+                    {/* Download Dropdown */}
+                    <div className="relative" ref={downloadMenuRef}>
+                        <button
+                            onClick={() => setShowDownloadMenu(!showDownloadMenu)}
+                            className={cn("p-1.5 hover:bg-white/10 rounded-md text-gray-400 hover:text-white transition-colors flex items-center gap-1", showDownloadMenu && "bg-white/10 text-white")}
+                            title="Download Options">
+                            <Download className="w-4 h-4" />
+                            <ChevronDown className="w-3 h-3" />
+                        </button>
+
+                        {showDownloadMenu && (
+                            <div className="absolute right-0 top-full mt-1 w-40 bg-[#1e2028] border border-white/10 rounded-lg shadow-xl overflow-hidden z-50">
+                                <button onClick={downloadMarkdown} className="w-full px-3 py-2 text-left text-sm text-gray-300 hover:bg-white/5 hover:text-white flex items-center gap-2">
+                                    <FileCode className="w-4 h-4 text-emerald-400" /> Markdown
+                                </button>
+                                <button onClick={downloadHTML} className="w-full px-3 py-2 text-left text-sm text-gray-300 hover:bg-white/5 hover:text-white flex items-center gap-2">
+                                    <FileText className="w-4 h-4 text-blue-400" /> HTML
+                                </button>
+                                <button disabled className="w-full px-3 py-2 text-left text-sm text-gray-600 flex items-center gap-2 cursor-not-allowed opacity-50">
+                                    <FileType className="w-4 h-4" /> PDF (Coming Soon)
+                                </button>
+                            </div>
+                        )}
+                    </div>
+
+                    {/* Share Dropdown */}
+                    <div className="relative" ref={shareMenuRef}>
+                        <button
+                            onClick={() => setShowShareMenu(!showShareMenu)}
+                            className={cn("p-1.5 hover:bg-white/10 rounded-md text-gray-400 hover:text-white transition-colors flex items-center gap-1", showShareMenu && "bg-white/10 text-white")}
+                            title="Share Options">
+                            <Share2 className="w-4 h-4" />
+                            <ChevronDown className="w-3 h-3" />
+                        </button>
+
+                        {showShareMenu && (
+                            <div className="absolute right-0 top-full mt-1 w-44 bg-[#1e2028] border border-white/10 rounded-lg shadow-xl overflow-hidden z-50">
+                                <button onClick={() => handleShare('markdown')} className="w-full px-3 py-2 text-left text-sm text-gray-300 hover:bg-white/5 hover:text-white flex items-center gap-2">
+                                    <FileCode className="w-4 h-4 text-emerald-400" /> Share Markdown
+                                </button>
+                                <button onClick={() => handleShare('html')} className="w-full px-3 py-2 text-left text-sm text-gray-300 hover:bg-white/5 hover:text-white flex items-center gap-2">
+                                    <FileText className="w-4 h-4 text-blue-400" /> Share HTML
+                                </button>
+                                <div className="h-[1px] bg-white/5 my-1" />
+                                <button onClick={handleTwitterShare} className="w-full px-3 py-2 text-left text-sm text-gray-300 hover:bg-white/5 hover:text-white flex items-center gap-2">
+                                    <svg viewBox="0 0 24 24" className="w-4 h-4 text-white fill-current"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" /></svg>
+                                    Share on X
+                                </button>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {/* Editor Area */}
+            <div className="flex-1 overflow-auto p-6 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
+                <div ref={contentRef} className="prose prose-invert lg:prose-xl max-w-none prose-headings:text-[#34d399] prose-a:text-[#60a5fa]">
+                    <MarkdownPreview
+                        source={cleanContent(content)}
+                        style={{ backgroundColor: 'transparent', color: 'inherit', fontFamily: 'inherit' }}
+                        wrapperElement={{
+                            "data-color-mode": "dark"
+                        }}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}

web/components/GeneratorApp.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useState } from "react";
+import { AgentPulse } from "@/components/AgentPulse";
+import { ConfigPanel } from "@/components/ConfigPanel";
+import { ContentCanvas } from "@/components/ContentCanvas";
+import { RateLimitModal } from "@/components/RateLimitModal";
+import { Sidebar } from "@/components/Sidebar";
+import { useAgentJob } from "@/hooks/useAgentJob";
+import { DOMAINS, DomainKey } from "@/lib/domains";
+import { cn } from "@/lib/utils";
+import { useRouter } from "next/navigation";
+
+export function GeneratorApp() {
+  const [selectedDomain, setSelectedDomain] = useState<DomainKey>("fintech");
+  const [topic, setTopic] = useState("");
+  const [tone, setTone] = useState("Professional");
+  const router = useRouter();
+
+  const { status, result, logs, usage, error, rateLimit, startJob, clearRateLimit } = useAgentJob();
+  const [showAgentPulse, setShowAgentPulse] = useState(false);
+
+  const handleGenerate = () => {
+    setShowAgentPulse(true);
+    startJob(topic, selectedDomain, tone);
+  };
+
+  return (
+    <div className="flex min-h-screen bg-[#0B0E14] text-gray-100 font-sans selection:bg-emerald-500/30">
+      <Sidebar selectedDomain={selectedDomain} onSelectDomain={setSelectedDomain} />
+
+      <main className="relative flex flex-1 flex-col overflow-hidden">
+        <div
+          className={cn(
+            "pointer-events-none absolute top-0 left-0 h-[500px] w-full bg-gradient-to-b opacity-10 transition-colors duration-700",
+            DOMAINS[selectedDomain].accent.replace("text-", "from-"),
+          )}
+        />
+
+        <div className="z-10 flex flex-1 flex-col gap-8 overflow-y-auto p-8">
+          <div className="flex-none">
+            <ConfigPanel
+              domain={selectedDomain}
+              topic={topic}
+              setTopic={setTopic}
+              tone={tone}
+              setTone={setTone}
+              onGenerate={handleGenerate}
+              isGenerating={status === "PENDING" || status === "STARTED"}
+              runsLeft={usage?.remaining}
+              runLimit={usage?.limit}
+              resetInSeconds={usage?.reset_in_seconds}
+              mode={usage?.mode}
+            />
+            {error && !rateLimit && <p className="mt-3 text-sm text-rose-300">{error}</p>}
+          </div>
+
+          <div className="flex min-h-[500px] flex-1 gap-6">
+            <ContentCanvas content={result} className="w-full shadow-2xl" />
+          </div>
+        </div>
+
+        {showAgentPulse && (
+          <AgentPulse
+            logs={logs}
+            status={status}
+            onClose={() => setShowAgentPulse(false)}
+          />
+        )}
+
+        <RateLimitModal
+          open={Boolean(rateLimit)}
+          message={rateLimit?.message ?? "Daily limit reached."}
+          resetInSeconds={rateLimit?.reset_in_seconds ?? 0}
+          onClose={clearRateLimit}
+          onLogin={() => {
+            clearRateLimit();
+            router.push("/login");
+          }}
+        />
+      </main>
+    </div>
+  );
+}

web/components/Providers.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { SessionProvider } from "next-auth/react";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return <SessionProvider>{children}</SessionProvider>;
+}

web/components/RateLimitModal.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useMemo } from "react";
+
+interface RateLimitModalProps {
+  open: boolean;
+  message: string;
+  resetInSeconds: number;
+  onClose: () => void;
+  onLogin: () => void;
+}
+
+export function RateLimitModal({
+  open,
+  message,
+  resetInSeconds,
+  onClose,
+  onLogin,
+}: RateLimitModalProps) {
+  const resetLabel = useMemo(() => {
+    const total = Math.max(resetInSeconds, 0);
+    const hours = Math.floor(total / 3600);
+    const mins = Math.ceil((total % 3600) / 60);
+    if (hours > 0) return `${hours}h ${mins}m`;
+    return `${mins}m`;
+  }, [resetInSeconds]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-[70] flex items-center justify-center bg-black/60 p-4">
+      <div className="w-full max-w-md rounded-xl border border-white/10 bg-[#15171e] p-5 shadow-2xl">
+        <h3 className="text-lg font-semibold text-white">Limit Reached</h3>
+        <p className="mt-2 text-sm text-gray-300">{message}</p>
+        <p className="mt-1 text-xs text-amber-300">Try again in about {resetLabel}.</p>
+        <div className="mt-5 flex items-center justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="rounded-lg border border-white/15 bg-white/5 px-3 py-2 text-sm text-gray-200 hover:bg-white/10"
+          >
+            Close
+          </button>
+          <button
+            onClick={onLogin}
+            className="rounded-lg border border-emerald-400/30 bg-emerald-500/20 px-3 py-2 text-sm text-emerald-100 hover:bg-emerald-500/30"
+          >
+            Login
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

web/components/Sidebar.tsx

@@ -1,15 +1,15 @@
-"use client";
-
+"use client";
+
 import { DOMAINS, DomainKey } from "@/lib/domains";
 import { cn } from "@/lib/utils";
 import { History } from "lucide-react";
 import { signIn, signOut, useSession } from "next-auth/react";
-
-interface SidebarProps {
-    selectedDomain: DomainKey;
-    onSelectDomain: (domain: DomainKey) => void;
-}
-
+
+interface SidebarProps {
+    selectedDomain: DomainKey;
+    onSelectDomain: (domain: DomainKey) => void;
+}
+
 export function Sidebar({ selectedDomain, onSelectDomain }: SidebarProps) {
     const { data: session, status } = useSession();
     const isAuthenticated = status === "authenticated";
@@ -17,40 +17,40 @@ export function Sidebar({ selectedDomain, onSelectDomain }: SidebarProps) {
 
     return (
         <div className="w-64 border-r border-white/10 bg-[#0B0E14] flex flex-col h-screen p-4">
-            <div className="mb-8 px-2">
-                <h1 className="text-xl font-bold bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
-                    OmniContent
-                </h1>
-                <p className="text-xs text-gray-500">Multi-Agent Engine</p>
-            </div>
-
-            <div className="space-y-1 flex-1">
-                <p className="px-2 text-xs font-semibold text-gray-500 mb-2 uppercase tracking-wider">
-                    Expert Domains
-                </p>
-                {(Object.keys(DOMAINS) as DomainKey[]).map((key) => {
-                    const domain = DOMAINS[key];
-                    const isSelected = selectedDomain === key;
-                    const Icon = domain.icon;
-
-                    return (
-                        <button
-                            key={key}
-                            onClick={() => onSelectDomain(key)}
-                            className={cn(
-                                "w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-all duration-200",
-                                isSelected
-                                    ? cn(domain.bg, domain.accent, "font-medium")
-                                    : "text-gray-400 hover:text-gray-200 hover:bg-white/5"
-                            )}
-                        >
-                            <Icon className="w-4 h-4" />
-                            {domain.label}
-                        </button>
-                    );
-                })}
-            </div>
-
+            <div className="mb-8 px-2">
+                <h1 className="text-xl font-bold bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+                    OmniContent
+                </h1>
+                <p className="text-xs text-gray-500">Multi-Agent Engine</p>
+            </div>
+
+            <div className="space-y-1 flex-1">
+                <p className="px-2 text-xs font-semibold text-gray-500 mb-2 uppercase tracking-wider">
+                    Expert Domains
+                </p>
+                {(Object.keys(DOMAINS) as DomainKey[]).map((key) => {
+                    const domain = DOMAINS[key];
+                    const isSelected = selectedDomain === key;
+                    const Icon = domain.icon;
+
+                    return (
+                        <button
+                            key={key}
+                            onClick={() => onSelectDomain(key)}
+                            className={cn(
+                                "w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-all duration-200",
+                                isSelected
+                                    ? cn(domain.bg, domain.accent, "font-medium")
+                                    : "text-gray-400 hover:text-gray-200 hover:bg-white/5"
+                            )}
+                        >
+                            <Icon className="w-4 h-4" />
+                            {domain.label}
+                        </button>
+                    );
+                })}
+            </div>
+
             <div className="pt-4 border-t border-white/10 space-y-2">
                 {isAuthenticated ? (
                     <div className="rounded-lg border border-emerald-400/20 bg-emerald-500/10 px-3 py-2">
@@ -91,8 +91,8 @@ export function Sidebar({ selectedDomain, onSelectDomain }: SidebarProps) {
                 <button className="w-full flex items-center gap-3 px-3 py-2 text-gray-400 hover:text-white text-sm transition-colors">
                     <History className="w-4 h-4" />
                     History
-                </button>
-            </div>
-        </div>
-    );
-}
+                </button>
+            </div>
+        </div>
+    );
+}