diff --git a/app/[workspace]/project/[projectId]/(home)/layout.tsx b/app/[workspace]/project/[projectId]/(home)/layout.tsx
index 9a566fd9..0f19b631 100644
--- a/app/[workspace]/project/[projectId]/(home)/layout.tsx
+++ b/app/[workspace]/project/[projectId]/(home)/layout.tsx
@@ -6,6 +6,7 @@
 import { ReactNode } from "react";
 import { Toaster } from "sonner";
 import { ChatPanel } from "@/components/vibn-chat/chat-panel";
+import { ProjectStreamHandler } from "@/components/project/project-stream-handler";
 
 export default async function ProjectShell({
   children,
@@ -14,10 +15,11 @@ export default async function ProjectShell({
   children: ReactNode;
   params: Promise<{ workspace: string; projectId: string }>;
 }) {
-  const { workspace } = await params;
+  const { workspace, projectId } = await params;
 
   return (
     <>
+      <ProjectStreamHandler projectId={projectId} />
       <div style={pageWrap}>
         <ChatPanel structural artifactSlot={children} />
       </div>
diff --git a/app/[workspace]/project/[projectId]/(home)/plan/page-v1.tsx b/app/[workspace]/project/[projectId]/(home)/plan/page-v1.tsx
deleted file mode 100644
index d54fa053..00000000
--- a/app/[workspace]/project/[projectId]/(home)/plan/page-v1.tsx
+++ /dev/null
@@ -1,2441 +0,0 @@
-"use client";
-
-/**
- * Plan tab — the home of the project's thinking.
- *
- * Sub-areas (always visible, even when empty, so a founder learns the
- * model on a brand-new project):
- *   1. Vision    — the elevator pitch + audience
- *   2. Ideas     — the "park-it" bin for raw thoughts
- *   3. Tasks     — what needs to happen next (open / done)
- *   4. Decisions — log of "we chose X over Y because Z"
- *
- * Same UI rhythm as Infrastructure: section tiles in a horizontal bar
- * (with counts), full-width detail panel below. Everything writes through
- * `/api/projects/[projectId]/plan` and persists under
- * `fs_projects.data.plan`. The AI chat reads the plan as context so
- * decisions don't get re-litigated.
- */
-
-import { useCallback, useEffect, useState } from "react";
-import { useParams } from "next/navigation";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import {
-  Loader2,
-  AlertCircle,
-  MessageSquare,
-  ListTodo,
-  GitBranch,
-  Target,
-  Plus,
-  Trash2,
-  Check,
-  RotateCcw,
-  Pencil,
-  X,
-  Eye,
-  FileText,
-} from "lucide-react";
-
-interface Idea {
-  id: string;
-  text: string;
-  createdAt: string;
-}
-type TaskStatus = "open" | "in_progress" | "review" | "done" | "blocked";
-interface Task {
-  id: string;
-  title: string;
-  description?: string;
-  status: TaskStatus;
-  agent?: {
-    runId: string;
-    startedAt: string;
-    finishedAt?: string;
-    status: "queued" | "running" | "succeeded" | "failed";
-  } | null;
-  createdAt: string;
-  startedAt?: string;
-  doneAt?: string;
-  // Legacy single-line tasks (pre-markdown migration) carry text instead of title.
-  text?: string;
-}
-interface Decision {
-  id: string;
-  title: string;
-  choice: string;
-  why?: string;
-  createdAt: string;
-}
-interface Plan {
-  vision?: string;
-  brief?: string;
-  brief_filename?: string; // stored as `vision` server-side, surfaced as "Objective" in the UI
-  ideas: Idea[]; // legacy bin — no longer surfaced; kept on the model for backward compat
-  tasks: Task[];
-  decisions: Decision[];
-}
-
-interface Session {
-  id: string;
-  title: string;
-  summary: string | null;
-  messageCount: number;
-  updatedAt: string;
-  createdAt: string;
-}
-
-type Section = "objective" | "sessions" | "tasks" | "decisions";
-
-interface SectionDef {
-  key: Section;
-  label: string;
-  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>;
-  blurb: string;
-}
-
-const SECTIONS: SectionDef[] = [
-  {
-    key: "objective",
-    label: "Objective",
-    icon: Target,
-    blurb: "What you're building, who it's for, and why.",
-  },
-  {
-    key: "tasks",
-    label: "Features",
-    icon: ListTodo,
-    blurb: "High-level capabilities to be delegated to the AI.",
-  },
-  {
-    key: "decisions",
-    label: "Decisions",
-    icon: GitBranch,
-    blurb: "Choices already made — so we stop re-litigating them.",
-  },
-  {
-    key: "sessions",
-    label: "Sessions",
-    icon: MessageSquare,
-    blurb: "Past chat sessions for this project.",
-  },
-];
-
-// ──────────────────────────────────────────────────
-// Page
-// ──────────────────────────────────────────────────
-
-export default function PlanTab() {
-  const params = useParams();
-  const projectId = params.projectId as string;
-  const workspace = params.workspace as string;
-
-  const [plan, setPlan] = useState<Plan | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [active, setActive] = useState<Section>("objective");
-  const [sessionCount, setSessionCount] = useState(0);
-
-  const load = useCallback(async () => {
-    try {
-      const res = await fetch(`/api/projects/${projectId}/plan`, {
-        credentials: "include",
-      });
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const data = await res.json();
-      setPlan(data.plan);
-      setError(null);
-    } catch (e: any) {
-      setError(e?.message ?? "Failed to load plan");
-    } finally {
-      setLoading(false);
-    }
-  }, [projectId]);
-
-  useEffect(() => {
-    load();
-    // Only poll the plan API periodically if we aren't currently editing or saving
-    // something, otherwise we risk overwriting user input or causing layout thrashing.
-    const intervalId = setInterval(load, 15000); // Backed off from 5s to 15s to reduce API spam
-    return () => clearInterval(intervalId);
-  }, [load]);
-
-  if (loading && !plan) {
-    return (
-      <div style={pageWrap}>
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: 10,
-            color: INK.mid,
-          }}
-        >
-          <Loader2 size={16} className="animate-spin" /> Loading plan…
-        </div>
-      </div>
-    );
-  }
-  if (error || !plan) {
-    return (
-      <div style={pageWrap}>
-        <div style={errorBox}>
-          <AlertCircle
-            size={14}
-            style={{ marginRight: 6, verticalAlign: -2 }}
-          />
-          {error ?? "No plan data"}
-        </div>
-      </div>
-    );
-  }
-
-  const counts: Record<Section, number> = {
-    objective: plan.vision ? 1 : 0,
-    sessions: sessionCount,
-    tasks: plan.tasks.filter((t) => t.status !== "done").length,
-    decisions: plan.decisions.length,
-  };
-
-  return (
-    <div style={pageWrap}>
-      <style jsx global>{`
-        .vibn-prose {
-          font-family: "Outfit", "Inter", ui-sans-serif, sans-serif;
-          color: #1a1a1a;
-          font-size: 0.95rem;
-          line-height: 1.65;
-        }
-        .vibn-prose > :first-child {
-          margin-top: 0;
-        }
-        .vibn-prose > :last-child {
-          margin-bottom: 0;
-        }
-        .vibn-prose h1,
-        .vibn-prose h2,
-        .vibn-prose h3,
-        .vibn-prose h4 {
-          font-family: "Newsreader", "Lora", Georgia, serif;
-          font-weight: 500;
-          letter-spacing: -0.01em;
-          margin: 1.4em 0 0.5em;
-          line-height: 1.25;
-          color: #1a1a1a;
-        }
-        .vibn-prose h1 {
-          font-size: 1.7rem;
-          font-weight: 400;
-          letter-spacing: -0.02em;
-        }
-        .vibn-prose h2 {
-          font-size: 1.3rem;
-        }
-        .vibn-prose h3 {
-          font-size: 1.05rem;
-        }
-        .vibn-prose h4 {
-          font-size: 0.95rem;
-        }
-        .vibn-prose p,
-        .vibn-prose ul,
-        .vibn-prose ol,
-        .vibn-prose blockquote {
-          margin: 0.75em 0;
-        }
-        .vibn-prose ul,
-        .vibn-prose ol {
-          padding-left: 1.4em;
-        }
-        .vibn-prose li {
-          margin: 0.25em 0;
-        }
-        .vibn-prose li > p {
-          margin: 0.25em 0;
-        }
-        .vibn-prose blockquote {
-          border-left: 3px solid #e8e4dc;
-          padding: 0.1em 0 0.1em 14px;
-          color: #5f5e5a;
-          font-style: italic;
-        }
-        .vibn-prose code {
-          font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
-          font-size: 0.85em;
-          background: #f3eee4;
-          padding: 1px 5px;
-          border-radius: 4px;
-        }
-        .vibn-prose pre {
-          font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
-          font-size: 0.84rem;
-          line-height: 1.55;
-          background: #1a1a1a;
-          color: #f6f4f0;
-          padding: 14px 16px;
-          border-radius: 8px;
-          overflow-x: auto;
-          margin: 1em 0;
-        }
-        .vibn-prose pre code {
-          background: transparent;
-          color: inherit;
-          padding: 0;
-          font-size: inherit;
-        }
-        .vibn-prose a {
-          color: #1a1a1a;
-          text-decoration: underline;
-          text-decoration-color: #c8c2b6;
-          text-underline-offset: 3px;
-        }
-        .vibn-prose a:hover {
-          text-decoration-color: #1a1a1a;
-        }
-        .vibn-prose hr {
-          border: none;
-          border-top: 1px solid #e8e4dc;
-          margin: 1.6em 0;
-        }
-        .vibn-prose table {
-          border-collapse: collapse;
-          width: 100%;
-          margin: 1em 0;
-          font-size: 0.88rem;
-        }
-        .vibn-prose th,
-        .vibn-prose td {
-          border: 1px solid #e8e4dc;
-          padding: 8px 12px;
-          text-align: left;
-        }
-        .vibn-prose th {
-          background: #fafaf6;
-          font-weight: 600;
-        }
-        .vibn-prose img {
-          max-width: 100%;
-          border-radius: 6px;
-        }
-      `}</style>
-      <div style={planStack}>
-        <nav style={planNav} aria-label="Plan sections">
-          <h2 style={heading}>Plan</h2>
-          <div style={tileRow}>
-            {SECTIONS.map((def) => (
-              <SectionTile
-                key={def.key}
-                def={def}
-                count={counts[def.key]}
-                active={active === def.key}
-                onClick={() => setActive(def.key)}
-              />
-            ))}
-          </div>
-        </nav>
-
-        <section style={planMain}>
-          <div style={panel}>
-            {active === "objective" && (
-              <VisionPanel
-                plan={plan}
-                projectId={projectId}
-                onChange={setPlan}
-              />
-            )}
-            {active === "sessions" && (
-              <SessionsPanel
-                workspace={workspace}
-                projectId={projectId}
-                onCount={setSessionCount}
-              />
-            )}
-            {active === "tasks" && (
-              <TasksPanel
-                plan={plan}
-                projectId={projectId}
-                onChange={setPlan}
-              />
-            )}
-            {active === "decisions" && (
-              <DecisionsPanel
-                plan={plan}
-                projectId={projectId}
-                onChange={setPlan}
-              />
-            )}
-          </div>
-        </section>
-      </div>
-    </div>
-  );
-}
-
-// ──────────────────────────────────────────────────
-// Left rail tile
-// ──────────────────────────────────────────────────
-
-function SectionTile({
-  def,
-  count,
-  active,
-  onClick,
-}: {
-  def: SectionDef;
-  count: number;
-  active: boolean;
-  onClick: () => void;
-}) {
-  const Icon = def.icon;
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      style={{
-        ...tileButton,
-        background: active ? "#fff" : "transparent",
-        borderColor: active ? INK.border : "transparent",
-        boxShadow: active ? "0 1px 3px rgba(0,0,0,0.04)" : "none",
-      }}
-      aria-pressed={active}
-    >
-      <Icon size={14} style={{ color: INK.mid, flexShrink: 0 }} />
-      <span style={{ ...tileLabel, color: active ? INK.ink : INK.mid }}>
-        {def.label}
-      </span>
-      <span style={countPill}>{count}</span>
-    </button>
-  );
-}
-
-// ──────────────────────────────────────────────────
-// Vision
-// ──────────────────────────────────────────────────
-
-function BriefPanel({
-  plan,
-  projectId,
-  onChange,
-}: {
-  plan: Plan;
-  projectId: string;
-  onChange: (p: Plan) => void;
-}) {
-  const [draft, setDraft] = useState(plan.brief ?? "");
-  const [saving, setSaving] = useState(false);
-  const [editing, setEditing] = useState(!plan.brief);
-  const [editorView, setEditorView] = useState<"write" | "preview">("write");
-  const [dirty, setDirty] = useState(false);
-
-  useEffect(() => {
-    setDraft(plan.brief ?? "");
-    setDirty(false);
-  }, [plan.brief]);
-
-  const handleSave = async () => {
-    setSaving(true);
-    try {
-      const res = await fetch(`/api/projects/${projectId}/plan`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ kind: "brief", text: draft }),
-      });
-      if (res.ok) {
-        onChange({ ...plan, brief: draft });
-        setDirty(false);
-        setEditing(false);
-      }
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    // For now we just read text files (txt, md, csv).
-    // In the future you can send PDFs to an extraction API.
-    const reader = new FileReader();
-    reader.onload = async (event) => {
-      const content = event.target?.result as string;
-      setDraft(content);
-      setDirty(true);
-      setEditing(true);
-    };
-    reader.readAsText(file);
-  };
-
-  if (!editing && plan.brief) {
-    return (
-      <div className="vibn-enter" style={{ position: "relative" }}>
-        <button
-          onClick={() => setEditing(true)}
-          style={{
-            position: "absolute",
-            top: 0,
-            right: 0,
-            padding: "6px 12px",
-            borderRadius: 6,
-            background: "transparent",
-            border: "1px solid #e8e4dc",
-            fontSize: "0.75rem",
-            color: "#6b6560",
-            cursor: "pointer",
-            display: "flex",
-            alignItems: "center",
-            gap: 6,
-          }}
-        >
-          <Pencil style={{ width: 12, height: 12 }} /> Edit
-        </button>
-        <div style={{ padding: "8px 0" }}>
-          <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
-            components={{
-              p: ({ node, ...props }) => (
-                <p
-                  style={{
-                    fontSize: "0.95rem",
-                    lineHeight: 1.6,
-                    color: "#1a1a1a",
-                    marginBottom: 16,
-                  }}
-                  {...props}
-                />
-              ),
-              h1: ({ node, ...props }) => (
-                <h1
-                  style={{
-                    fontSize: "1.4rem",
-                    fontWeight: 600,
-                    color: "#1a1a1a",
-                    marginTop: 24,
-                    marginBottom: 16,
-                  }}
-                  {...props}
-                />
-              ),
-              h2: ({ node, ...props }) => (
-                <h2
-                  style={{
-                    fontSize: "1.2rem",
-                    fontWeight: 600,
-                    color: "#1a1a1a",
-                    marginTop: 20,
-                    marginBottom: 12,
-                  }}
-                  {...props}
-                />
-              ),
-              h3: ({ node, ...props }) => (
-                <h3
-                  style={{
-                    fontSize: "1.05rem",
-                    fontWeight: 600,
-                    color: "#1a1a1a",
-                    marginTop: 16,
-                    marginBottom: 10,
-                  }}
-                  {...props}
-                />
-              ),
-              ul: ({ node, ...props }) => (
-                <ul
-                  style={{
-                    fontSize: "0.95rem",
-                    lineHeight: 1.6,
-                    color: "#1a1a1a",
-                    paddingLeft: 24,
-                    marginBottom: 16,
-                    listStyleType: "disc",
-                  }}
-                  {...props}
-                />
-              ),
-              ol: ({ node, ...props }) => (
-                <ol
-                  style={{
-                    fontSize: "0.95rem",
-                    lineHeight: 1.6,
-                    color: "#1a1a1a",
-                    paddingLeft: 24,
-                    marginBottom: 16,
-                    listStyleType: "decimal",
-                  }}
-                  {...props}
-                />
-              ),
-              li: ({ node, ...props }) => (
-                <li style={{ marginBottom: 6 }} {...props} />
-              ),
-            }}
-          >
-            {plan.brief}
-          </ReactMarkdown>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="vibn-enter">
-      {!plan.brief && (
-        <div style={emptyVisionBox}>
-          <p
-            style={{
-              margin: 0,
-              marginBottom: 12,
-              fontSize: "0.9rem",
-              color: "#444441",
-              lineHeight: 1.55,
-            }}
-          >
-            No project brief uploaded. You can paste your PRD, requirements
-            document, or notes below. The AI will read this to understand the
-            full scope of your project.
-          </p>
-          <div style={{ display: "flex", gap: "12px" }}>
-            <label
-              style={{
-                ...primaryBtn,
-                cursor: "pointer",
-                display: "inline-flex",
-              }}
-            >
-              Upload Text File (.md, .txt)
-              <input
-                type="file"
-                accept=".txt,.md,.csv"
-                style={{ display: "none" }}
-                onChange={handleFileUpload}
-              />
-            </label>
-            <button
-              onClick={() => setEditing(true)}
-              style={{
-                padding: "8px 16px",
-                borderRadius: 7,
-                background: "transparent",
-                color: "#1a1a1a",
-                border: "1px solid #1a1a1a",
-                fontSize: "0.82rem",
-                fontWeight: 600,
-                cursor: "pointer",
-              }}
-            >
-              Paste Manually
-            </button>
-          </div>
-        </div>
-      )}
-
-      {editing && (
-        <div
-          style={{
-            background: "#fff",
-            border: "1px solid #e8e4dc",
-            borderRadius: 10,
-            overflow: "hidden",
-            marginTop: plan.brief ? 0 : 24,
-          }}
-        >
-          <div
-            style={{
-              display: "flex",
-              borderBottom: "1px solid #e8e4dc",
-              background: "#faf8f5",
-            }}
-          >
-            <button
-              onClick={() => setEditorView("write")}
-              style={{
-                ...tabStyle(editorView === "write" ? "write" : ""),
-                borderRadius: 0,
-                border: "none",
-                borderRight: "1px solid #e8e4dc",
-                borderBottom:
-                  editorView === "write"
-                    ? "1px solid transparent"
-                    : "1px solid #e8e4dc",
-                background: editorView === "write" ? "#fff" : "transparent",
-              }}
-            >
-              Write
-            </button>
-            <button
-              onClick={() => setEditorView("preview")}
-              style={{
-                ...tabStyle(editorView === "preview" ? "preview" : ""),
-                borderRadius: 0,
-                border: "none",
-                borderRight: "1px solid #e8e4dc",
-                borderBottom:
-                  editorView === "preview"
-                    ? "1px solid transparent"
-                    : "1px solid #e8e4dc",
-                background: editorView === "preview" ? "#fff" : "transparent",
-              }}
-            >
-              Preview
-            </button>
-            <div style={{ flex: 1, borderBottom: "1px solid #e8e4dc" }} />
-          </div>
-
-          {editorView === "write" ? (
-            <textarea
-              value={draft}
-              onChange={(e) => {
-                setDraft(e.target.value);
-                setDirty(true);
-              }}
-              placeholder="Paste your PRD or project scope here..."
-              style={{
-                width: "100%",
-                minHeight: 300,
-                padding: 20,
-                border: "none",
-                outline: "none",
-                fontSize: "0.9rem",
-                lineHeight: 1.6,
-                fontFamily: "var(--font-inter), sans-serif",
-                color: "#1a1a1a",
-                resize: "vertical",
-              }}
-            />
-          ) : (
-            <div
-              style={{
-                padding: 20,
-                minHeight: 300,
-                maxHeight: 500,
-                overflowY: "auto",
-              }}
-            >
-              {draft ? (
-                <ReactMarkdown
-                  remarkPlugins={[remarkGfm]}
-                  components={{
-                    p: ({ node, ...props }) => (
-                      <p
-                        style={{
-                          fontSize: "0.95rem",
-                          lineHeight: 1.6,
-                          color: "#1a1a1a",
-                          marginBottom: 16,
-                        }}
-                        {...props}
-                      />
-                    ),
-                    h1: ({ node, ...props }) => (
-                      <h1
-                        style={{
-                          fontSize: "1.4rem",
-                          fontWeight: 600,
-                          color: "#1a1a1a",
-                          marginTop: 24,
-                          marginBottom: 16,
-                        }}
-                        {...props}
-                      />
-                    ),
-                    h2: ({ node, ...props }) => (
-                      <h2
-                        style={{
-                          fontSize: "1.2rem",
-                          fontWeight: 600,
-                          color: "#1a1a1a",
-                          marginTop: 20,
-                          marginBottom: 12,
-                        }}
-                        {...props}
-                      />
-                    ),
-                    ul: ({ node, ...props }) => (
-                      <ul
-                        style={{
-                          fontSize: "0.95rem",
-                          lineHeight: 1.6,
-                          color: "#1a1a1a",
-                          paddingLeft: 24,
-                          marginBottom: 16,
-                          listStyleType: "disc",
-                        }}
-                        {...props}
-                      />
-                    ),
-                    li: ({ node, ...props }) => (
-                      <li style={{ marginBottom: 6 }} {...props} />
-                    ),
-                  }}
-                >
-                  {draft}
-                </ReactMarkdown>
-              ) : (
-                <p style={{ color: "#a09a90", fontStyle: "italic", margin: 0 }}>
-                  Nothing to preview.
-                </p>
-              )}
-            </div>
-          )}
-
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "flex-end",
-              gap: 12,
-              padding: "12px 20px",
-              borderTop: "1px solid #e8e4dc",
-              background: "#faf8f5",
-            }}
-          >
-            {plan.brief && (
-              <button
-                onClick={() => {
-                  setDraft(plan.brief ?? "");
-                  setDirty(false);
-                  setEditing(false);
-                }}
-                style={{
-                  padding: "8px 16px",
-                  borderRadius: 6,
-                  background: "transparent",
-                  border: "1px solid #e8e4dc",
-                  color: "#6b6560",
-                  fontSize: "0.82rem",
-                  fontWeight: 500,
-                  cursor: "pointer",
-                }}
-              >
-                Cancel
-              </button>
-            )}
-            <button
-              onClick={handleSave}
-              disabled={!dirty || saving}
-              style={{ ...primaryBtn, opacity: !dirty || saving ? 0.5 : 1 }}
-            >
-              {saving ? (
-                <Loader2
-                  style={{ width: 14, height: 14 }}
-                  className="animate-spin"
-                />
-              ) : null}
-              {saving ? "Saving..." : "Save Brief"}
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function VisionPanel({
-  plan,
-  projectId,
-  onChange,
-}: {
-  plan: Plan;
-  projectId: string;
-  onChange: (p: Plan) => void;
-}) {
-  const [draft, setDraft] = useState(plan.vision ?? "");
-  const [saving, setSaving] = useState(false);
-  const [editing, setEditing] = useState(!plan.vision);
-  // While editing, toggle between raw markdown source and rendered preview.
-  const [editorView, setEditorView] = useState<"write" | "preview">("write");
-  const [dirty, setDirty] = useState(false);
-
-  useEffect(() => {
-    setDraft(plan.vision ?? "");
-    setDirty(false);
-  }, [plan.vision]);
-
-  const save = async () => {
-    setSaving(true);
-    try {
-      const r = await fetch(`/api/projects/${projectId}/plan`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ kind: "vision", text: draft }),
-      });
-      const d = await r.json();
-      if (d.plan) onChange(d.plan);
-      setDirty(false);
-      setEditing(false);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const cancel = () => {
-    setDraft(plan.vision ?? "");
-    setDirty(false);
-    setEditing(false);
-  };
-
-  return (
-    <div>
-      <div style={visionHeaderRow}>
-        <h3 style={panelTitle}>Objective</h3>
-        {!editing && plan.vision && (
-          <button onClick={() => setEditing(true)} style={ghostBtn}>
-            <Pencil size={12} /> Edit
-          </button>
-        )}
-      </div>
-
-      {editing ? (
-        <>
-          <div style={editorTabs}>
-            <button
-              type="button"
-              onClick={() => setEditorView("write")}
-              style={editorView === "write" ? editorTabActive : editorTab}
-            >
-              <FileText size={12} /> Write
-            </button>
-            <button
-              type="button"
-              onClick={() => setEditorView("preview")}
-              style={editorView === "preview" ? editorTabActive : editorTab}
-            >
-              <Eye size={12} /> Preview
-            </button>
-            <span style={{ flex: 1 }} />
-            {dirty && <span style={dirtyDot}>● Unsaved</span>}
-          </div>
-
-          {editorView === "write" ? (
-            <textarea
-              value={draft}
-              onChange={(e) => {
-                setDraft(e.target.value);
-                setDirty(true);
-              }}
-              placeholder={visionPlaceholder}
-              style={visionTextarea}
-              spellCheck
-            />
-          ) : (
-            <div style={visionPreviewBox}>
-              {draft.trim() ? (
-                <div className="vibn-prose">
-                  <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                    {draft}
-                  </ReactMarkdown>
-                </div>
-              ) : (
-                <div style={{ color: INK.muted, fontStyle: "italic" }}>
-                  Nothing to preview yet.
-                </div>
-              )}
-            </div>
-          )}
-
-          <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
-            <button
-              onClick={save}
-              disabled={saving || !dirty}
-              style={primaryBtn}
-            >
-              {saving ? (
-                <Loader2 size={13} className="animate-spin" />
-              ) : (
-                <Check size={13} />
-              )}
-              Save
-            </button>
-            <button onClick={cancel} style={ghostBtn}>
-              <X size={13} /> Cancel
-            </button>
-          </div>
-        </>
-      ) : plan.vision ? (
-        <div className="vibn-prose">
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>
-            {plan.vision}
-          </ReactMarkdown>
-        </div>
-      ) : (
-        <div style={emptyVisionBox}>
-          <p
-            style={{
-              margin: 0,
-              marginBottom: 12,
-              fontSize: "0.9rem",
-              color: INK.mid,
-              lineHeight: 1.55,
-            }}
-          >
-            No objective yet. Write a few paragraphs about the problem, the
-            people you&apos;re building it for, and the shape of the solution.
-            The AI reads this on every chat so it stays anchored to your real
-            intent.
-          </p>
-          <button
-            onClick={() => {
-              setEditing(true);
-              setEditorView("write");
-            }}
-            style={primaryBtn}
-          >
-            <Plus size={13} /> Start writing
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-const visionPlaceholder = `# What we're building
-
-A short paragraph on the problem and who feels it.
-
-## Who it's for
-
-Describe the user — their context, what they currently do, and why it's painful.
-
-## What success looks like
-
-What changes when this exists?
-`;
-
-// ──────────────────────────────────────────────────
-// Sessions — read-only log of past chat threads scoped to this project.
-// Title is auto-generated by the chat backend on first message; summary
-// (when present) is filled in by the AI at end-of-thread. Clicking a row
-// jumps the user back into that conversation in the side chat panel.
-// ──────────────────────────────────────────────────
-
-function SessionsPanel({
-  workspace,
-  projectId,
-  onCount,
-}: {
-  workspace: string;
-  projectId: string;
-  onCount: (n: number) => void;
-}) {
-  const [sessions, setSessions] = useState<Session[] | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [err, setErr] = useState<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-    setLoading(true);
-    fetch(
-      `/api/chat/threads?workspace=${encodeURIComponent(workspace)}&projectId=${encodeURIComponent(projectId)}`,
-      {
-        credentials: "include",
-      },
-    )
-      .then((r) =>
-        r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`)),
-      )
-      .then((d) => {
-        if (cancelled) return;
-        const list: Session[] = d.threads ?? [];
-        setSessions(list);
-        onCount(list.length);
-      })
-      .catch((e) => {
-        if (!cancelled) setErr(e?.message ?? "Failed to load sessions");
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [workspace, projectId, onCount]);
-
-  return (
-    <div>
-      <PanelHeader
-        title="Sessions"
-        hint="Past chat sessions on this project. Each one captures what was attempted, decided, or shipped."
-      />
-      {loading ? (
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            color: INK.mid,
-            fontSize: "0.85rem",
-            padding: "8px 0",
-          }}
-        >
-          <Loader2 size={13} className="animate-spin" /> Loading sessions…
-        </div>
-      ) : err ? (
-        <div style={errorBox}>
-          <AlertCircle
-            size={13}
-            style={{ marginRight: 6, verticalAlign: -2 }}
-          />
-          {err}
-        </div>
-      ) : !sessions || sessions.length === 0 ? (
-        <div style={emptyBox}>
-          No sessions yet.{" "}
-          <span style={{ display: "block", marginTop: 8, color: INK.mid }}>
-            Open the chat and ask anything — each conversation becomes a session
-            entry here with an AI-generated summary.
-          </span>
-          <span style={promptNudge}>
-            Try: &quot;What should I build first for this project?&quot;
-          </span>
-        </div>
-      ) : (
-        <ul style={list}>
-          {sessions.map((s) => (
-            <li key={s.id} style={{ ...sessionRow, padding: 0 }}>
-              <a
-                href={`/${workspace}/project/${projectId}/sessions/${s.id}`}
-                style={{
-                  display: "flex",
-                  alignItems: "flex-start",
-                  gap: 12,
-                  textDecoration: "none",
-                  color: "inherit",
-                  width: "100%",
-                  padding: "12px 14px",
-                  borderRadius: 8,
-                  transition: "background 0.15s",
-                }}
-                onMouseEnter={(e) =>
-                  (e.currentTarget.style.background = "rgba(0,0,0,0.03)")
-                }
-                onMouseLeave={(e) =>
-                  (e.currentTarget.style.background = "transparent")
-                }
-              >
-                <MessageSquare
-                  size={14}
-                  style={{ color: INK.mid, marginTop: 2, flexShrink: 0 }}
-                />
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={sessionTitle}>{s.title}</div>
-                  {s.summary && <div style={sessionSummary}>{s.summary}</div>}
-                  <div style={sessionMeta}>
-                    <span>
-                      {s.messageCount}{" "}
-                      {s.messageCount === 1 ? "message" : "messages"}
-                    </span>
-                    <span style={{ color: INK.muted }}>·</span>
-                    <span>{relativeTime(s.updatedAt)}</span>
-                  </div>
-                </div>
-              </a>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}
-
-// ──────────────────────────────────────────────────
-// Tasks
-// ──────────────────────────────────────────────────
-
-// Tasks. Each task is a *scoped unit of work* with a markdown spec —
-// a feature, a refactor, an investigation. The list-detail layout
-// mirrors how engineers think: pick one off the queue, see the full
-// brief, work it (or delegate it). Phase 2 will wire the "Delegate"
-// button to a background agent runner that executes the task spec
-// against the MCP and writes progress back here.
-
-function taskTitle(t: Task): string {
-  return (t.title || t.text || "Untitled task").trim();
-}
-
-const TASK_STATUS_LABEL: Record<TaskStatus, string> = {
-  open: "Open",
-  in_progress: "In progress",
-  review: "In review",
-
-  done: "Done",
-  blocked: "Blocked",
-};
-const TASK_STATUS_COLOR: Record<TaskStatus, string> = {
-  open: "#5f5e5a",
-  in_progress: "#1d6cd0",
-  review: "#f1a80a",
-
-  done: "#1f8c4d",
-  blocked: "#b94a3a",
-};
-
-function TasksPanel({
-  plan,
-  projectId,
-  onChange,
-}: {
-  plan: Plan;
-  projectId: string;
-  onChange: (p: Plan) => void;
-}) {
-  const tasks = plan.tasks;
-  const [selectedId, setSelectedId] = useState<string | null>(
-    () => tasks[0]?.id ?? null,
-  );
-  const [creating, setCreating] = useState(false);
-  const [filter, setFilter] = useState<"all" | "active" | "done">("active");
-
-  // Keep selection valid when the underlying list changes (delete / add).
-  useEffect(() => {
-    if (!selectedId && tasks.length > 0) {
-      setSelectedId(tasks[0].id);
-      return;
-    }
-    if (selectedId && !tasks.some((t) => t.id === selectedId)) {
-      setSelectedId(tasks[0]?.id ?? null);
-    }
-  }, [tasks, selectedId]);
-
-  const visible = tasks.filter((t) => {
-    if (filter === "all") return true;
-    if (filter === "done") return t.status === "done";
-    return t.status !== "done";
-  });
-  const selected = tasks.find((t) => t.id === selectedId) ?? null;
-
-  return (
-    <div>
-      <div style={visionHeaderRow}>
-        <h3 style={panelTitle}>Features</h3>
-        <button
-          onClick={() => {
-            setCreating(true);
-            setSelectedId(null);
-          }}
-          style={primaryBtn}
-        >
-          <Plus size={13} /> New Feature
-        </button>
-      </div>
-
-      <div style={taskFilterRow}>
-        {(["active", "done", "all"] as const).map((f) => (
-          <button
-            key={f}
-            type="button"
-            onClick={() => setFilter(f)}
-            style={filter === f ? taskFilterPillActive : taskFilterPill}
-          >
-            {f === "active" ? "Active" : f === "done" ? "Done" : "All"} ·{" "}
-            {f === "active"
-              ? tasks.filter((t) => t.status !== "done").length
-              : f === "done"
-                ? tasks.filter((t) => t.status === "done").length
-                : tasks.length}
-          </button>
-        ))}
-      </div>
-
-      <div style={taskSplit}>
-        <div style={taskListCol}>
-          {visible.length === 0 && !creating ? (
-            <div style={{ ...emptyBox, marginTop: 0 }}>
-              {tasks.length === 0 ? (
-                <>
-                  No features defined yet.
-                  <span
-                    style={{
-                      display: "block",
-                      marginTop: 8,
-                      color: INK.mid,
-                      fontSize: "0.8rem",
-                    }}
-                  >
-                    Ask the AI to break down your objective — it will create
-                    scoped features automatically.
-                  </span>
-                  <span style={promptNudge}>
-                    Try: &quot;Draft the features for this app&quot;
-                  </span>
-                </>
-              ) : (
-                "Nothing in this view."
-              )}
-            </div>
-          ) : (
-            <div>
-              {(() => {
-                const groups: Record<string, typeof visible> = {};
-                for (const t of visible) {
-                  const title = taskTitle(t);
-                  const match = title.match(/^\[(.*?)\]\s*(.*)$/);
-                  const groupName = match ? match[1] : "Uncategorized";
-                  const cleanTitle = match ? match[2] : title;
-                  
-                  if (!groups[groupName]) groups[groupName] = [];
-                  groups[groupName].push({ ...t, title: cleanTitle });
-                }
-
-                const groupKeys = Object.keys(groups).sort((a, b) => {
-                  if (a === "Uncategorized") return 1;
-                  if (b === "Uncategorized") return -1;
-                  return a.localeCompare(b);
-                });
-
-                return groupKeys.map(groupKey => (
-                  <div key={groupKey} style={{ marginBottom: 16 }}>
-                    <div style={{
-                      fontSize: "0.75rem",
-                      fontWeight: 600,
-                      color: "var(--fg-mute)",
-                      textTransform: "uppercase",
-                      letterSpacing: "0.04em",
-                      marginBottom: 8,
-                      marginLeft: 2,
-                    }}>
-                      {groupKey}
-                    </div>
-                    <ul style={taskList}>
-                      {groups[groupKey].map((t) => (
-                        <li key={t.id}>
-                          <button
-                            type="button"
-                            onClick={() => {
-                              setSelectedId(t.id);
-                              setCreating(false);
-                            }}
-                            style={selectedId === t.id ? taskItemActive : taskItem}
-                          >
-                            <div
-                              style={{ display: "flex", alignItems: "center", gap: 8 }}
-                            >
-                              <span
-                                style={{
-                                  ...taskStatusDot,
-                                  background: TASK_STATUS_COLOR[t.status],
-                                }}
-                              />
-                              <span style={taskItemTitle}>{t.title}</span>
-                            </div>
-                            <div style={taskItemMeta}>
-                              <span>{TASK_STATUS_LABEL[t.status]}</span>
-                              <span style={{ color: INK.muted }}>·</span>
-                              <span>
-                                {relativeTime(t.doneAt ?? t.startedAt ?? t.createdAt)}
-                              </span>
-                            </div>
-                          </button>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                ));
-              })()}
-            </div>
-          )}
-        </div>
-
-        <div style={taskDetailCol}>
-          {creating ? (
-            <TaskComposer
-              projectId={projectId}
-              onCancel={() => setCreating(false)}
-              onCreated={(plan, newId) => {
-                onChange(plan);
-                setCreating(false);
-                setSelectedId(newId);
-              }}
-            />
-          ) : selected ? (
-            <TaskDetail
-              task={selected}
-              projectId={projectId}
-              onChange={onChange}
-            />
-          ) : (
-            <div style={{ ...emptyBox, marginTop: 0 }}>
-              Pick a task on the left, or create a new one.
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ─────────────────────────────────────
-// Task detail — view + inline edit + status + delegate stub
-// ─────────────────────────────────────
-
-function TaskDetail({
-  task,
-  projectId,
-  onChange,
-}: {
-  task: Task;
-  projectId: string;
-  onChange: (p: Plan) => void;
-}) {
-  const [editing, setEditing] = useState(false);
-  const [titleDraft, setTitleDraft] = useState(taskTitle(task));
-  const [descDraft, setDescDraft] = useState(task.description ?? "");
-  const [editorView, setEditorView] = useState<"write" | "preview">("write");
-  const [saving, setSaving] = useState(false);
-
-  // Reset drafts whenever the selected task changes.
-  useEffect(() => {
-    setTitleDraft(taskTitle(task));
-    setDescDraft(task.description ?? "");
-    setEditing(false);
-  }, [task.id, task.title, task.description, task]);
-
-  const patch = async (body: Record<string, unknown>) => {
-    const r = await fetch(`/api/projects/${projectId}/plan`, {
-      method: "PATCH",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ kind: "task", id: task.id, ...body }),
-    });
-    const d = await r.json();
-    if (d.plan) onChange(d.plan);
-  };
-
-  const save = async () => {
-    setSaving(true);
-    try {
-      await patch({ title: titleDraft.trim(), description: descDraft });
-      setEditing(false);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const remove = async () => {
-    const r = await fetch(
-      `/api/projects/${projectId}/plan?kind=task&id=${task.id}`,
-      { method: "DELETE" },
-    );
-    const d = await r.json();
-    if (d.plan) onChange(d.plan);
-  };
-
-  return (
-    <div style={taskDetailWrap}>
-      <div style={taskDetailHeader}>
-        {editing ? (
-          <input
-            value={titleDraft}
-            onChange={(e) => setTitleDraft(e.target.value)}
-            placeholder="Task title"
-            style={{ ...input, fontSize: "1.05rem", fontWeight: 600 }}
-          />
-        ) : (
-          <h4 style={taskDetailTitle}>{taskTitle(task)}</h4>
-        )}
-        <div style={{ display: "flex", gap: 8, flexShrink: 0 }}>
-          {!editing && (
-            <button onClick={() => setEditing(true)} style={ghostBtn}>
-              <Pencil size={12} /> Edit
-            </button>
-          )}
-          {!editing && (
-            <button onClick={remove} style={ghostBtn} title="Delete task">
-              <Trash2 size={12} />
-            </button>
-          )}
-        </div>
-      </div>
-
-      <div style={taskStatusRow}>
-        <span style={taskStatusLabel}>Status</span>
-        <select
-          value={task.status}
-          onChange={(e) => patch({ status: e.target.value })}
-          style={taskStatusSelect}
-        >
-          <option value="open">Open</option>
-          <option value="in_progress">In progress</option>
-          <option value="review">In review</option>
-
-          <option value="blocked">Blocked</option>
-          <option value="done">Done</option>
-        </select>
-        <span style={{ flex: 1 }} />
-        <button
-          type="button"
-          disabled={saving}
-          onClick={async () => {
-            if (
-              !confirm(
-                `Delegate feature "${task.title}" to an autonomous agent? It will execute this in the background, test it, and deploy.`,
-              )
-            )
-              return;
-            setSaving(true);
-            try {
-              const r = await fetch(
-                `/api/projects/${projectId}/agent/sessions`,
-                {
-                  method: "POST",
-                  headers: { "Content-Type": "application/json" },
-                  body: JSON.stringify({
-                    appName: "frontend",
-                    appPath: ".",
-                    task: `Task: ${task.title}\n\n${task.description || ""}`,
-                  }),
-                },
-              );
-              if (!r.ok) {
-                const err = await r.json().catch(() => ({}));
-                throw new Error(err.error || `HTTP ${r.status}`);
-              }
-              alert(
-                "Agent spawned successfully! It is now working in the background.",
-              );
-            } catch (err) {
-              alert(
-                `Failed to spawn agent: ${err instanceof Error ? err.message : String(err)}`,
-              );
-            } finally {
-              setSaving(false);
-            }
-          }}
-          style={{
-            ...delegateBtn,
-            opacity: saving ? 0.5 : 1,
-            cursor: saving ? "wait" : "pointer",
-          }}
-          title="Delegate this task to a background AI agent"
-        >
-          <Sparkle /> Delegate to agent
-        </button>
-      </div>
-
-      {editing ? (
-        <>
-          <div style={editorTabs}>
-            <button
-              type="button"
-              onClick={() => setEditorView("write")}
-              style={editorView === "write" ? editorTabActive : editorTab}
-            >
-              <FileText size={12} /> Write
-            </button>
-            <button
-              type="button"
-              onClick={() => setEditorView("preview")}
-              style={editorView === "preview" ? editorTabActive : editorTab}
-            >
-              <Eye size={12} /> Preview
-            </button>
-          </div>
-          {editorView === "write" ? (
-            <textarea
-              value={descDraft}
-              onChange={(e) => setDescDraft(e.target.value)}
-              placeholder={taskPlaceholder}
-              style={visionTextarea}
-              spellCheck
-            />
-          ) : (
-            <div style={visionPreviewBox}>
-              {descDraft.trim() ? (
-                <div className="vibn-prose">
-                  <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                    {descDraft}
-                  </ReactMarkdown>
-                </div>
-              ) : (
-                <div style={{ color: INK.muted, fontStyle: "italic" }}>
-                  Nothing to preview yet.
-                </div>
-              )}
-            </div>
-          )}
-          <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
-            <button
-              onClick={save}
-              disabled={saving || !titleDraft.trim()}
-              style={primaryBtn}
-            >
-              {saving ? (
-                <Loader2 size={13} className="animate-spin" />
-              ) : (
-                <Check size={13} />
-              )}{" "}
-              Save
-            </button>
-            <button
-              onClick={() => {
-                setTitleDraft(taskTitle(task));
-                setDescDraft(task.description ?? "");
-                setEditing(false);
-              }}
-              style={ghostBtn}
-            >
-              <X size={13} /> Cancel
-            </button>
-          </div>
-        </>
-      ) : task.description?.trim() ? (
-        <div className="vibn-prose">
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>
-            {task.description}
-          </ReactMarkdown>
-        </div>
-      ) : (
-        <div style={{ ...emptyBox, marginTop: 0 }}>
-          No spec yet. Click <em>Edit</em> and describe what success looks like
-          for this task — context, acceptance criteria, gotchas. Markdown
-          supported.
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ─────────────────────────────────────
-// Task composer (new)
-// ─────────────────────────────────────
-
-function TaskComposer({
-  projectId,
-  onCancel,
-  onCreated,
-}: {
-  projectId: string;
-  onCancel: () => void;
-  onCreated: (plan: Plan, taskId: string) => void;
-}) {
-  const [title, setTitle] = useState("");
-  const [desc, setDesc] = useState("");
-  const [editorView, setEditorView] = useState<"write" | "preview">("write");
-  const [saving, setSaving] = useState(false);
-
-  const create = async () => {
-    if (!title.trim()) return;
-    setSaving(true);
-    try {
-      const r = await fetch(`/api/projects/${projectId}/plan`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          kind: "task",
-          title: title.trim(),
-          description: desc,
-        }),
-      });
-      const d = await r.json();
-      if (d.plan?.tasks?.[0]?.id) onCreated(d.plan, d.plan.tasks[0].id);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  return (
-    <div style={taskDetailWrap}>
-      <div style={taskDetailHeader}>
-        <input
-          autoFocus
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-          placeholder="What is this task? (e.g. 'Migrate auth to NextAuth v5')"
-          style={{ ...input, fontSize: "1.05rem", fontWeight: 600 }}
-        />
-      </div>
-      <div style={editorTabs}>
-        <button
-          type="button"
-          onClick={() => setEditorView("write")}
-          style={editorView === "write" ? editorTabActive : editorTab}
-        >
-          <FileText size={12} /> Write
-        </button>
-        <button
-          type="button"
-          onClick={() => setEditorView("preview")}
-          style={editorView === "preview" ? editorTabActive : editorTab}
-        >
-          <Eye size={12} /> Preview
-        </button>
-      </div>
-      {editorView === "write" ? (
-        <textarea
-          value={desc}
-          onChange={(e) => setDesc(e.target.value)}
-          placeholder={taskPlaceholder}
-          style={visionTextarea}
-          spellCheck
-        />
-      ) : (
-        <div style={visionPreviewBox}>
-          {desc.trim() ? (
-            <div className="vibn-prose">
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>{desc}</ReactMarkdown>
-            </div>
-          ) : (
-            <div style={{ color: INK.muted, fontStyle: "italic" }}>
-              Nothing to preview yet.
-            </div>
-          )}
-        </div>
-      )}
-      <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
-        <button
-          onClick={create}
-          disabled={saving || !title.trim()}
-          style={primaryBtn}
-        >
-          {saving ? (
-            <Loader2 size={13} className="animate-spin" />
-          ) : (
-            <Check size={13} />
-          )}{" "}
-          Create task
-        </button>
-        <button onClick={onCancel} style={ghostBtn}>
-          <X size={13} /> Cancel
-        </button>
-      </div>
-    </div>
-  );
-}
-
-const taskPlaceholder = `## Goal
-
-What does success look like? One paragraph.
-
-## Context
-
-Why this matters now. Any background the agent or future-you needs.
-
-## Acceptance criteria
-
-- [ ] First observable thing that proves it's done
-- [ ] Second
-- [ ] ...
-
-## Notes / gotchas
-
-Edge cases, related decisions, links.
-`;
-
-function Sparkle() {
-  // tiny inline glyph — avoids pulling another lucide icon for a stub button
-  return (
-    <span
-      aria-hidden
-      style={{
-        display: "inline-block",
-        width: 12,
-        height: 12,
-        fontSize: 12,
-        lineHeight: 1,
-      }}
-    >
-      ✦
-    </span>
-  );
-}
-
-// ──────────────────────────────────────────────────
-// Decisions
-// ──────────────────────────────────────────────────
-
-function DecisionsPanel({
-  plan,
-  projectId,
-  onChange,
-}: {
-  plan: Plan;
-  projectId: string;
-  onChange: (p: Plan) => void;
-}) {
-  const [adding, setAdding] = useState(false);
-  const [title, setTitle] = useState("");
-  const [choice, setChoice] = useState("");
-  const [why, setWhy] = useState("");
-  const [saving, setSaving] = useState(false);
-
-  const add = async () => {
-    if (!title.trim() || !choice.trim()) return;
-    setSaving(true);
-    try {
-      const r = await fetch(`/api/projects/${projectId}/plan`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          kind: "decision",
-          title: title.trim(),
-          choice: choice.trim(),
-          why: why.trim() || undefined,
-        }),
-      });
-      const d = await r.json();
-      if (d.plan) onChange(d.plan);
-      setTitle("");
-      setChoice("");
-      setWhy("");
-      setAdding(false);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const remove = async (id: string) => {
-    const r = await fetch(
-      `/api/projects/${projectId}/plan?kind=decision&id=${id}`,
-      { method: "DELETE" },
-    );
-    const d = await r.json();
-    if (d.plan) onChange(d.plan);
-  };
-
-  return (
-    <div>
-      <PanelHeader
-        title="Decisions"
-        hint="Once a question is settled, log it here. The AI reads decisions so it stops asking you to re-decide."
-      />
-      {adding ? (
-        <div style={decisionForm}>
-          <input
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            placeholder="Question or topic (e.g. 'Database choice')"
-            style={input}
-          />
-          <input
-            value={choice}
-            onChange={(e) => setChoice(e.target.value)}
-            placeholder="What we chose (e.g. 'Postgres')"
-            style={input}
-          />
-          <textarea
-            value={why}
-            onChange={(e) => setWhy(e.target.value)}
-            placeholder="Why (optional)"
-            rows={3}
-            style={textarea}
-          />
-          <div style={{ display: "flex", gap: 8 }}>
-            <button
-              onClick={add}
-              disabled={saving || !title.trim() || !choice.trim()}
-              style={primaryBtn}
-            >
-              {saving ? (
-                <Loader2 size={13} className="animate-spin" />
-              ) : (
-                <Check size={13} />
-              )}{" "}
-              Save
-            </button>
-            <button
-              onClick={() => {
-                setAdding(false);
-                setTitle("");
-                setChoice("");
-                setWhy("");
-              }}
-              style={ghostBtn}
-            >
-              <X size={13} /> Cancel
-            </button>
-          </div>
-        </div>
-      ) : (
-        <button onClick={() => setAdding(true)} style={primaryBtn}>
-          <Plus size={13} /> Log a decision
-        </button>
-      )}
-      {plan.decisions.length === 0 ? (
-        <div style={{ ...emptyBox, marginTop: 14 }}>
-          No decisions yet — the AI logs these automatically when you settle on
-          something in chat.
-          <span style={promptNudge}>
-            Try: &quot;Which database should I use for this project?&quot;
-          </span>
-        </div>
-      ) : (
-        <ul style={{ ...list, marginTop: 14 }}>
-          {plan.decisions.map((d) => (
-            <li key={d.id} style={decisionRow}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <div style={decisionTitle}>{d.title}</div>
-                <div style={decisionChoice}>→ {d.choice}</div>
-                {d.why && <div style={decisionWhy}>{d.why}</div>}
-                <div style={{ ...timestampStyle, marginTop: 4 }}>
-                  {relativeTime(d.createdAt)}
-                </div>
-              </div>
-              <button
-                onClick={() => remove(d.id)}
-                style={iconBtn}
-                title="Delete"
-              >
-                <Trash2 size={13} />
-              </button>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}
-
-// ──────────────────────────────────────────────────
-// Bits
-// ──────────────────────────────────────────────────
-
-function PanelHeader({ title, hint }: { title: string; hint: string }) {
-  return (
-    <div style={{ marginBottom: 14 }}>
-      <h3 style={panelTitle}>{title}</h3>
-      <p style={panelHint}>{hint}</p>
-    </div>
-  );
-}
-
-function relativeTime(iso: string): string {
-  const diff = (Date.now() - new Date(iso).getTime()) / 1000;
-  if (diff < 60) return "just now";
-  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
-  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
-  if (diff < 86400 * 30) return `${Math.floor(diff / 86400)}d ago`;
-  return new Date(iso).toLocaleDateString();
-}
-
-// ──────────────────────────────────────────────────
-// Tokens
-// ──────────────────────────────────────────────────
-
-const INK = {
-  ink: "#1a1a1a",
-  mid: "#5f5e5a",
-  muted: "#a09a90",
-  border: "#e8e4dc",
-  borderSoft: "#efebe1",
-  cardBg: "#fff",
-  fontSans: '"Outfit", "Inter", ui-sans-serif, sans-serif',
-  fontSerif: '"Newsreader", "Lora", Georgia, serif',
-} as const;
-
-const pageWrap: React.CSSProperties = {
-  padding: "28px 48px 48px",
-  fontFamily: INK.fontSans,
-  color: INK.ink,
-};
-/** Vertical stack: horizontal section tabs, then full-width content. */
-const planStack: React.CSSProperties = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 16,
-  maxWidth: "min(1400px, 100%)",
-  margin: "0 auto",
-  minHeight: 0,
-  flex: 1,
-};
-const planNav: React.CSSProperties = {
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  gap: "10px 14px",
-  rowGap: 10,
-};
-const tileRow: React.CSSProperties = {
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  gap: 8,
-  flex: "1 1 200px",
-  minWidth: 0,
-};
-const planMain: React.CSSProperties = {
-  minWidth: 0,
-  display: "flex",
-  flexDirection: "column",
-  flex: 1,
-  minHeight: 0,
-};
-const heading: React.CSSProperties = {
-  fontSize: "0.72rem",
-  fontWeight: 600,
-  letterSpacing: "0.12em",
-  textTransform: "uppercase",
-  color: INK.muted,
-  margin: 0,
-  flexShrink: 0,
-};
-const tileButton: React.CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  gap: 8,
-  width: "auto",
-  padding: "8px 14px",
-  border: "1px solid transparent",
-  borderRadius: 8,
-  cursor: "pointer",
-  font: "inherit",
-  color: "inherit",
-  transition: "background 0.12s, border-color 0.12s",
-  whiteSpace: "nowrap",
-};
-const tileLabel: React.CSSProperties = { fontSize: "0.82rem", fontWeight: 600 };
-const countPill: React.CSSProperties = {
-  fontSize: "0.7rem",
-  fontWeight: 600,
-  color: INK.mid,
-  padding: "1px 7px",
-  borderRadius: 999,
-  background: "#f3eee4",
-};
-const panel: React.CSSProperties = {
-  background: INK.cardBg,
-  border: `1px solid ${INK.border}`,
-  borderRadius: 10,
-  padding: 22,
-  flex: 1,
-  minHeight: 0,
-  overflowY: "auto",
-};
-const panelTitle: React.CSSProperties = {
-  fontFamily: INK.fontSerif,
-  fontSize: "1.4rem",
-  fontWeight: 400,
-  letterSpacing: "-0.02em",
-  margin: 0,
-};
-const panelHint: React.CSSProperties = {
-  fontSize: "0.82rem",
-  color: INK.mid,
-  marginTop: 4,
-  lineHeight: 1.5,
-};
-const subHeading: React.CSSProperties = {
-  fontSize: "0.68rem",
-  fontWeight: 600,
-  letterSpacing: "0.12em",
-  textTransform: "uppercase",
-  color: INK.muted,
-  margin: "14px 0 8px",
-};
-const visionHeaderRow: React.CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  gap: 16,
-  marginBottom: 18,
-};
-const editorTabs: React.CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  gap: 4,
-  borderBottom: `1px solid ${INK.border}`,
-  marginBottom: 12,
-  paddingBottom: 0,
-};
-const editorTab: React.CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  gap: 6,
-  padding: "8px 12px",
-  fontSize: "0.78rem",
-  fontWeight: 500,
-  background: "transparent",
-  color: INK.mid,
-  border: "none",
-  borderBottom: "2px solid transparent",
-  cursor: "pointer",
-  fontFamily: "inherit",
-  marginBottom: -1,
-};
-const editorTabActive: React.CSSProperties = {
-  ...editorTab,
-  color: INK.ink,
-  fontWeight: 600,
-  borderBottomColor: INK.ink,
-};
-const dirtyDot: React.CSSProperties = {
-  fontSize: "0.72rem",
-  color: "#b76b00",
-  fontWeight: 500,
-};
-const visionTextarea: React.CSSProperties = {
-  width: "100%",
-  minHeight: 360,
-  padding: "14px 16px",
-  fontSize: "0.92rem",
-  lineHeight: 1.6,
-  fontFamily: '"JetBrains Mono", "SF Mono", ui-monospace, monospace',
-  border: `1px solid ${INK.border}`,
-  borderRadius: 8,
-  background: "#fdfcf9",
-  color: INK.ink,
-  resize: "vertical",
-  outline: "none",
-  boxSizing: "border-box",
-};
-const visionPreviewBox: React.CSSProperties = {
-  minHeight: 360,
-  padding: "16px 20px",
-  border: `1px solid ${INK.border}`,
-  borderRadius: 8,
-  background: "#fff",
-  boxSizing: "border-box",
-};
-const emptyVisionBox: React.CSSProperties = {
-  padding: "22px 24px",
-  border: `1px dashed ${INK.borderSoft}`,
-  borderRadius: 10,
-  background: "#fafaf6",
-};
-const addRow: React.CSSProperties = {
-  display: "flex",
-  gap: 8,
-  marginBottom: 14,
-};
-const input: React.CSSProperties = {
-  flex: 1,
-  padding: "9px 12px",
-  fontSize: "0.88rem",
-  border: `1px solid ${INK.border}`,
-  borderRadius: 8,
-  fontFamily: "inherit",
-  background: "#fff",
-  color: INK.ink,
-};
-const textarea: React.CSSProperties = {
-  width: "100%",
-  padding: "10px 12px",
-  fontSize: "0.9rem",
-  border: `1px solid ${INK.border}`,
-  borderRadius: 8,
-  fontFamily: "inherit",
-  background: "#fff",
-  color: INK.ink,
-  resize: "vertical",
-  lineHeight: 1.5,
-};
-const list: React.CSSProperties = {
-  listStyle: "none",
-  padding: 0,
-  margin: 0,
-  display: "flex",
-  flexDirection: "column",
-  border: `1px solid ${INK.borderSoft}`,
-  borderRadius: 8,
-  overflow: "hidden",
-};
-const listRow: React.CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  gap: 10,
-  padding: "11px 14px",
-  fontSize: "0.88rem",
-  borderBottom: `1px solid ${INK.borderSoft}`,
-  background: "#fff",
-};
-// Tasks (master/detail)
-const taskFilterRow: React.CSSProperties = {
-  display: "flex",
-  gap: 6,
-  marginBottom: 14,
-};
-const taskFilterPill: React.CSSProperties = {
-  padding: "5px 11px",
-  fontSize: "0.74rem",
-  fontWeight: 500,
-  background: "transparent",
-  color: INK.mid,
-  border: `1px solid ${INK.border}`,
-  borderRadius: 999,
-  cursor: "pointer",
-  fontFamily: "inherit",
-};
-const taskFilterPillActive: React.CSSProperties = {
-  ...taskFilterPill,
-  background: INK.ink,
-  color: "#fff",
-  borderColor: INK.ink,
-};
-const taskSplit: React.CSSProperties = {
-  display: "grid",
-  gridTemplateColumns: "minmax(220px, 280px) 1fr",
-  gap: 18,
-  alignItems: "stretch",
-  minHeight: 320,
-};
-const taskListCol: React.CSSProperties = {
-  minWidth: 0,
-  borderRight: `1px solid ${INK.borderSoft}`,
-  paddingRight: 14,
-  maxHeight: 540,
-  overflowY: "auto",
-};
-const taskDetailCol: React.CSSProperties = {
-  minWidth: 0,
-  paddingLeft: 4,
-};
-const taskList: React.CSSProperties = {
-  listStyle: "none",
-  padding: 0,
-  margin: 0,
-  display: "flex",
-  flexDirection: "column",
-  gap: 4,
-};
-const taskItem: React.CSSProperties = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 4,
-  width: "100%",
-  padding: "10px 12px",
-  background: "transparent",
-  border: `1px solid transparent`,
-  borderRadius: 8,
-  cursor: "pointer",
-  textAlign: "left",
-  fontFamily: "inherit",
-  color: "inherit",
-};
-const taskItemActive: React.CSSProperties = {
-  ...taskItem,
-  background: "#fff",
-  border: `1px solid ${INK.border}`,
-  boxShadow: "0 1px 3px rgba(0,0,0,0.04)",
-};
-const taskItemTitle: React.CSSProperties = {
-  fontSize: "0.88rem",
-  fontWeight: 600,
-  color: INK.ink,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  flex: 1,
-  minWidth: 0,
-};
-const taskStatusDot: React.CSSProperties = {
-  display: "inline-block",
-  width: 8,
-  height: 8,
-  borderRadius: 999,
-  flexShrink: 0,
-};
-const taskItemMeta: React.CSSProperties = {
-  display: "flex",
-  gap: 6,
-  alignItems: "center",
-  fontSize: "0.7rem",
-  color: INK.muted,
-  paddingLeft: 16,
-};
-const taskDetailWrap: React.CSSProperties = {
-  display: "flex",
-  flexDirection: "column",
-  minHeight: 0,
-};
-const taskDetailHeader: React.CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  gap: 12,
-  marginBottom: 12,
-};
-const taskDetailTitle: React.CSSProperties = {
-  fontFamily: INK.fontSerif,
-  fontSize: "1.25rem",
-  fontWeight: 400,
-  letterSpacing: "-0.01em",
-  margin: 0,
-};
-const taskStatusRow: React.CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  gap: 10,
-  padding: "10px 12px",
-  marginBottom: 14,
-  background: "#fafaf6",
-  border: `1px solid ${INK.borderSoft}`,
-  borderRadius: 8,
-};
-const taskStatusLabel: React.CSSProperties = {
-  fontSize: "0.72rem",
-  textTransform: "uppercase",
-  letterSpacing: "0.1em",
-  color: INK.muted,
-  fontWeight: 600,
-};
-const taskStatusSelect: React.CSSProperties = {
-  padding: "6px 10px",
-  fontSize: "0.82rem",
-  border: `1px solid ${INK.border}`,
-  borderRadius: 6,
-  background: "#fff",
-  color: INK.ink,
-  fontFamily: "inherit",
-  cursor: "pointer",
-};
-const delegateBtn: React.CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  gap: 6,
-  padding: "6px 12px",
-  fontSize: "0.78rem",
-  fontWeight: 500,
-  background: "#fff",
-  color: INK.mid,
-  border: `1px solid ${INK.border}`,
-  borderRadius: 6,
-  cursor: "not-allowed",
-  fontFamily: "inherit",
-  opacity: 0.7,
-};
-const sessionRow: React.CSSProperties = {
-  display: "flex",
-  alignItems: "flex-start",
-  gap: 12,
-  padding: "12px 14px",
-  borderBottom: `1px solid ${INK.borderSoft}`,
-  background: "#fff",
-};
-const sessionTitle: React.CSSProperties = {
-  fontSize: "0.9rem",
-  fontWeight: 600,
-  color: INK.ink,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-};
-const sessionSummary: React.CSSProperties = {
-  fontSize: "0.82rem",
-  color: INK.mid,
-  marginTop: 4,
-  lineHeight: 1.5,
-};
-const sessionMeta: React.CSSProperties = {
-  display: "flex",
-  gap: 8,
-  alignItems: "center",
-  fontSize: "0.72rem",
-  color: INK.muted,
-  marginTop: 6,
-};
-const decisionRow: React.CSSProperties = {
-  display: "flex",
-  alignItems: "flex-start",
-  gap: 10,
-  padding: "12px 14px",
-  borderBottom: `1px solid ${INK.borderSoft}`,
-  background: "#fff",
-};
-const decisionTitle: React.CSSProperties = {
-  fontSize: "0.88rem",
-  fontWeight: 600,
-  color: INK.ink,
-};
-const decisionChoice: React.CSSProperties = {
-  fontSize: "0.88rem",
-  color: INK.ink,
-  marginTop: 2,
-};
-const decisionWhy: React.CSSProperties = {
-  fontSize: "0.82rem",
-  color: INK.mid,
-  marginTop: 6,
-  lineHeight: 1.5,
-};
-const decisionForm: React.CSSProperties = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 8,
-  marginBottom: 14,
-};
-const timestampStyle: React.CSSProperties = {
-  fontSize: "0.7rem",
-  color: INK.muted,
-  flexShrink: 0,
-};
-const primaryBtn: React.CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  gap: 6,
-  padding: "8px 14px",
-  fontSize: "0.82rem",
-  fontWeight: 600,
-  background: "#1a1a1a",
-  color: "#fff",
-  border: "none",
-  borderRadius: 8,
-  cursor: "pointer",
-  fontFamily: "inherit",
-};
-const ghostBtn: React.CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  gap: 6,
-  padding: "8px 12px",
-  fontSize: "0.82rem",
-  fontWeight: 500,
-  background: "transparent",
-  color: INK.mid,
-  border: `1px solid ${INK.border}`,
-  borderRadius: 8,
-  cursor: "pointer",
-  fontFamily: "inherit",
-};
-const iconBtn: React.CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: 28,
-  height: 28,
-  padding: 0,
-  background: "transparent",
-  color: INK.muted,
-  border: "none",
-  borderRadius: 6,
-  cursor: "pointer",
-  flexShrink: 0,
-};
-const checkbox: React.CSSProperties = {
-  width: 22,
-  height: 22,
-  padding: 0,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  background: "transparent",
-  border: "none",
-  cursor: "pointer",
-  flexShrink: 0,
-  color: INK.mid,
-};
-const emptyBox: React.CSSProperties = {
-  padding: "16px 18px",
-  fontSize: "0.85rem",
-  color: INK.mid,
-  background: "#fafaf6",
-  border: `1px dashed ${INK.borderSoft}`,
-  borderRadius: 8,
-  lineHeight: 1.5,
-  textAlign: "center",
-};
-const promptNudge: React.CSSProperties = {
-  display: "block",
-  marginTop: 10,
-  background: "#f3eee4",
-  borderRadius: 5,
-  padding: "5px 10px",
-  fontSize: "0.76rem",
-  color: INK.mid,
-  fontStyle: "italic",
-};
-const errorBox: React.CSSProperties = {
-  padding: "12px 14px",
-  fontSize: "0.85rem",
-  color: "#7a1f15",
-  background: "#fbe9e7",
-  border: `1px solid #f4c2bc`,
-  borderRadius: 8,
-};
diff --git a/app/[workspace]/project/[projectId]/(home)/plan/page.tsx b/app/[workspace]/project/[projectId]/(home)/plan/page.tsx
index cf9d3aca..43941b96 100644
--- a/app/[workspace]/project/[projectId]/(home)/plan/page.tsx
+++ b/app/[workspace]/project/[projectId]/(home)/plan/page.tsx
@@ -1,32 +1,43 @@
 "use client";
 
-import React, { useState, useEffect, useCallback } from "react";
+import * as React from "react";
+import { useState, useEffect } from "react";
 import { useParams } from "next/navigation";
-import { Loader2, Target, BookOpen, Layers, GitBranch, Pencil, FileText, Check, Plus, ListTodo } from "lucide-react";
+import {
+  Loader2,
+  AlertCircle,
+  Target,
+  BookOpen,
+  Layers,
+  GitBranch,
+  Pencil,
+  FileText,
+  Check,
+  ListTodo,
+  Palette,
+  CheckSquare,
+  Play,
+} from "lucide-react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import useSWR from "swr";
 
-// Types mapping to our Postgres plan shape
+// ──────────────────────────────────────────────────
+// Types & Fetcher
+// ──────────────────────────────────────────────────
+
 type Plan = {
   vision?: string;
-  brief?: string;
-  tasks: Array<{ id: string; title: string; description?: string; status: string }>;
+  blueprint?: Record<string, string>;
+  tasks: Array<{
+    id: string;
+    title: string;
+    description?: string;
+    status: string;
+  }>;
   decisions: Array<{ id: string; title: string; choice: string; why?: string }>;
 };
 
-type Tab = "objective" | "prd" | "delegate";
-
-// Shared Theme Variables
-const INK = {
-  main: "#1a1918",
-  muted: "#6b6560",
-  faint: "#a09a90",
-  border: "#e8e4dc",
-  bg: "#ffffff",
-  bgHover: "#f8f6f2",
-};
-
 const fetcher = async (url: string) => {
   const res = await fetch(url, { credentials: "include" });
   if (!res.ok) throw new Error(`HTTP ${res.status}`);
@@ -34,91 +45,212 @@ const fetcher = async (url: string) => {
   return data.plan;
 };
 
-export default function PlanPageV2() {
+// ──────────────────────────────────────────────────
+// Navigation Config
+// ──────────────────────────────────────────────────
+
+const BLUEPRINT_DOCS = [
+  { id: "stories", label: "User Stories", icon: <BookOpen /> },
+  { id: "acceptance", label: "Acceptance Criteria", icon: <Target /> },
+  { id: "success", label: "Success Metrics", icon: <Check /> },
+  { id: "ui_design", label: "UI Design", icon: <Palette /> },
+  { id: "tech_context", label: "Technical Context", icon: <Layers /> },
+  { id: "data_model", label: "Data Model", icon: <GitBranch /> },
+  { id: "file_structure", label: "File Structure", icon: <FileText /> },
+  { id: "tasks", label: "Task Breakdown", icon: <ListTodo /> },
+  { id: "checklist", label: "QA Checklist", icon: <CheckSquare /> },
+];
+
+// ──────────────────────────────────────────────────
+// Main Page Component
+// ──────────────────────────────────────────────────
+
+export default function PlanTab() {
   const params = useParams();
   const projectId = (params?.projectId as string) || "";
 
-  const [activeTab, setActiveTab] = useState<Tab>("objective");
+  const [selectedId, setSelectedId] = useState<string>("objective");
 
-  const { data: plan, error, mutate: mutatePlan } = useSWR<Plan>(
+  const {
+    data: plan,
+    error,
+    mutate: mutatePlan,
+  } = useSWR<Plan>(
     projectId ? `/api/projects/${projectId}/plan` : null,
     fetcher,
-    { revalidateOnFocus: false, revalidateIfStale: false }
+    { revalidateOnFocus: false, revalidateIfStale: false },
   );
-  
-  // Wrapper for child components to update SWR cache optimally
-  const setPlan = (newPlan: Plan) => { mutatePlan(newPlan, false); };
 
-  if (!plan && !error) {
-    return (
-      <div style={{ display: "flex", justifyContent: "center", padding: 100 }}>
-        <Loader2 className="animate-spin" size={24} color={INK.muted} />
-      </div>
-    );
-  }
+  const setPlan = (newPlan: Plan) => {
+    mutatePlan(newPlan, false);
+  };
 
-  if (error || !plan) {
-    return (
-      <div style={{ padding: 40, color: "red", textAlign: "center" }}>
-        {error || "Failed to load plan"}
-      </div>
-    );
-  }
+  const showLoading = !plan && !error;
 
   return (
-    <div style={{ maxWidth: 1000, margin: "0 auto", padding: "40px 20px" }}>
-      
-      {/* ── HEADER & TABS ── */}
-      <div style={{ marginBottom: 32 }}>
-
-        
-        <div style={{ 
-          display: "flex", 
-          gap: 8, 
-          borderBottom: `1px solid ${INK.border}`, 
-          paddingBottom: 0 
-        }}>
-          <TabButton active={activeTab === "objective"} onClick={() => setActiveTab("objective")} icon={<Target size={14} />} label="Objective" />
-          <TabButton active={activeTab === "prd"} onClick={() => setActiveTab("prd")} icon={<FileText size={14} />} label="PRD" />
-          <TabButton active={activeTab === "delegate"} onClick={() => setActiveTab("delegate")} icon={<Layers size={14} />} label="Delegate" />
+    <div style={pageWrap}>
+      {showLoading && (
+        <div style={centeredMsg}>
+          <Loader2
+            size={16}
+            className="animate-spin"
+            style={{ color: INK.muted }}
+          />
+          <span style={{ color: INK.muted, fontSize: "0.85rem" }}>
+            Loading plan…
+          </span>
         </div>
-      </div>
+      )}
+      {error && !showLoading && (
+        <div style={centeredMsg}>
+          <AlertCircle size={15} style={{ color: "#d93025" }} />
+          <span style={{ fontSize: "0.85rem", color: "#d93025" }}>
+            {error.message || "Failed to load plan"}
+          </span>
+        </div>
+      )}
 
-      {/* ── CONTENT AREA ── */}
-      {/* 
-        By rendering them all but toggling display: none, we fix the "always needs to load" 
-        issue you mentioned. The DOM nodes stay mounted, preserving state and preventing jitter.
-      */}
-      <div style={{ display: activeTab === "objective" ? "block" : "none" }}>
-        <ObjectiveView plan={plan} projectId={projectId} onChange={setPlan} />
-      </div>
-      
-      <div style={{ display: activeTab === "prd" ? "flex" : "none", height: "calc(100vh - 200px)" }}>
-        <PRDView plan={plan} projectId={projectId} onChange={setPlan} />
-      </div>
+      {plan && (
+        <div style={grid}>
+          {/* ── Left Rail (Master Index) ── */}
+          <section style={leftCol}>
+            <div style={railGroup}>
+              <div style={railGroupHeader}>
+                <h3 style={railGroupTitle}>Scope</h3>
+              </div>
+              <div style={railItems}>
+                <RailItem
+                  id="objective"
+                  label="Project Objective"
+                  icon={<Target />}
+                  selectedId={selectedId}
+                  onClick={setSelectedId}
+                />
+              </div>
+            </div>
 
-      <div style={{ display: activeTab === "delegate" ? "block" : "none" }}>
-        <DelegateView plan={plan} projectId={projectId} onChange={setPlan} />
-      </div>
+            <div style={railGroup}>
+              <div style={railGroupHeader}>
+                <h3 style={railGroupTitle}>Blueprint</h3>
+              </div>
+              <div style={railItems}>
+                {BLUEPRINT_DOCS.map((doc) => (
+                  <RailItem
+                    key={doc.id}
+                    id={doc.id}
+                    label={doc.label}
+                    icon={doc.icon}
+                    selectedId={selectedId}
+                    onClick={setSelectedId}
+                  />
+                ))}
+              </div>
+            </div>
 
+            <div style={railGroup}>
+              <div style={railGroupHeader}>
+                <h3 style={railGroupTitle}>Delegate to AI</h3>
+              </div>
+              <div style={railItems}>
+                <RailItem
+                  id="kanban"
+                  label="Execution Plan"
+                  icon={<Play />}
+                  selectedId={selectedId}
+                  onClick={setSelectedId}
+                />
+              </div>
+            </div>
+          </section>
+
+          {/* ── Right Rail (Detail Viewer) ── */}
+          <section style={rightCol}>
+            {selectedId === "objective" && (
+              <ObjectivePanel
+                plan={plan}
+                projectId={projectId}
+                onChange={setPlan}
+              />
+            )}
+
+            {BLUEPRINT_DOCS.some((d) => d.id === selectedId) && (
+              <DocumentPanel plan={plan} docId={selectedId} />
+            )}
+
+            {selectedId === "kanban" && (
+              <DelegatePanel plan={plan} projectId={projectId} />
+            )}
+          </section>
+        </div>
+      )}
     </div>
   );
 }
 
 // ──────────────────────────────────────────────────
-// 1. OBJECTIVE VIEW
-// The business case / 1-page summary
+// Left Rail Item Component
 // ──────────────────────────────────────────────────
-function ObjectiveView({ plan, projectId, onChange }: { plan: Plan, projectId: string, onChange: (p: Plan) => void }) {
+
+function RailItem({
+  id,
+  label,
+  icon,
+  selectedId,
+  onClick,
+}: {
+  id: string;
+  label: string;
+  icon: React.ReactElement;
+  selectedId: string;
+  onClick: (id: string) => void;
+}) {
+  const isActive = selectedId === id;
+  return (
+    <button
+      onClick={() => onClick(id)}
+      style={{
+        ...flatTile,
+        background: isActive ? INK.cardBg : "transparent",
+        borderColor: isActive ? INK.border : "transparent",
+        boxShadow: isActive ? "0 1px 3px rgba(0,0,0,0.02)" : "none",
+        color: isActive ? INK.ink : INK.muted,
+      }}
+    >
+      {React.cloneElement(icon, {
+        size: 15,
+        color: isActive ? INK.ink : INK.muted,
+      } as React.SVGProps<SVGSVGElement> & { size?: number | string })}
+      <span style={{ fontSize: "0.85rem", fontWeight: isActive ? 600 : 500 }}>
+        {label}
+      </span>
+    </button>
+  );
+}
+
+// ──────────────────────────────────────────────────
+// Right Rail: Objective Panel
+// ──────────────────────────────────────────────────
+
+function ObjectivePanel({
+  plan,
+  projectId,
+  onChange,
+}: {
+  plan: Plan;
+  projectId: string;
+  onChange: (p: Plan) => void;
+}) {
   const [draft, setDraft] = useState(plan.vision ?? "");
   const [saving, setSaving] = useState(false);
-  const [generating, setGenerating] = useState(false);
-  
+  const [editing, setEditing] = useState(!plan.vision);
+  const [editorView, setEditorView] = useState<"write" | "preview">("write");
+  const [dirty, setDirty] = useState(false);
+
   useEffect(() => {
-    if (plan.vision !== draft) {
+    if (plan.vision !== draft && !dirty) {
       setDraft(plan.vision ?? "");
     }
-  }, [plan.vision]);
+  }, [plan.vision, dirty, draft]);
 
   const save = async (text: string) => {
     setSaving(true);
@@ -129,206 +261,227 @@ function ObjectiveView({ plan, projectId, onChange }: { plan: Plan, projectId: s
         body: JSON.stringify({ kind: "vision", text }),
       });
       const d = await r.json();
-      if (d.plan) onChange(d.plan);
+      if (d.plan) {
+        onChange(d.plan);
+        setDraft(d.plan.vision ?? "");
+      }
+      setDirty(false);
+      setEditing(false);
     } finally {
       setSaving(false);
     }
   };
 
-  const handleGenerate = async () => {
-    if (!draft.trim()) {
-      alert("Please write an objective first before generating the PRD.");
-      return;
-    }
-    if (!confirm("This will overwrite the PRD and Execution Plan based on this objective. Continue?")) return;
-    
-    setGenerating(true);
-    try {
-      await fetch(`/api/projects/${projectId}/plan`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ kind: "vision", text: draft }),
-      });
-
-      const r = await fetch(`/api/projects/${projectId}/plan/generate`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ objective: draft }),
-      });
-      const d = await r.json();
-      if (d.plan) onChange(d.plan);
-      alert("Blueprint generated successfully! Check the PRD and Delegate tabs.");
-    } finally {
-      setGenerating(false);
-    }
+  const cancel = () => {
+    setDraft(plan.vision ?? "");
+    setDirty(false);
+    setEditing(false);
   };
 
   return (
-    <div className="panel-container">
-      <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 16 }}>
+    <div style={panel}>
+      <div style={panelHeader}>
+        <div>
+          <h2 style={panelTitle}>Project Objective</h2>
+          <p style={panelDesc}>
+            The high-level business case and elevator pitch.
+          </p>
+        </div>
+
         <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-          {saving && <span style={{ fontSize: "0.75rem", color: INK.faint }}>Saving...</span>}
-          <button 
-            onClick={handleGenerate} 
-            disabled={generating || !draft.trim()} 
-            className="btn-primary"
-            style={{ padding: "8px 16px", borderRadius: 8, fontWeight: 600 }}
-          >
-            {generating ? (
-              <><Loader2 size={14} className="animate-spin" /> Generating Blueprint...</>
-            ) : (
-              "Generate Complete PRD"
-            )}
-          </button>
+          {saving && (
+            <span style={{ fontSize: "0.75rem", color: INK.muted }}>
+              Saving...
+            </span>
+          )}
+          {!editing && (
+            <button onClick={() => setEditing(true)} style={actionBtn}>
+              <Pencil size={14} /> Edit Objective
+            </button>
+          )}
+          {editing && (
+            <>
+              <button
+                onClick={() => save(draft)}
+                disabled={!dirty || saving}
+                className="btn-primary"
+              >
+                Save Changes
+              </button>
+              <button onClick={cancel} className="btn-ghost">
+                Cancel
+              </button>
+            </>
+          )}
         </div>
       </div>
 
-      <div style={{ border: `1px solid ${INK.border}`, borderRadius: 8, overflow: "hidden", background: "#fff", boxShadow: "0 1px 3px rgba(0,0,0,0.02)" }}>
-        <textarea
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onBlur={() => save(draft)}
-          style={{
-            width: "100%", minHeight: 400, padding: 24, fontSize: "0.95rem", lineHeight: 1.6,
-            border: "none", outline: "none", resize: "vertical", fontFamily: "var(--font-sans)",
-            color: INK.main
-          }}
-          placeholder="Describe the business objective..."
-        />
+      <div style={editorContainer}>
+        {editing ? (
+          <>
+            <div style={editorTabs}>
+              <button
+                type="button"
+                onClick={() => setEditorView("write")}
+                style={
+                  editorView === "write" ? editorTabActive : editorTabInactive
+                }
+              >
+                <FileText size={14} /> Write
+              </button>
+              <button
+                type="button"
+                onClick={() => setEditorView("preview")}
+                style={
+                  editorView === "preview" ? editorTabActive : editorTabInactive
+                }
+              >
+                <BookOpen size={14} /> Preview
+              </button>
+              <div style={{ flex: 1 }} />
+              {dirty && (
+                <span
+                  style={{
+                    fontSize: "0.75rem",
+                    color: "#f97316",
+                    display: "flex",
+                    alignItems: "center",
+                    fontWeight: 500,
+                  }}
+                >
+                  ● Unsaved
+                </span>
+              )}
+            </div>
+
+            {editorView === "write" ? (
+              <textarea
+                value={draft}
+                onChange={(e) => {
+                  setDraft(e.target.value);
+                  setDirty(true);
+                }}
+                style={textAreaStyle}
+                placeholder="Describe the business objective..."
+                spellCheck
+              />
+            ) : (
+              <div style={previewAreaStyle}>
+                {draft.trim() ? (
+                  <div className="markdown-prose">
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                      {draft}
+                    </ReactMarkdown>
+                  </div>
+                ) : (
+                  <div style={{ color: INK.muted, fontStyle: "italic" }}>
+                    Nothing to preview yet.
+                  </div>
+                )}
+              </div>
+            )}
+          </>
+        ) : (
+          <div style={previewAreaStyle}>
+            {draft.trim() ? (
+              <div className="markdown-prose">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                  {draft}
+                </ReactMarkdown>
+              </div>
+            ) : (
+              <div style={{ color: INK.muted, fontStyle: "italic" }}>
+                No objective set. Click Edit to add one.
+              </div>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );
 }
 
 // ──────────────────────────────────────────────────
-// 2. PRD VIEW
+// Right Rail: Document Panel
 // ──────────────────────────────────────────────────
-function PRDView({ plan, projectId, onChange }: { plan: Plan, projectId: string, onChange: (p: Plan) => void }) {
-  const [activeDoc, setActiveDoc] = useState("spec");
+
+function DocumentPanel({ plan, docId }: { plan: Plan; docId: string }) {
+  const docConfig = BLUEPRINT_DOCS.find((d) => d.id === docId);
+  if (!docConfig) return null;
+
+  // Render purely from the strictly typed blueprint object.
+  // We no longer fallback to the legacy decisions array.
+  const content = plan.blueprint?.[docId as keyof typeof plan.blueprint];
 
   return (
-    <div style={{ display: "flex", width: "100%", height: "100%", gap: 24, alignItems: "flex-start" }}>
-      {/* LEFT COLUMN: The Document Index */}
-      <div style={{ 
-        width: 250, 
-        flexShrink: 0,
-        display: "flex", 
-        flexDirection: "column", 
-        gap: 8 
-      }}>
-        <button
-          onClick={() => setActiveDoc("spec")}
-          style={{
-            textAlign: "left",
-            padding: "12px 16px",
-            borderRadius: 8,
-            background: activeDoc === "spec" ? "#fff" : "transparent",
-            border: activeDoc === "spec" ? `1px solid ${INK.border}` : "1px solid transparent",
-            boxShadow: activeDoc === "spec" ? "0 1px 3px rgba(0,0,0,0.02)" : "none",
-            color: activeDoc === "spec" ? INK.main : INK.muted,
-            fontWeight: activeDoc === "spec" ? 600 : 500,
-            cursor: "pointer",
-            transition: "all 0.15s ease",
-            display: "flex",
-            alignItems: "center",
-            gap: 8
-          }}
+    <div style={panel}>
+      {content ? (
+        <div
+          className="markdown-prose"
+          style={{ overflowY: "auto", height: "100%", paddingRight: 16 }}
         >
-          <BookOpen size={16} /> Product Spec
-        </button>
-        <button
-          onClick={() => setActiveDoc("plan")}
-          style={{
-            textAlign: "left",
-            padding: "12px 16px",
-            borderRadius: 8,
-            background: activeDoc === "plan" ? "#fff" : "transparent",
-            border: activeDoc === "plan" ? `1px solid ${INK.border}` : "1px solid transparent",
-            boxShadow: activeDoc === "plan" ? "0 1px 3px rgba(0,0,0,0.02)" : "none",
-            color: activeDoc === "plan" ? INK.main : INK.muted,
-            fontWeight: activeDoc === "plan" ? 600 : 500,
-            cursor: "pointer",
-            transition: "all 0.15s ease",
-            display: "flex",
-            alignItems: "center",
-            gap: 8
-          }}
-        >
-          <GitBranch size={16} /> Tech Architecture
-        </button>
-        
-      </div>
-
-      {/* RIGHT COLUMN: The Document Content */}
-      <div style={{ 
-        flex: 1, 
-        background: "#fff", 
-        border: `1px solid ${INK.border}`, 
-        borderRadius: 8, 
-        padding: 40,
-        height: "100%",
-        overflowY: "auto",
-        boxShadow: "0 1px 3px rgba(0,0,0,0.02)"
-      }}>
-        {activeDoc === "spec" && (
-          <div className="markdown-prose">
-            {plan.decisions?.find(d => d.id === "prd_spec")?.why ? (
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                {plan.decisions.find(d => d.id === "prd_spec")!.why!}
-              </ReactMarkdown>
-            ) : (
-              <>
-                <h1>Product Specification</h1>
-                <p style={{ color: INK.muted }}>The Product Specification document outlines the core user journeys, functional requirements, and acceptance criteria.</p>
-                <hr style={{ margin: "24px 0", borderTop: `1px dashed ${INK.border}`, borderBottom: "none" }} />
-                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", padding: 60, color: INK.muted, textAlign: "center" }}>
-                  <BookOpen size={32} style={{ marginBottom: 16, opacity: 0.5 }} />
-                  <p style={{ fontWeight: 500 }}>Spec is empty.</p>
-                  <p style={{ fontSize: "0.85rem", maxWidth: 300, margin: "8px 0 0" }}>Click &quot;Generate Complete PRD&quot; on the Objective tab to generate this document.</p>
-                </div>
-              </>
-            )}
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+        </div>
+      ) : (
+        <>
+          <div style={panelHeader}>
+            <div>
+              <h2 style={panelTitle}>{docConfig.label}</h2>
+              <p style={panelDesc}>This document is currently empty.</p>
+            </div>
           </div>
-        )}
-        
-        {activeDoc === "plan" && (
-          <div className="markdown-prose">
-            {plan.decisions?.find(d => d.id === "prd_arch")?.why ? (
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                {plan.decisions.find(d => d.id === "prd_arch")!.why!}
-              </ReactMarkdown>
-            ) : (
-              <>
-                <h1>Technical Architecture</h1>
-                <p style={{ color: INK.muted }}>The Technical Architecture plan defines the tech stack, database models, and API interfaces required to support the product spec.</p>
-                <hr style={{ margin: "24px 0", borderTop: `1px dashed ${INK.border}`, borderBottom: "none" }} />
-                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", padding: 60, color: INK.muted, textAlign: "center" }}>
-                  <GitBranch size={32} style={{ marginBottom: 16, opacity: 0.5 }} />
-                  <p style={{ fontWeight: 500 }}>Plan is empty.</p>
-                  <p style={{ fontSize: "0.85rem", maxWidth: 300, margin: "8px 0 0" }}>Click &quot;Generate Complete PRD&quot; on the Objective tab to generate this document.</p>
-                </div>
-              </>
+          <div style={emptyBox}>
+            {React.cloneElement(
+              docConfig.icon as React.ReactElement,
+              {
+                size: 32,
+                color: INK.muted,
+                style: { marginBottom: 16, opacity: 0.5 },
+              } as React.SVGProps<SVGSVGElement> & { size?: number | string },
             )}
+            <p style={{ fontWeight: 500, margin: 0, color: INK.ink }}>
+              Not generated yet.
+            </p>
+            <p
+              style={{
+                fontSize: "0.85rem",
+                maxWidth: 300,
+                margin: "8px 0 0",
+                lineHeight: 1.5,
+              }}
+            >
+              This document is generated and maintained by the AI agent. Chat
+              with your agent to update the scope and blueprint.
+            </p>
           </div>
-        )}
-
-        
-      </div>
+        </>
+      )}
     </div>
   );
 }
 
 // ──────────────────────────────────────────────────
-// 3. DELEGATE VIEW (The Factory)
+// Right Rail: Kanban Panel
 // ──────────────────────────────────────────────────
-function DelegateView({ plan, projectId, onChange }: { plan: Plan, projectId: string, onChange: (p: Plan) => void }) {
+
+function DelegatePanel({ plan, projectId }: { plan: Plan; projectId: string }) {
   const [delegating, setDelegating] = useState(false);
-  const openTasks = plan.tasks.filter(t => t.status === "open");
+
+  const openTasks = plan.tasks.filter((t) => t.status === "open");
+  const activeTasks = plan.tasks.filter(
+    (t) => t.status === "in_progress" || t.status === "review",
+  );
+  const doneTasks = plan.tasks.filter((t) => t.status === "done");
 
   const handleDelegate = async () => {
-    if (!confirm("Start the background runner to build this feature? You can safely close your browser while it works.")) return;
+    if (
+      !confirm(
+        "Start the background runner to build this feature? You can safely close your browser while it works.",
+      )
+    )
+      return;
     setDelegating(true);
-    
+
     try {
       const r = await fetch(`/api/projects/${projectId}/agent/sessions`, {
         method: "POST",
@@ -345,104 +498,490 @@ function DelegateView({ plan, projectId, onChange }: { plan: Plan, projectId: st
       }
       alert("Background runner started successfully!");
     } catch (err) {
-      alert(`Failed to start runner: ${err instanceof Error ? err.message : String(err)}`);
+      alert(
+        `Failed to start runner: ${err instanceof Error ? err.message : String(err)}`,
+      );
     } finally {
       setDelegating(false);
     }
   };
 
-  return (
-    <div className="panel-container">
-      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
-        <div>
-          <h2 style={{ fontSize: "1.25rem", fontWeight: 600, margin: 0, color: INK.main }}>Execution Plan</h2>
-          <p style={{ color: INK.muted, fontSize: "0.85rem", margin: "4px 0 0" }}>The prioritized roadmap for the AI background runner to execute.</p>
+  const TaskCard = ({ t }: { t: Plan["tasks"][number] }) => (
+    <div style={taskCard}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "flex-start",
+          gap: 12,
+          width: "100%",
+          overflow: "hidden",
+        }}
+      >
+        <div
+          style={{
+            ...taskStatusDot,
+            borderColor:
+              t.status === "done"
+                ? "#10b981"
+                : t.status === "open"
+                  ? INK.muted
+                  : "#f59e0b",
+            background: t.status === "done" ? "#10b981" : "transparent",
+          }}
+        >
+          {t.status === "done" && (
+            <Check size={10} color="#fff" strokeWidth={3} />
+          )}
         </div>
-        <button className="btn-primary" onClick={handleDelegate} disabled={delegating || openTasks.length === 0}>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              fontWeight: 600,
+              fontSize: "0.95rem",
+              color: INK.ink,
+              textDecoration: t.status === "done" ? "line-through" : "none",
+              opacity: t.status === "done" ? 0.6 : 1,
+              wordWrap: "break-word",
+              overflowWrap: "break-word",
+              hyphens: "auto",
+            }}
+          >
+            {t.title}
+          </div>
+          {t.description && (
+            <div
+              style={{
+                fontSize: "0.8rem",
+                color: INK.muted,
+                marginTop: 4,
+                lineHeight: 1.4,
+                wordWrap: "break-word",
+                overflowWrap: "break-word",
+                hyphens: "auto",
+              }}
+            >
+              {t.description}
+            </div>
+          )}
+        </div>
+      </div>
+      <div style={{ display: "flex", justifyContent: "flex-end" }}>
+        <span style={taskBadge}>
+          {t.status === "open"
+            ? "Queued"
+            : t.status === "done"
+              ? "Completed"
+              : "In Progress"}
+        </span>
+      </div>
+    </div>
+  );
+
+  return (
+    <div
+      style={{
+        ...panel,
+        background: "transparent",
+        border: "none",
+        boxShadow: "none",
+        padding: 0,
+      }}
+    >
+      <div style={panelHeader}>
+        <div>
+          <h2 style={panelTitle}>Execution Plan</h2>
+          <p style={panelDesc}>
+            The prioritized roadmap for the AI background runner to execute.
+          </p>
+        </div>
+        <button
+          className="btn-primary"
+          onClick={handleDelegate}
+          disabled={delegating || openTasks.length === 0}
+          style={{ background: INK.ink, color: "#fff" }}
+        >
           {delegating ? "Starting Jarvis..." : "Delegate Build"}
         </button>
       </div>
 
-      <div style={{ display: "grid", gap: 12 }}>
-        {openTasks.length > 0 ? openTasks.map(t => (
-          <div key={t.id} style={{ 
-            border: `1px solid ${INK.border}`, 
-            borderRadius: 8, 
-            padding: 16,
-            background: "#fff",
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center"
-          }}>
-            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-              <div style={{ width: 16, height: 16, borderRadius: "50%", border: `2px solid ${INK.muted}` }} />
-              <div>
-                <div style={{ fontWeight: 600, fontSize: "0.95rem", color: INK.main }}>{t.title}</div>
-                {t.description && <div style={{ fontSize: "0.8rem", color: INK.muted, marginTop: 4 }}>{t.description}</div>}
+      <div
+        style={{
+          display: "flex",
+          gap: 24,
+          alignItems: "flex-start",
+          overflowX: "auto",
+          paddingBottom: 16,
+          height: "100%",
+        }}
+      >
+        {/* TO DO COLUMN */}
+        <div style={kanbanCol}>
+          <div style={kanbanColHeader}>
+            <h3 style={kanbanColTitle}>To Do</h3>
+            <span style={kanbanCount}>{openTasks.length}</span>
+          </div>
+          <div style={kanbanList}>
+            {openTasks.length > 0 ? (
+              openTasks.map((t) => <TaskCard key={t.id} t={t} />)
+            ) : (
+              <div style={emptyBoxSmall}>
+                <p>No tasks queued.</p>
               </div>
-            </div>
-            <span style={{ fontSize: "0.8rem", color: INK.faint, background: INK.bgHover, padding: "4px 8px", borderRadius: 4 }}>Queued</span>
+            )}
           </div>
-        )) : (
-          <div style={{ padding: 40, textAlign: "center", border: `1px solid ${INK.border}`, borderRadius: 8, color: INK.muted }}>
-            <ListTodo size={32} style={{ margin: "0 auto 16px", opacity: 0.5 }} />
-            <p style={{ fontWeight: 500 }}>No tasks queued.</p>
-            <p style={{ fontSize: "0.85rem", maxWidth: 300, margin: "8px auto 0" }}>Use Architect mode to generate the task breakdown.</p>
+        </div>
+
+        {/* IN PROGRESS COLUMN */}
+        <div style={kanbanCol}>
+          <div style={kanbanColHeader}>
+            <h3 style={kanbanColTitle}>In Progress</h3>
+            <span style={kanbanCount}>{activeTasks.length}</span>
           </div>
-        )}
+          <div style={kanbanList}>
+            {activeTasks.length > 0 ? (
+              activeTasks.map((t) => <TaskCard key={t.id} t={t} />)
+            ) : (
+              <div style={emptyBoxSmall}>
+                <p>No active tasks.</p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* DONE COLUMN */}
+        <div style={kanbanCol}>
+          <div style={kanbanColHeader}>
+            <h3 style={kanbanColTitle}>Done</h3>
+            <span style={kanbanCount}>{doneTasks.length}</span>
+          </div>
+          <div style={kanbanList}>
+            {doneTasks.length > 0 ? (
+              doneTasks.map((t) => <TaskCard key={t.id} t={t} />)
+            ) : (
+              <div style={emptyBoxSmall}>
+                <p>No completed tasks.</p>
+              </div>
+            )}
+          </div>
+        </div>
       </div>
     </div>
   );
 }
 
-// ── Shared UI Components ──────────────────────────────────────────────────────
+// ──────────────────────────────────────────────────
+// Styles (Mapped to infrastructure/product design language)
+// ──────────────────────────────────────────────────
 
-function TabButton({ active, onClick, icon, label }: { active: boolean, onClick: () => void, icon: React.ReactNode, label: string }) {
-  return (
-    <button
-      onClick={onClick}
-      style={{
-        display: "flex", alignItems: "center", gap: 6,
-        padding: "10px 16px",
-        background: "transparent",
-        border: "none",
-        borderBottom: active ? `2px solid ${INK.main}` : "2px solid transparent",
-        color: active ? INK.main : INK.muted,
-        fontWeight: active ? 600 : 500,
-        fontSize: "0.9rem",
-        cursor: "pointer",
-        transition: "all 0.15s ease",
-        marginBottom: -1 // Overlap the container's bottom border
-      }}
-    >
-      {icon}
-      {label}
-    </button>
-  );
-}
+const INK = {
+  ink: "#1a1a1a",
+  mid: "#5f5e5a",
+  muted: "#a09a90",
+  border: "#e8e4dc",
+  borderSoft: "#efebe1",
+  cardBg: "#fff",
+  bgHover: "#fafaf6",
+  fontSans: '"Outfit", "Inter", ui-sans-serif, sans-serif',
+} as const;
 
-// Global styles injected here for the prototype so it renders cleanly
+const pageWrap: React.CSSProperties = {
+  padding: "28px 48px 48px",
+  fontFamily: INK.fontSans,
+  color: INK.ink,
+};
+
+const grid: React.CSSProperties = {
+  display: "grid",
+  gridTemplateColumns: "minmax(200px, 280px) minmax(0, 1fr)",
+  gap: 28,
+  maxWidth: 1400,
+  margin: "0 auto",
+  alignItems: "stretch",
+};
+
+const leftCol: React.CSSProperties = {
+  minWidth: 0,
+  display: "flex",
+  flexDirection: "column",
+  gap: 24,
+};
+
+const rightCol: React.CSSProperties = {
+  minWidth: 0,
+  display: "flex",
+  flexDirection: "column",
+};
+
+const centeredMsg: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+  padding: "24px 0",
+  justifyContent: "center",
+};
+
+const railGroup: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+};
+const railGroupHeader: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "0 4px 8px",
+};
+const railGroupTitle: React.CSSProperties = {
+  fontSize: "0.68rem",
+  fontWeight: 700,
+  letterSpacing: "0.12em",
+  textTransform: "uppercase",
+  color: INK.muted,
+};
+const railItems: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 4,
+};
+
+const flatTile: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+  width: "100%",
+  padding: "10px 14px",
+  borderRadius: 8,
+  cursor: "pointer",
+  font: "inherit",
+  transition: "background 0.1s, border-color 0.1s, box-shadow 0.1s",
+  border: "1px solid transparent",
+  textAlign: "left",
+};
+
+const panel: React.CSSProperties = {
+  background: INK.cardBg,
+  border: `1px solid ${INK.border}`,
+  borderRadius: 10,
+  padding: 32,
+  flex: 1,
+  minHeight: "calc(100vh - 150px)",
+  display: "flex",
+  flexDirection: "column",
+  boxShadow: "0 1px 3px rgba(0,0,0,0.02)",
+};
+
+const panelHeader: React.CSSProperties = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  marginBottom: 24,
+  flexShrink: 0,
+};
+const panelTitle: React.CSSProperties = {
+  fontSize: "1.2rem",
+  fontWeight: 600,
+  margin: 0,
+  color: INK.ink,
+};
+const panelDesc: React.CSSProperties = {
+  color: INK.muted,
+  fontSize: "0.85rem",
+  margin: "4px 0 0",
+};
+
+const actionBtn: React.CSSProperties = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 6,
+  padding: "8px 16px",
+  border: `1px solid ${INK.border}`,
+  borderRadius: 8,
+  background: "#fff",
+  cursor: "pointer",
+  font: "inherit",
+  fontSize: "0.85rem",
+  fontWeight: 500,
+  color: INK.ink,
+  boxShadow: "0 1px 2px rgba(0,0,0,0.02)",
+};
+
+const editorContainer: React.CSSProperties = {
+  border: `1px solid ${INK.border}`,
+  borderRadius: 10,
+  overflow: "hidden",
+  background: INK.cardBg,
+  boxShadow: "0 1px 3px rgba(0,0,0,0.02)",
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  minHeight: 0,
+};
+const editorTabs: React.CSSProperties = {
+  display: "flex",
+  background: INK.bgHover,
+  borderBottom: `1px solid ${INK.borderSoft}`,
+  padding: "8px 16px",
+  gap: 16,
+  flexShrink: 0,
+};
+const editorTabActive: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  padding: "6px 12px",
+  borderRadius: 6,
+  background: INK.cardBg,
+  border: `1px solid ${INK.borderSoft}`,
+  boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
+  color: INK.ink,
+  fontWeight: 500,
+  fontSize: "0.85rem",
+  cursor: "pointer",
+};
+const editorTabInactive: React.CSSProperties = {
+  ...editorTabActive,
+  background: "transparent",
+  border: "1px solid transparent",
+  boxShadow: "none",
+  color: INK.muted,
+};
+
+const textAreaStyle: React.CSSProperties = {
+  width: "100%",
+  flex: 1,
+  minHeight: 0,
+  padding: 40,
+  fontSize: "0.85rem",
+  lineHeight: 1.6,
+  border: "none",
+  outline: "none",
+  resize: "none",
+  fontFamily: "var(--font-sans)",
+  color: INK.ink,
+  display: "block",
+  boxSizing: "border-box",
+  margin: 0,
+};
+const previewAreaStyle: React.CSSProperties = {
+  flex: 1,
+  minHeight: 0,
+  padding: 40,
+  boxSizing: "border-box",
+  overflowY: "auto",
+};
+
+const emptyBox: React.CSSProperties = {
+  border: `1px dashed ${INK.borderSoft}`,
+  borderRadius: 10,
+  padding: "48px 32px",
+  textAlign: "center",
+  color: INK.muted,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  margin: "auto 0",
+};
+const emptyBoxSmall: React.CSSProperties = {
+  padding: 32,
+  textAlign: "center",
+  border: `1px dashed ${INK.border}`,
+  borderRadius: 8,
+  color: INK.muted,
+  fontSize: "0.85rem",
+};
+
+const kanbanCol: React.CSSProperties = {
+  flex: 1,
+  minWidth: 300,
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+};
+const kanbanColHeader: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: 12,
+};
+const kanbanColTitle: React.CSSProperties = {
+  fontSize: "0.95rem",
+  fontWeight: 600,
+  color: INK.ink,
+  margin: 0,
+};
+const kanbanCount: React.CSSProperties = {
+  fontSize: "0.75rem",
+  background: INK.borderSoft,
+  padding: "2px 8px",
+  borderRadius: 12,
+  color: INK.muted,
+  fontWeight: 600,
+};
+const kanbanList: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 12,
+  overflowY: "auto",
+  paddingRight: 4,
+  paddingBottom: 24,
+};
+
+const taskCard: React.CSSProperties = {
+  border: `1px solid ${INK.border}`,
+  borderRadius: 8,
+  padding: 16,
+  background: INK.cardBg,
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+  boxShadow: "0 1px 2px rgba(0,0,0,0.02)",
+};
+const taskStatusDot: React.CSSProperties = {
+  width: 16,
+  height: 16,
+  borderRadius: "50%",
+  marginTop: 2,
+  flexShrink: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+};
+const taskBadge: React.CSSProperties = {
+  fontSize: "0.75rem",
+  color: INK.muted,
+  background: INK.bgHover,
+  padding: "4px 8px",
+  borderRadius: 4,
+  fontWeight: 500,
+};
+
+// Global styles
 const styleTag = `
   .btn-primary, .btn-secondary, .btn-ghost {
     display: inline-flex; align-items: center; justify-content: center; gap: 6px;
     padding: 8px 16px; border-radius: 6px; font-size: 0.85rem; font-weight: 500;
     cursor: pointer; transition: all 0.15s ease; border: 1px solid transparent;
   }
-  .btn-primary { background: #1a1918; color: white; }
+  .btn-primary { background: #1a1a1a; color: white; }
   .btn-primary:hover { background: #333; }
-  .btn-secondary { background: #fff; border-color: #e8e4dc; color: #1a1918; }
-  .btn-secondary:hover { background: #f8f6f2; }
-  .btn-ghost { background: transparent; color: #6b6560; }
-  .btn-ghost:hover { background: #f8f6f2; color: #1a1918; }
-  
-  .markdown-prose h1 { font-size: 1.5rem; font-weight: 700; margin-top: 0; }
-  .markdown-prose h2 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; }
+  .btn-secondary { background: #fff; border-color: #e8e4dc; color: #1a1a1a; }
+  .btn-secondary:hover { background: #fafaf6; }
+  .btn-ghost { background: transparent; color: #a09a90; }
+  .btn-ghost:hover { background: #fafaf6; color: #1a1a1a; }
+
+  .markdown-prose { font-size: 0.85rem; color: #1a1a1a; }
+  .markdown-prose h1 { font-size: 1.25rem; font-weight: 700; margin-top: 0; }
+  .markdown-prose h2 { font-size: 1.15rem; font-weight: 600; margin-top: 1.5rem; }
+  .markdown-prose h3 { font-size: 1.05rem; font-weight: 600; margin-top: 1.25rem; }
   .markdown-prose p { margin-top: 0.5rem; margin-bottom: 1rem; line-height: 1.6; }
   .markdown-prose ul { padding-left: 1.5rem; margin-bottom: 1rem; }
-  .markdown-prose li { margin-bottom: 0.25rem; }
+  .markdown-prose li { margin-bottom: 0.5rem; line-height: 1.6; }
+  .markdown-prose strong { font-weight: 600; }
 `;
 
-if (typeof document !== "undefined" && !document.getElementById("plan-v2-styles")) {
+if (
+  typeof document !== "undefined" &&
+  !document.getElementById("plan-v2-styles")
+) {
   const style = document.createElement("style");
   style.id = "plan-v2-styles";
   style.innerHTML = styleTag;
diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
index ed5c6b5d..c427a22e 100644
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@@ -68,15 +68,97 @@ async function ensureChatTables() {
   chatTablesReady = true;
 }
 
+interface DBProject {
+  id: string;
+  name: string;
+  slug?: string;
+  productName?: string;
+  status?: string;
+  productVision?: string;
+  audience?: string;
+  kickoff?: { mode: string; sourceData: unknown };
+  designKit?: unknown;
+  giteaCloneUrl?: string;
+  plan?: {
+    decisions?: { title: string; choice: string; why?: string }[];
+    tasks?: { text: string; status: "open" | "done" }[];
+    ideas?: { text: string }[];
+    brief?: string;
+  };
+}
+
 export async function buildSystemPrompt(
-  projects: any[],
+  projects: DBProject[],
   workspace: string,
-  activeProject?: any,
+  activeProject?: DBProject,
+  chatMode: "vibe" | "collaborate" | "delegate" = "vibe",
 ): Promise<string> {
+  const modeInstructions =
+    chatMode === "collaborate"
+      ? `
+# MODE: Architect (Collaborate)
+You are an Architect and Product Strategist using Spec-Driven Development.
+**DO NOT WRITE CODE OR USE FILE SYSTEM TOOLS (e.g., fs_edit, fs_write, ship, shell_exec).**
+Your job is to interview the user to understand their requirements, and then generate a structured PRD (Product Requirements Document) and Execution Plan.
+
+## Step 1: Draft the PRD (Spec)
+Do not guess. Ask the user clarifying questions. When the requirements are clear, use \`plan_vision_set\` to save the PRD.
+The PRD MUST strictly follow this Markdown template:
+
+# Feature Specification: [FEATURE NAME]
+**Status**: Draft
+
+## User Scenarios & Testing
+User stories MUST be prioritized as user journeys ordered by importance. Each user story MUST be INDEPENDENTLY TESTABLE.
+### User Story 1 - [Brief Title] (Priority: P1)
+[Describe this user journey in plain language]
+**Independent Test**: [Describe how this can be tested independently]
+**Acceptance Scenarios**:
+1. **Given** [initial state], **When** [action], **Then** [expected outcome]
+
+### User Story 2 - [Brief Title] (Priority: P2)
+[Continue for all stories...]
+
+## Functional Requirements
+- **FR-001**: System MUST [specific capability]
+- **FR-002**: Users MUST be able to [key interaction]
+
+## Key Entities
+- **[Entity 1]**: [What it represents, key attributes]
+- **[Entity 2]**: [Relationships to other entities]
+
+## Success Criteria
+- **SC-001**: [Measurable, technology-agnostic metric, e.g., "Users can complete checkout in under 3 minutes"]
+
+## Step 2: The Architecture Plan
+Once the PRD is saved, decide HOW to build it. Use \`plan_decision_log\` to record the specific technologies:
+- Database (e.g. Postgres)
+- Stack (e.g. Next.js, Tailwind)
+- Auth (e.g. NextAuth)
+
+## Step 3: The Execution Plan (Tasks)
+Once the architecture is logged, break the PRD into an actionable development checklist using \`plan_task_add\`.
+You MUST organize tasks strictly by User Story using bracket prefixes.
+Each task must be atomic and specify the exact file path to be edited.
+Example:
+- \`plan_task_add { title: "[Phase 1] Initialize Next.js project and setup Prisma DB" }\`
+- \`plan_task_add { title: "[US1] Create User table in schema.prisma" }\`
+- \`plan_task_add { title: "[US1] Build /api/auth POST endpoint" }\`
+- \`plan_task_add { title: "[US2] Build frontend Dashboard form in src/app/dashboard/page.tsx" }\`
+
+Your turn ends when the user's PRD is saved via plan_vision_set, decisions are logged, and the task list is fully populated.
+`
+      : `
+# MODE: Vibe Code (Full Engineering)
+You are a Lead Software Engineer who is permitted to write code, edit files, create backend endpoints, and deploy apps.
+- Use \`fs_write\`, \`fs_edit\`, \`ship\`, and other developer tools directly to build features based on the saved Plan.
+- Always run \`request_visual_qa\` before returning a preview URL to the user to guarantee visual quality.
+`;
+
   const projectsText = projects.length
     ? projects
         .map(
-          (p: any) =>
+          (p: DBProject) =>
             `- "${p.productName || p.name}" (id: ${p.id}, status: ${p.status || "defining"})${p.productVision ? ": " + p.productVision.slice(0, 120) : ""}`,
         )
         .join("\n")
@@ -90,11 +172,7 @@ export async function buildSystemPrompt(
   // the user to re-decide settled questions and knows what's queued up.
   // Decisions are first-class: they encode the founder's intent and
   // should be honored unless the user explicitly revisits one.
-  const plan = (activeProject?.plan ?? {}) as {
-    decisions?: { title: string; choice: string; why?: string }[];
-    tasks?: { text: string; status: "open" | "done" }[];
-    ideas?: { text: string }[];
-  };
+  const plan = activeProject?.plan ?? {};
   const decisionsBlock = plan.decisions?.length
     ? `\n**Decisions already made for this project (DO NOT re-litigate unless the user asks):**\n${plan.decisions
         .slice(0, 20)
@@ -117,8 +195,8 @@ export async function buildSystemPrompt(
         .join("\n")}\n`
     : "";
 
-  const briefBlock = (plan as any).brief
-    ? `\n**[PROJECT BRIEF / SCOPE DOCUMENT]**\nThe user has uploaded a detailed project brief. You MUST read and adhere to these requirements when making architectural or product decisions:\n${(plan as any).brief.slice(0, 5000)}\n`
+  const briefBlock = plan.brief
+    ? `\n**[PROJECT BRIEF / SCOPE DOCUMENT]**\nThe user has uploaded a detailed project brief. You MUST read and adhere to these requirements when making architectural or product decisions:\n${plan.brief.slice(0, 5000)}\n`
     : "";
 
   const designKitBlock = buildDesignKitPromptSection(activeProject);
@@ -147,6 +225,8 @@ After every assistant turn, the harness automatically runs \`git add -A && git c
 
   return `You are Vibn AI — the technical co-founder of every Vibn user. You turn ideas into shipped software. Treat their projects like they're your own.
 
+${modeInstructions}
+
 You're talking to the owner of the "${workspace}" workspace. They have admin access to their Gitea org, a fleet of Coolify projects, and a persistent dev container per project. You can read and write any of it.
 
 ## Mode: respond first, act second
@@ -260,11 +340,11 @@ For NEW repos / branches: \`gitea_repos_list\`, \`gitea_repo_get\`, \`gitea_repo
 
 ## Plan tab — be the user's scribe
 The Plan tab (Vision · Tasks · Decisions · Ideas) is the project's persistent memory. Capture things in the moment so the user doesn't context-switch.
-- \`plan_decision_log\` PROACTIVELY when a non-trivial choice settles (DB engine, auth, framework, region, pricing, brand voice). Don't ask permission. One-liner ack ("logged Postgres"), move on.
+- \`plan_vision_set\` PROACTIVELY when the user articulates or refines the high-level business case, elevator pitch, or primary objective of what they're building. The Objective is your north star and is separate from the technical Blueprint.
+- \`plan_document_update\` PROACTIVELY when the user asks you to write, edit, or update a specific Technical or Product Specification document inside the Blueprint. You MUST use this tool to overwrite specific sections of the Blueprint. The valid document IDs are exactly: \`stories\`, \`acceptance\`, \`success\`, \`ui_design\`, \`tech_context\`, \`data_model\`, \`file_structure\`, \`tasks\`, and \`checklist\`. Do NOT use \`fs_write\` or \`ship\` to edit markdown files when asked to update the plan—the plan lives in the database. Don't ask permission. One-liner ack ("Updated the UI Design spec"), and move on.
 - \`plan_task_add\` when you commit to multi-step work, the user says "remind me to X", or a chain ends with an obvious user follow-up (add Stripe webhook URL). One task per real next-action.
 - \`plan_task_edit\` to update a task or change its status. Put a task in "review" status when you finish it, unless the user explicitly said it is "done".
 - \`plan_idea_add\` sparingly, only for something worth remembering that isn't a task or decision.
-- \`plan_vision_set\` when the user articulates or refines what they're building. The vision is your north star.
 
 ## Hard rules (non-negotiable)
 - **Cite the tool result, don't claim from memory.** Before stating "I edited X" or "the server is running," you must point to a tool result from THIS turn. If you can't, say "I have not yet made that change — running the tool now" and then run it. A claim without a citable tool result is a hallucination.
@@ -284,7 +364,7 @@ The Plan tab (Vision · Tasks · Decisions · Ideas) is the project's persistent
 - After \`ship\` or \`apps_deploy\`, the result is authoritative. Don't call \`gitea_*\` / \`shell_exec\` / \`apps_*\` to "verify" — read the response and report.
 - Never fake success. Never imply something worked if it didn't.
 
-${activeBlock}## Current workspace projects
+${activeBlock}${briefBlock}## Current workspace projects
 ${projectsText}
 
 Today's date: ${new Date().toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" })}.`;
@@ -323,6 +403,7 @@ export async function POST(request: Request) {
     message: string;
     workspace: string;
     mcp_token?: string;
+    chatMode?: "vibe" | "collaborate" | "delegate";
   };
   try {
     body = await request.json();
@@ -330,7 +411,7 @@ export async function POST(request: Request) {
     return NextResponse.json({ error: "Invalid JSON" }, { status: 400 });
   }
 
-  const { thread_id, message, workspace, mcp_token } = body;
+  const { thread_id, message, workspace, mcp_token, chatMode = "vibe" } = body;
   if (!thread_id || !message?.trim()) {
     return NextResponse.json(
       { error: "thread_id and message are required" },
@@ -351,7 +432,7 @@ export async function POST(request: Request) {
   const threadProjectId = threads[0].project_id;
 
   // Load message history (last 40 messages)
-  const rows = await query<any>(
+  const rows = await query<{ data: ChatMessage }>(
     `SELECT data FROM fs_chat_messages WHERE thread_id = $1 ORDER BY created_at DESC LIMIT 40`,
     [thread_id],
   );
@@ -362,53 +443,37 @@ export async function POST(request: Request) {
   // followed by tool messages responding to each 'tool_call_id'."
   // Gemini silently tolerates stale toolCalls, so we only hit this on
   // non-Gemini providers.
-  const history: ChatMessage[] = rows.reverse().map((r: any) => {
-    const msg = r.data;
-    if (msg.role === "assistant" && msg.toolCalls?.length) {
-      const rawResults = msg._rawToolResults ?? [];
-      const summary = msg.toolCalls
-        .map((tc: any) => {
-          const tr = rawResults.find((r: any) => r.name === tc.name);
-          let resultSig = "(no result captured)";
-          if (tr) {
-            try {
-              const parsed =
-                typeof tr.result === "string"
-                  ? JSON.parse(tr.result)
-                  : tr.result;
-              if (parsed && typeof parsed === "object") {
-                if (parsed.ok === false) {
-                  resultSig = `ERROR: ${parsed.error ?? "unknown"}`;
-                } else if (parsed.sha256) {
-                  resultSig = `ok bytes=${parsed.bytes} sha=${parsed.sha256.slice(0, 8)}`;
-                } else if (parsed.previewUrl) {
-                  resultSig = `ok previewUrl=${parsed.previewUrl} health=${parsed.healthCheck?.status ?? "?"}`;
-                } else if (parsed.uuid) {
-                  resultSig = `ok uuid=${parsed.uuid}`;
-                } else {
-                  resultSig = "ok";
-                }
-              }
-            } catch {
-              resultSig = String(tr.result).slice(0, 80);
-            }
-          }
-          const argSig = JSON.stringify(tc.args ?? {}).slice(0, 100);
-          return `  - ${tc.name}(${argSig}) → ${resultSig}`;
-        })
-        .join("\n");
-      const suffix = `\n\n[tools executed this turn:\n${summary}\n]`;
-      msg.content = (msg.content ?? "") + suffix;
-      msg.toolCalls = undefined;
-    }
-    if (typeof msg.content === "string") {
-      msg.content = msg.content
-        .replace(/<tool_calls>[\s\S]*?<\/tool_calls>/g, "")
-        .replace(/<think>[\s\S]*?<\/think>/g, "")
-        .trim();
-    }
-    return msg;
-  });
+  const history: ChatMessage[] = rows
+    .reverse()
+    .map((r: { data: ChatMessage }) => {
+      const msg = r.data as unknown as {
+        role: string;
+        content?: string;
+        toolCalls?: unknown;
+        _rawToolResults?: unknown;
+      };
+      if (
+        msg.role === "assistant" &&
+        Array.isArray(msg.toolCalls) &&
+        msg.toolCalls.length
+      ) {
+        // Remove any tool calls completely from the history payload.
+        // This is the clean, standard way to pass assistant history without
+        // polluting the context or inducing model hallucinations.
+        msg.toolCalls = undefined;
+        msg._rawToolResults = undefined;
+      }
+      if (typeof msg.content === "string") {
+        msg.content = msg.content
+          .replace(/<tool_calls>[\s\S]*?<\/tool_calls>/g, "")
+          .replace(/<think>[\s\S]*?<\/think>/g, "")
+          // Completely strip any legacy leaked "[tools executed this turn]" strings in case they exist in older messages
+          .replace(/\n\n\[tools executed this turn:[\s\S]*?\]/g, "")
+          .trim();
+      }
+
+      return msg as unknown as ChatMessage;
+    });
 
   // Add user message
   const userMsg: ChatMessage = { role: "user", content: message.trim() };
@@ -418,6 +483,11 @@ export async function POST(request: Request) {
     [thread_id, email, JSON.stringify(userMsg)],
   );
 
+  // Strip the hidden tool summaries out of the history array we pass to the LLM
+  // wait no, we WANT the LLM to see them, so we leave them in the history array.
+  // BUT we don't want to persist them to the DB, so we strip them when we construct
+  // the final assistant message at the end of the route.
+
   // Update thread updatedAt
   await query(
     `UPDATE fs_chat_threads SET updated_at = NOW(), data = data || $2 WHERE id = $1`,
@@ -425,24 +495,24 @@ export async function POST(request: Request) {
   );
 
   // Load projects for system prompt context
-  const projectRows = await query<any>(
+  const projectRows = await query<{ data: DBProject }>(
     `SELECT p.data FROM fs_projects p
      JOIN fs_users u ON u.id = p.user_id
      WHERE u.data->>'email' = $1
      ORDER BY (p.data->>'updatedAt') DESC NULLS LAST LIMIT 20`,
     [email],
   );
-  const projects = projectRows.map((r: any) => r.data);
+  const projects = projectRows.map((r: { data: DBProject }) => r.data);
 
   // If the thread is project-scoped, pull the active project's data
   // (preferring fs_projects since the projects array is capped at 20).
-  let activeProject: any = null;
+  let activeProject: DBProject | null = null;
   if (threadProjectId) {
-    const found = projects.find((p: any) => p.id === threadProjectId);
+    const found = projects.find((p: DBProject) => p.id === threadProjectId);
     if (found) {
       activeProject = found;
     } else {
-      const r = await query<{ data: any }>(
+      const r = await query<{ data: DBProject }>(
         `SELECT p.data FROM fs_projects p
           JOIN fs_users u ON u.id = p.user_id
           WHERE p.id = $1 AND u.data->>'email' = $2 LIMIT 1`,
@@ -456,6 +526,7 @@ export async function POST(request: Request) {
     projects,
     workspace,
     activeProject,
+    chatMode,
   );
 
   // Sentry-as-product Stage 4: auto-surface unresolved errors at
@@ -576,7 +647,7 @@ export async function POST(request: Request) {
       // Emit turnId immediately so the client can log/correlate.
       emit({ type: "turn_start", turnId });
 
-      let messages = [...history];
+      const messages = [...history];
       let round = 0;
       let assistantText = "";
       // Per-round text segments. The model emits one `resp.text` per
@@ -604,7 +675,7 @@ export async function POST(request: Request) {
       let toolCallsSinceText = 0;
       let loopBreakReason: string | null = null;
 
-      function fingerprintToolCall(tc: any) {
+      function fingerprintToolCall(tc: ToolCall) {
         if (tc.name === "shell_exec") {
           const cmd = String(tc.args?.command ?? "").trim();
           // First non-cd verb (pkill, npm, curl, etc.)
@@ -887,13 +958,12 @@ export async function POST(request: Request) {
         // so we never abandon the user with silent ✓ pills. Confirmed
         // failure mode in prod: turn persisted with content_len=0 and
         // 20 toolCalls, user had to re-prompt to get any answer.
-        const lastTurnHadTools =
-          messages.length > 0 && messages[messages.length - 1].role === "tool";
+        const anyToolsExecuted = assistantToolCalls.length > 0;
         // C-07: Also recover when the model has been running tools without
         // any text for >=4 rounds — the user is staring at silence.
         const needsRecovery =
           !aborted &&
-          lastTurnHadTools &&
+          anyToolsExecuted &&
           (round >= MAX_TOOL_ROUNDS ||
             !!loopBreakReason ||
             assistantText.trim().length === 0 ||
@@ -950,15 +1020,28 @@ export async function POST(request: Request) {
         // segmentation it shows during streaming. Older messages
         // (pre-this-fix) won't have textSegments and fall back to
         // single-bubble content rendering.
+
+        // Ensure we strip the `[tools executed this turn...]` block if the AI accidentally hallucinated it
+        assistantText = assistantText.replace(
+          /\n\n\[tools executed this turn:[\s\S]*?\]/g,
+          "",
+        );
+
         const finalMsg: ChatMessage & {
           textSegments?: string[];
-          _rawToolResults?: Array<{ name: string; args: any; result: string }>;
+          _rawToolResults?: Array<{
+            name: string;
+            args: Record<string, unknown>;
+            result: string;
+          }>;
         } = {
           role: "assistant",
           content: assistantText,
           toolCalls: assistantToolCalls.length ? assistantToolCalls : undefined,
           textSegments: assistantTextSegments.length
-            ? assistantTextSegments
+            ? assistantTextSegments.map((seg) =>
+                seg.replace(/\n\n\[tools executed this turn:[\s\S]*?\]/g, ""),
+              )
             : undefined,
           _rawToolResults: assistantToolCalls.length ? [] : undefined,
         };
@@ -1036,7 +1119,12 @@ export async function POST(request: Request) {
             const result = (await Promise.race([
               commitPromise,
               timeoutPromise,
-            ])) as any;
+            ])) as {
+              committed: boolean;
+              sha?: string;
+              pushed?: boolean;
+              reason?: string;
+            };
 
             if (result.committed) {
               emit({ type: "commit", sha: result.sha, pushed: result.pushed });
@@ -1122,28 +1210,7 @@ export async function POST(request: Request) {
           }
         })().catch(() => {});
 
-        // Fire-and-forget: auto-extract plan updates (tasks, decisions,
-        // vision) from the conversation using a cheap Gemini Flash model.
-        // Deduplicates against existing plan items by title.
-        (async () => {
-          try {
-            if (!threadProjectId) return;
-            const allMessages = [...history, finalMsg];
-            if (allMessages.length < 2) return;
-            const transcript = allMessages
-              .map((m) => {
-                const text =
-                  typeof m.content === "string"
-                    ? m.content
-                    : JSON.stringify(m.content);
-                return `${m.role.toUpperCase()}: ${text.slice(0, 1200)}`;
-              })
-              .join("\n\n");
-          } catch (err) {
-            console.warn("[chat] plan-extract failed (non-fatal):", err);
-          }
-        })().catch(() => {});
-
+        // Plan extraction is handled inline during tool calls or proactively.
         emit({ type: "done" });
         safeClose();
       } catch (e) {
diff --git a/app/api/mcp/route.ts b/app/api/mcp/route.ts
index 186371aa..5efb5309 100644
--- a/app/api/mcp/route.ts
+++ b/app/api/mcp/route.ts
@@ -295,6 +295,9 @@ export async function POST(request: Request) {
       case "projects.get":
         return await toolProjectsGet(principal, params);
 
+      case "email.send":
+        return await toolEmailSend(principal, params);
+
       case "project.recent_errors":
       case "project.recent.errors":
         return await toolProjectRecentErrors(principal, params);
@@ -507,8 +510,8 @@ export async function POST(request: Request) {
         return await toolPlanTaskEdit(principal, params);
       case "plan.task.complete":
         return await toolPlanTaskComplete(principal, params);
-      case "plan.decision.log":
-        return await toolPlanDecisionLog(principal, params);
+      case "plan.document.update":
+        return await toolPlanDocumentUpdate(principal, params);
 
       case "tech_stack_analyze":
       case "tech.stack.analyze":
@@ -795,6 +798,47 @@ async function toolProjectsGet(
   });
 }
 
+async function toolEmailSend(
+  principal: Principal,
+  params: Record<string, any>,
+) {
+  const projectId = String(params.projectId ?? params.id ?? "").trim();
+  if (!projectId) {
+    return NextResponse.json(
+      { error: 'Param "projectId" is required' },
+      { status: 400 },
+    );
+  }
+
+  const { to, subject, text, mjml } = params;
+  if (!to || !subject || !text) {
+    return NextResponse.json(
+      { error: "Missing required email parameters (to, subject, text)." },
+      { status: 400 },
+    );
+  }
+
+  // Future feature: Look up project.email_config in Postgres for custom domains/API keys.
+  // For now, it uses the global ENV variable.
+  try {
+    const { sendEmail } = await import("@/lib/email/mailgun");
+    const response = await sendEmail({
+      to,
+      subject,
+      text,
+      mjml,
+    });
+
+    if (!response.success) {
+      return NextResponse.json({ error: response.error }, { status: 500 });
+    }
+
+    return NextResponse.json({ result: response });
+  } catch (error: any) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}
+
 /**
  * Tenant-safe lookup: confirms the project belongs to the caller's
  * workspace before exposing Sentry data. Returns null + error
@@ -2122,11 +2166,17 @@ async function toolAppsCreate(
       buildPack: (params.buildPack as any) ?? "nixpacks",
       name: appName,
       domains: toDomainsString([fqdn]),
-            isAutoDeployEnabled: true,
+      isAutoDeployEnabled: true,
       instantDeploy: false,
-      installCommand: params.installCommand ? String(params.installCommand) : undefined,
-      buildCommand: params.buildCommand ? String(params.buildCommand) : undefined,
-      startCommand: params.startCommand ? String(params.startCommand) : undefined,
+      installCommand: params.installCommand
+        ? String(params.installCommand)
+        : undefined,
+      buildCommand: params.buildCommand
+        ? String(params.buildCommand)
+        : undefined,
+      startCommand: params.startCommand
+        ? String(params.startCommand)
+        : undefined,
       dockerComposeLocation: params.dockerComposeLocation
         ? String(params.dockerComposeLocation)
         : undefined,
@@ -2153,11 +2203,17 @@ async function toolAppsCreate(
       buildPack: (params.buildPack as any) ?? "nixpacks",
       name: appName,
       domains: toDomainsString([fqdn]),
-            isAutoDeployEnabled: true,
+      isAutoDeployEnabled: true,
       instantDeploy: false,
-      installCommand: params.installCommand ? String(params.installCommand) : undefined,
-      buildCommand: params.buildCommand ? String(params.buildCommand) : undefined,
-      startCommand: params.startCommand ? String(params.startCommand) : undefined,
+      installCommand: params.installCommand
+        ? String(params.installCommand)
+        : undefined,
+      buildCommand: params.buildCommand
+        ? String(params.buildCommand)
+        : undefined,
+      startCommand: params.startCommand
+        ? String(params.startCommand)
+        : undefined,
       dockerComposeLocation: params.dockerComposeLocation
         ? String(params.dockerComposeLocation)
         : undefined,
@@ -4525,7 +4581,9 @@ function normalizeFsPath(
     // Workspace-level fallback (legacy behaviour)
     if (!norm.startsWith(FS_ROOT) && norm !== FS_ROOT) {
       return NextResponse.json(
-        { error: `Path "${p}" is outside ${FS_ROOT}; use shell.exec for system paths.` },
+        {
+          error: `Path "${p}" is outside ${FS_ROOT}; use shell.exec for system paths.`,
+        },
         { status: 400 },
       );
     }
@@ -4906,7 +4964,7 @@ async function toolFsWrite(principal: Principal, params: Record<string, any>) {
       { status: 500 },
     );
   }
-  const { createHash } = require('crypto');
+  const { createHash } = require("crypto");
   const bytes = Buffer.byteLength(content, "utf8");
   const sha256 = createHash("sha256").update(content, "utf8").digest("hex");
   return NextResponse.json({
@@ -4998,17 +5056,17 @@ print(n)`;
       { status },
     );
   }
-  const stdoutParts = r.stdout.split('---');
+  const stdoutParts = r.stdout.split("---");
   const replacementsStr = stdoutParts[0].trim();
-  const hashAndSize = stdoutParts[1] ? stdoutParts[1].trim().split('\n') : [];
-  
+  const hashAndSize = stdoutParts[1] ? stdoutParts[1].trim().split("\n") : [];
+
   return NextResponse.json({
-    result: { 
-      ok: true, 
-      path, 
+    result: {
+      ok: true,
+      path,
       replacements: parseInt(replacementsStr || "0", 10),
       sha256: hashAndSize[0] ? hashAndSize[0].trim() : undefined,
-      bytes: hashAndSize[1] ? parseInt(hashAndSize[1].trim(), 10) : undefined
+      bytes: hashAndSize[1] ? parseInt(hashAndSize[1].trim(), 10) : undefined,
     },
   });
 }
@@ -5018,7 +5076,10 @@ async function toolFsList(principal: Principal, params: Record<string, any>) {
   if (guard) return guard;
   const project = await resolveProjectOr404(principal, params);
   if (project instanceof NextResponse) return project;
-  const path = normalizeFsPath(String(params.path ?? "/workspace"), project.slug);
+  const path = normalizeFsPath(
+    String(params.path ?? "/workspace"),
+    project.slug,
+  );
   if (path instanceof NextResponse) return path;
   const cmd = `cd ${shq(path)} && ls -lA --time-style=long-iso 2>&1 | head -200`;
   const r = await runFsCmd(principal, project, cmd);
@@ -5511,8 +5572,21 @@ interface PlanDecision {
   why?: string;
   createdAt: string;
 }
+export interface BlueprintDocs {
+  stories?: string;
+  acceptance?: string;
+  success?: string;
+  ui_design?: string;
+  tech_context?: string;
+  data_model?: string;
+  file_structure?: string;
+  tasks?: string;
+  checklist?: string;
+}
+
 interface PlanShape {
   vision?: string;
+  blueprint?: BlueprintDocs;
   ideas: PlanIdea[];
   tasks: PlanTask[];
   decisions: PlanDecision[];
@@ -5557,6 +5631,7 @@ function readPlanFromData(data: any): PlanShape {
   }));
   return {
     vision: data?.productVision ?? raw.vision,
+    blueprint: raw.blueprint ?? {},
     ideas: Array.isArray(raw.ideas) ? raw.ideas : [],
     tasks,
     decisions: Array.isArray(raw.decisions) ? raw.decisions : [],
@@ -5586,6 +5661,15 @@ async function writePlanForProject(
       [projectId, JSON.stringify({ ...plan, vision: undefined })],
     );
   }
+  // Immediately notify the SSE connections that this project has changed!
+  try {
+    // Note: Postgres NOTIFY does not support parameterized queries ($1) for the payload.
+    // It requires the payload string to be directly injected or sent as a literal.
+    // Since projectId is a safe, known UUID/slug generated by us, we can safely template it.
+    await query(`NOTIFY project_updates, '${projectId}'`);
+  } catch (e) {
+    console.error("Failed to notify project updates:", e);
+  }
 }
 
 async function toolPlanGet(principal: Principal, params: Record<string, any>) {
@@ -5784,17 +5868,20 @@ async function toolPlanTaskComplete(
   });
 }
 
-async function toolPlanDecisionLog(
+async function toolPlanDocumentUpdate(
   principal: Principal,
   params: Record<string, any>,
 ) {
   const projectId = String(params.projectId ?? "").trim();
-  const title = String(params.title ?? "").trim();
-  const choice = String(params.choice ?? "").trim();
-  const why = params.why ? String(params.why).trim() : undefined;
-  if (!projectId || !title || !choice) {
+  // Strip any accidental 'prd_' prefix if the AI happens to hallucinate it,
+  // but natively expect clean keys like "stories"
+  const rawDocId = String(params.docId ?? "").trim();
+  const blueprintKey = rawDocId.replace(/^prd_/, "") as keyof BlueprintDocs;
+  const content = String(params.content ?? "").trim();
+
+  if (!projectId || !blueprintKey || !content) {
     return NextResponse.json(
-      { error: "projectId, title, and choice required" },
+      { error: "projectId, docId, and content required" },
       { status: 400 },
     );
   }
@@ -5804,22 +5891,25 @@ async function toolPlanDecisionLog(
       { error: "Project not found in workspace" },
       { status: 404 },
     );
+
   const plan = readPlanFromData(project.data);
-  const decision: PlanDecision = {
-    id: planNewId(),
-    title,
-    choice,
-    why,
-    createdAt: new Date().toISOString(),
-  };
-  plan.decisions.unshift(decision);
+
+  if (!plan.blueprint) {
+    plan.blueprint = {};
+  }
+
+  // Update the strongly typed blueprint object
+  plan.blueprint[blueprintKey] = content;
+
+  // We explicitly purge any legacy fallback copies of this document from the
+  // decisions array. The decisions array is ONLY for tiny choices like "use Stripe".
+  if (Array.isArray(plan.decisions)) {
+    plan.decisions = plan.decisions.filter((d) => !d.id.startsWith("prd_"));
+  }
+
   await writePlanForProject(projectId, plan);
   return NextResponse.json({
-    result: {
-      ok: true,
-      decision,
-      summaryHint: `Decision logged to Plan → Decisions. Brief acknowledgment only.`,
-    },
+    result: { ok: true },
   });
 }
 
@@ -6034,7 +6124,10 @@ async function toolFsTree(principal: Principal, params: Record<string, any>) {
   if (guard) return guard;
   const project = await resolveProjectOr404(principal, params);
   if (project instanceof NextResponse) return project;
-  const path = normalizeFsPath(String(params.path ?? "/workspace"), project.slug);
+  const path = normalizeFsPath(
+    String(params.path ?? "/workspace"),
+    project.slug,
+  );
   if (path instanceof NextResponse) return path;
 
   // Use find to generate a tree structure, ignoring node_modules and .git
diff --git a/app/api/projects/[projectId]/plan/generate/route.ts b/app/api/projects/[projectId]/plan/generate/route.ts
index b13bf2e7..b64ef4b1 100644
--- a/app/api/projects/[projectId]/plan/generate/route.ts
+++ b/app/api/projects/[projectId]/plan/generate/route.ts
@@ -7,7 +7,7 @@ import { callVibnChat } from "@/lib/ai/vibn-chat-model";
 
 export async function POST(
   req: Request,
-  ctx: { params: Promise<{ projectId: string }> }
+  ctx: { params: Promise<{ projectId: string }> },
 ) {
   const { projectId } = await ctx.params;
   const session = await authSession();
@@ -19,153 +19,490 @@ export async function POST(
     `SELECT fs_projects.data, fs_projects.slug FROM fs_projects
      JOIN fs_users u ON u.id = fs_projects.user_id
      WHERE fs_projects.id = $1 AND u.data->>'email' = $2 LIMIT 1`,
-    [projectId, session.user.email]
+    [projectId, session.user.email],
   );
-  if (!projectRow) return NextResponse.json({ error: "Project not found" }, { status: 404 });
+  if (!projectRow)
+    return NextResponse.json({ error: "Project not found" }, { status: 404 });
 
   const body = await req.json().catch(() => ({}));
-  const objective = String(body.objective || projectRow.data?.plan?.vision || "").trim();
+  const objective = String(
+    body.objective || projectRow.data?.plan?.vision || "",
+  ).trim();
 
   if (!objective) {
-    return NextResponse.json({ error: "Objective is required to generate a PRD." }, { status: 400 });
+    return NextResponse.json(
+      { error: "Objective is required to generate a PRD." },
+      { status: 400 },
+    );
   }
 
-  // We run three sequential LLM calls to construct the complete Spec Kit documentation
+  // We run sequential LLM calls to construct the complete Spec Kit documentation
 
-  // 1. Generate the Product Spec (User Stories & Requirements)
-  const specPrompt = `You are a Principal Product Manager writing a Product Requirements Document (PRD).
-Based on the following Objective, generate a structured PRD using Markdown.
-DO NOT talk about technology (databases, frameworks, APIs). Focus purely on user value and capabilities.
+  // 1. Generate User Stories
+  const storiesPrompt = `You are a Principal Product Manager. Your goal is to write DEEP, COMPREHENSIVE documentation that engineers and AI agents can reference when building the product.
+Do not be brief. Exhaustively detail the user journeys. Do not talk about technology (databases, frameworks); focus purely on user value and behavior.
 
 OBJECTIVE:
 ${objective}
 
-You MUST follow this exact structure:
+You MUST follow this exact structure for every core actor/role in the platform. Be exhaustive.
 
-## User Scenarios & Testing
-List the 3-5 most critical User Stories, prioritized.
-### User Story 1 - [Brief Title] (Priority: P1)
-[Description]
-**Acceptance Scenarios**:
-1. **Given** [state], **When** [action], **Then** [outcome]
+# User Stories & Journeys
 
-### User Story 2 - [Brief Title] (Priority: P2)
-[Repeat...]
+## Actor: [e.g., Buyer / Seller / Admin]
+### [US-1.1] [Action-oriented title] (Priority: P1)
+**Description:** [Deeply describe the journey from start to finish]
+**Business Value:** [Why are we building this?]
+**Edge Cases & Error States:**
+- What happens if [edge case]?
+- How do we handle [error state]?
+**Out of Scope (v1):** [What are we explicitly NOT building yet?]
 
-## Functional Requirements
-- **FR-001**: System MUST [capability]
-- **FR-002**: Users MUST be able to [interaction]
+### [US-1.2] ...`;
 
-## Success Criteria
-- **SC-001**: [Measurable business outcome]`;
-
-  const specResponse = await callVibnChat({
-    systemPrompt: specPrompt,
-    messages: [{ role: "user", content: "Generate the PRD." }],
-    temperature: 0.2
+  const storiesResponse = await callVibnChat({
+    systemPrompt: storiesPrompt,
+    messages: [
+      { role: "user", content: "Generate deep, comprehensive User Stories." },
+    ],
+    temperature: 0.3,
   });
-  const specMd = specResponse.text || "Failed to generate PRD.";
+  const storiesMd = storiesResponse.text || "Failed to generate User Stories.";
 
-  // 2. Generate the Technical Architecture (Plan)
-  const planPrompt = `You are a Principal Software Architect.
-Based on the following PRD, define the Technical Architecture required to build it.
-Your choices must default to: Next.js (App Router), Postgres, Tailwind CSS, NextAuth, and Stripe (if payments).
+  // 2. Generate Acceptance Criteria
+  const acceptancePrompt = `You are a strict QA Engineer. Based on the User Stories, write EXHAUSTIVE Acceptance Criteria using BDD (Behavior-Driven Development) Given/When/Then syntax.
+These criteria must be deep enough that an AI Agent can write unit tests and E2E tests against them.
 
-PRD:
-${specMd}
+USER STORIES:
+${storiesMd}
 
 You MUST follow this exact structure:
 
-## Technical Context
-- **Language/Framework**: Next.js 15 (App Router), TypeScript
-- **Database**: Postgres (via Prisma or raw SQL)
-- **Styling**: Tailwind CSS
-- **Authentication**: [Decide auth strategy]
+# Acceptance Criteria
 
-## Data Model
-List the core database tables and their relationships.
-- **[EntityName]**: [fields...]
+## Feature: [Title from User Story]
+
+### Scenario 1: Happy Path - [Description]
+**Given** [initial context/state]
+**And** [additional context]
+**When** [action is taken]
+**Then** [expected outcome]
+**And** [additional outcome]
+
+### Scenario 2: Edge Case - [Description]
+**Given** [initial context/state]
+...
+
+## Global Functional Requirements
+- **FR-001**: System MUST [specific, testable capability]
+- **FR-002**: Users MUST be able to [interaction]`;
+
+  const acceptanceResponse = await callVibnChat({
+    systemPrompt: acceptancePrompt,
+    messages: [
+      { role: "user", content: "Generate exhaustive Acceptance Criteria." },
+    ],
+    temperature: 0.2,
+  });
+  const acceptanceMd =
+    acceptanceResponse.text || "Failed to generate Acceptance Criteria.";
+
+  // 3. Generate UI & Design Requirements
+  const uiDesignPrompt = `You are a Lead Product Designer. Define the complete UI, UX, and Design System requirements. Be highly specific so frontend engineers and AI coders know exactly what Tailwind classes and components to use.
+
+USER STORIES:
+${storiesMd}
+
+You MUST follow this exact structure:
+
+# Design System
+
+## Global Theme
+**Vibe/Personality:** [Describe the aesthetic - e.g., "Minimalist, high-trust, SaaS"]
+**Component Library:** [e.g., shadcn/ui, Tremor, raw Tailwind]
+**Spacing & Radii:** [e.g., "Use 8px (rounded-lg) for cards, 4px (rounded-md) for buttons"]
+
+## Color Palette
+- **Primary:** [Hex code] - [Usage: CTAs, active states]
+- **Secondary:** [Hex code] - [Usage: Secondary buttons, subtle highlights]
+- **Background:** [Hex code] - [Usage: App background]
+- **Surface:** [Hex code] - [Usage: Cards, modals]
+- **Text:** [Hex codes for headings vs body]
+
+## Typography
+- **Headings:** [Font Name] - [Weights used]
+- **Body:** [Font Name] - [Weights used]
+- **Monospace:** [Font Name] - [Usage]
+
+## Key Layouts
+### 1. [Screen Name]
+- **Structure:** [e.g., Sidebar left, content right]
+- **Key Components:** [e.g., Data table with pagination, Hero section]
+- **Mobile Behavior:** [How it collapses on small screens]`;
+
+  const uiDesignResponse = await callVibnChat({
+    systemPrompt: uiDesignPrompt,
+    messages: [
+      { role: "user", content: "Generate deep UI Design Requirements." },
+    ],
+    temperature: 0.3,
+  });
+  const uiDesignMd =
+    uiDesignResponse.text || "Failed to generate UI Design Requirements.";
+
+  // 4. Generate Measurable Success
+  const successPrompt = `You are a Data Analyst and Growth Lead. Define the precise, measurable success metrics for this project.
+Do not use vague metrics. Use specific KPIs, target conversion rates, and performance benchmarks.
+
+USER STORIES:
+${storiesMd}
+
+You MUST follow this exact structure:
+
+# Success Metrics & KPIs
+
+## Business Outcomes
+- **SC-001 (Activation):** [e.g., "20% of signups complete onboarding within 24h"]
+- **SC-002 (Retention):** [e.g., "40% MAU retention after 3 months"]
+
+## Technical Benchmarks
+- **TM-001 (Latency):** [e.g., "95th percentile API response < 200ms"]
+- **TM-002 (Lighthouse):** [e.g., "Google Lighthouse performance score > 90"]
+
+## North Star Metric
+**[Metric Name]:** [Why this matters above all else]`;
+
+  const successResponse = await callVibnChat({
+    systemPrompt: successPrompt,
+    messages: [{ role: "user", content: "Generate strict Success Criteria." }],
+    temperature: 0.2,
+  });
+  const successMd =
+    successResponse.text || "Failed to generate Success Criteria.";
+
+  // 5. Generate Technical Context
+  const techPrompt = `You are a Principal Software Architect. Define the definitive Technical Context and Infrastructure roadmap for this project.
+Be exhaustive. If a tool isn't listed here, the AI coders will not use it.
+Your choices MUST default to: Next.js 15 (App Router), Postgres, Tailwind CSS, and NextAuth.js (unless the objective demands otherwise).
+
+USER STORIES:
+${storiesMd}
+UI DESIGN:
+${uiDesignMd}
+
+You MUST follow this exact structure:
+
+# Technical Context & Architecture
+
+## Core Stack
+- **Framework:** Next.js 15 (App Router)
+- **Language:** TypeScript (Strict mode enabled)
+- **Database:** PostgreSQL
+- **ORM:** Prisma
+- **Authentication:** NextAuth.js v5
+- **Styling:** Tailwind CSS + shadcn/ui
+
+## Infrastructure & Hosting
+- **Deployment:** [e.g., Coolify, Vercel, Docker]
+- **File Storage:** [e.g., AWS S3, local, Vercel Blob]
+- **Background Jobs:** [e.g., In-memory, Redis/BullMQ, Inngest]
+
+## Integrations & APIs
+- **[Integration 1]:** [What it does, e.g., "Stripe for payments and subscriptions"]
+- **[Integration 2]:** [e.g., "OpenAI/Gemini for LLM processing"]
+
+## Technical Constraints & Standards
+- [e.g., "No client-side data fetching; use React Server Components where possible"]
+- [e.g., "All DB queries must go through a dedicated data-access layer (DAL)"]`;
+
+  const techResponse = await callVibnChat({
+    systemPrompt: techPrompt,
+    messages: [
+      { role: "user", content: "Generate comprehensive Technical Context." },
+    ],
+    temperature: 0.2,
+  });
+  const techMd = techResponse.text || "Failed to generate Technical Context.";
+
+  // 6. Generate Data Model
+  const dataModelPrompt = `You are a Staff Database Architect. Write an EXHAUSTIVE data model based on the Technical Context and User Stories.
+This model must be detailed enough that an AI coder can directly translate it into a Prisma schema.md or SQL migration. Include relationships, indexes, and enums.
+
+TECHNICAL CONTEXT:
+${techMd}
+USER STORIES:
+${storiesMd}
+
+You MUST follow this exact structure:
+
+# Data Model
+
+## Enums
+- **[EnumName]**: [VALUE_1, VALUE_2]
+
+## Tables / Models
+
+### \`[TableName]\`
+**Purpose:** [What this stores]
+**Fields:**
+- \`id\` (String/UUID, PK) - Primary Key
+- \`createdAt\` (DateTime) - Auto-generated timestamp
+- \`[fieldName]\` ([Type]) - [Description, Default values, Nullability]
+**Relationships:**
+- \`[relationName]\` -> \`[OtherTable]\` (One-to-Many, Many-to-Many)
+**Indexes:**
+- [List any columns that require indexing for performance]
+
+*(Repeat for all necessary tables)*`;
+
+  const dataModelResponse = await callVibnChat({
+    systemPrompt: dataModelPrompt,
+    messages: [
+      { role: "user", content: "Generate a deep, exhaustive Data Model." },
+    ],
+    temperature: 0.2,
+  });
+  const dataModelMd =
+    dataModelResponse.text || "Failed to generate Data Model.";
+
+  // 7. Generate File Structure
+  const fileStructurePrompt = `You are a Staff Software Engineer. Map out the EXACT file structure for this Next.js App Router application.
+This tree will be the literal blueprint the AI agents use to scaffold the application. It must be exhaustive. Include critical \`layout.tsx\`, \`page.tsx\`, \`route.ts\`, and component files.
+
+TECHNICAL CONTEXT:
+${techMd}
+DATA MODEL:
+${dataModelMd}
+
+You MUST output a detailed ASCII file tree with comments explaining the purpose of each critical directory and file.
+
+# File Structure
 
-## File Structure
-Provide a high-level file tree representing the required Next.js pages and API routes.
 \`\`\`text
-src/app/
-  page.tsx
-  api/
-\`\`\``;
+/
+├── package.json
+├── prisma/
+│   └── schema.prisma        # Database schema
+├── src/
+│   ├── app/
+│   │   ├── (auth)/          # Authentication route group
+│   │   │   ├── login/page.tsx
+│   │   │   └── register/page.tsx
+│   │   ├── api/             # Backend API endpoints
+│   │   │   └── webhooks/stripe/route.ts
+│   │   ├── layout.tsx       # Root layout (Providers, Fonts)
+│   │   └── page.tsx         # Marketing homepage
+│   ├── components/
+│   │   ├── ui/              # shadcn/ui generic components
+│   │   └── shared/          # App-specific shared components (e.g., Navbar)
+│   └── lib/
+│       ├── db.ts            # Prisma client singleton
+│       └── utils.ts         # Tailwind merge utilities
+\`\`\`
+*(Expand this tree to cover all routes and components required by the User Stories)*`;
 
-  const planResponse = await callVibnChat({
-    systemPrompt: planPrompt,
-    messages: [{ role: "user", content: "Generate the Technical Architecture." }],
-    temperature: 0.1
+  const fileStructureResponse = await callVibnChat({
+    systemPrompt: fileStructurePrompt,
+    messages: [
+      { role: "user", content: "Generate a comprehensive File Structure." },
+    ],
+    temperature: 0.2,
   });
-  const planMd = planResponse.text || "Failed to generate Architecture.";
+  const fileStructureMd =
+    fileStructureResponse.text || "Failed to generate File Structure.";
 
-  // 3. Generate the Execution Plan (Tasks)
+  // 8. Generate the Execution Plan (Tasks)
   const tasksPrompt = `You are a Technical Project Manager.
-Based on the PRD and Technical Architecture, break the implementation down into an atomic, dependency-ordered Task List.
-You MUST format each task EXACTLY as a markdown bullet with a checkbox, a phase tag, and a description containing the file paths.
+Based on the User Stories and File Structure, break the implementation down into an atomic, dependency-ordered Task List.
+These tasks will be handed to an autonomous AI agent to execute. They MUST be atomic (one clear PR/commit per task), chronological, and highly specific.
 
-PRD:
-${specMd}
+USER STORIES:
+${storiesMd}
+FILE STRUCTURE:
+${fileStructureMd}
 
-ARCHITECTURE:
-${planMd}
+You MUST format each task EXACTLY as a markdown bullet with a checkbox, a phase tag, and a description containing the exact file paths.
 
-You MUST follow this exact structure:
+# Execution Plan
 
-## Phase 1: Setup & Foundation
-- [ ] [Phase 1] Initialize Next.js project and layout
-- [ ] [Phase 1] Setup Postgres database schema
+## Phase 1: Infrastructure & DB Foundation
+- [ ] [Phase 1] Initialize Next.js project, Tailwind, and layout.tsx
+- [ ] [Phase 1] Setup Prisma schema based on the data model and run initial migration
 
-## Phase 2: [User Story 1 Title]
-- [ ] [US1] Build API route for [feature]
-- [ ] [US1] Build frontend UI component in src/app/[route]/page.tsx
+## Phase 2: Core User Journeys
+- [ ] [Phase 2] Build the API route for [Feature] in \`src/app/api/.../route.ts\`
+- [ ] [Phase 2] Build the frontend UI component in \`src/app/.../page.tsx\` integrating with the API
 
-## Phase 3: [User Story 2 Title]
-- [ ] [US2] ...`;
+## Phase 3: Polish & Deployment
+- [ ] [Phase 3] ...`;
 
   const tasksResponse = await callVibnChat({
     systemPrompt: tasksPrompt,
-    messages: [{ role: "user", content: "Generate the Execution Plan tasks." }],
-    temperature: 0.1
+    messages: [
+      { role: "user", content: "Generate an atomic Execution Plan task list." },
+    ],
+    temperature: 0.2,
   });
   const tasksMd = tasksResponse.text || "";
 
-  // 4. Parse the tasks string into the JSON array expected by the DB
+  // 9. Generate the QA Checklist
+  const checklistPrompt = `You are a strict QA Automation Engineer.
+Write an exhaustive Pre-Flight Checklist. The AI agent MUST verify every single item on this list before declaring the feature "Done" and shipping to production.
+
+ACCEPTANCE CRITERIA:
+${acceptanceMd}
+FILE STRUCTURE:
+${fileStructureMd}
+
+You MUST follow this exact structure:
+
+# Pre-Flight QA Checklist
+
+## Build & Environment
+- [ ] \`npm run build\` completes with 0 TypeScript compilation errors.
+- [ ] All required environment variables are documented in \`.env.example\`.
+- [ ] Prisma migrations are synced with the database.
+
+## Security & Auth
+- [ ] Protected routes correctly redirect unauthenticated users to \`/login\`.
+- [ ] Users cannot access or mutate data belonging to other users (Tenant isolation).
+
+## Core Scenarios Verification
+- [ ] Happy Path: [Specific user action] works end-to-end without console errors.
+- [ ] Edge Case: [Specific edge case] is handled gracefully with a user-facing error message.
+- [ ] ...`;
+
+  const checklistResponse = await callVibnChat({
+    systemPrompt: checklistPrompt,
+    messages: [
+      { role: "user", content: "Generate an exhaustive QA Checklist." },
+    ],
+    temperature: 0.2,
+  });
+  const checklistMd =
+    checklistResponse.text || "Failed to generate QA Checklist.";
+
+  // 6. Parse the tasks string into the JSON array expected by the DB
   // Extract all `- [ ] [Group] Task description` lines
   const taskLines = tasksMd.match(/- \[[ x]\] \[(.*?)\] (.*)/g) || [];
-  const parsedTasks = taskLines.map(line => {
-    const match = line.match(/- \[[ x]\] \[(.*?)\] (.*)/);
-    if (!match) return null;
-    return {
-      id: Math.random().toString(36).slice(2, 11),
-      title: `[${match[1]}] ${match[2]}`, // Fixed backticks
-      description: "",
-      status: "open",
-      createdAt: new Date().toISOString()
-    };
-  }).filter(Boolean);
+  const parsedTasks = taskLines
+    .map((line) => {
+      const match = line.match(/- \[[ x]\] \[(.*?)\] (.*)/);
+      if (!match) return null;
+      return {
+        id: Math.random().toString(36).slice(2, 11),
+        title: `[${match[1]}] ${match[2]}`, // Fixed backticks
+        description: "",
+        status: "open",
+        createdAt: new Date().toISOString(),
+      };
+    })
+    .filter(Boolean);
 
-  // 5. Update the Database Plan
+  // Update the Database Plan
   const currentPlan = projectRow.data?.plan || {};
-  
-  // Save the PRD under decisions (we can render it specially in the UI)
-  const newDecisions = [
-    { id: "prd_spec", title: "Product Specification", choice: "Auto-generated PRD", why: specMd },
-    { id: "prd_arch", title: "Technical Architecture", choice: "Auto-generated Plan", why: planMd }
+
+  // Create a map of the new generated decisions
+  const generatedDecisions = [
+    {
+      id: "prd_stories",
+      title: "User Stories",
+      choice: "Auto-generated",
+      why: storiesMd,
+      createdAt: new Date().toISOString(),
+    },
+    {
+      id: "prd_acceptance",
+      title: "Acceptance Criteria",
+      choice: "Auto-generated",
+      why: acceptanceMd,
+      createdAt: new Date().toISOString(),
+    },
+    {
+      id: "prd_success",
+      title: "Success Metrics",
+      choice: "Auto-generated",
+      why: successMd,
+      createdAt: new Date().toISOString(),
+    },
+    {
+      id: "prd_ui_design",
+      title: "UI & Design Requirements",
+      choice: "Auto-generated",
+      why: uiDesignMd,
+      createdAt: new Date().toISOString(),
+    },
+    {
+      id: "prd_tech_context",
+      title: "Technical Context",
+      choice: "Auto-generated",
+      why: techMd,
+      createdAt: new Date().toISOString(),
+    },
+    {
+      id: "prd_data_model",
+      title: "Data Model",
+      choice: "Auto-generated",
+      why: dataModelMd,
+      createdAt: new Date().toISOString(),
+    },
+    {
+      id: "prd_file_structure",
+      title: "File Structure",
+      choice: "Auto-generated",
+      why: fileStructureMd,
+      createdAt: new Date().toISOString(),
+    },
+    {
+      id: "prd_tasks",
+      title: "Task Breakdown",
+      choice: "Auto-generated",
+      why: tasksMd,
+      createdAt: new Date().toISOString(),
+    },
+    {
+      id: "prd_checklist",
+      title: "QA Checklist",
+      choice: "Auto-generated",
+      why: checklistMd,
+      createdAt: new Date().toISOString(),
+    },
   ];
 
+  // Merge the new decisions into the existing decisions array (updating if they exist, appending if they don't)
+  const existingDecisions = currentPlan.decisions || [];
+  const mergedDecisions = [...existingDecisions];
+
+  for (const gen of generatedDecisions) {
+    const idx = mergedDecisions.findIndex((d: any) => d.id === gen.id);
+    if (idx >= 0) {
+      mergedDecisions[idx] = gen;
+    } else {
+      mergedDecisions.push(gen);
+    }
+  }
+
   const updatedPlan = {
     ...currentPlan,
     vision: objective,
     tasks: parsedTasks.length > 0 ? parsedTasks : currentPlan.tasks,
-    decisions: newDecisions
+    blueprint: {
+      stories: storiesMd,
+      acceptance: acceptanceMd,
+      success: successMd,
+      ui_design: uiDesignMd,
+      tech_context: techMd,
+      data_model: dataModelMd,
+      file_structure: fileStructureMd,
+      tasks: tasksMd,
+      checklist: checklistMd,
+    },
+    decisions: mergedDecisions, // Legacy fallback
   };
 
   await query(
     `UPDATE fs_projects SET data = jsonb_set(data, '{plan}', $2::jsonb) WHERE id = $1`,
-    [projectId, JSON.stringify(updatedPlan)]
+    [projectId, JSON.stringify(updatedPlan)],
   );
 
   return NextResponse.json({ plan: updatedPlan });
diff --git a/app/api/projects/[projectId]/plan/route.ts b/app/api/projects/[projectId]/plan/route.ts
index 3bd0a3ad..b47792f7 100644
--- a/app/api/projects/[projectId]/plan/route.ts
+++ b/app/api/projects/[projectId]/plan/route.ts
@@ -26,7 +26,11 @@ import { NextResponse } from "next/server";
 import { authSession } from "@/lib/auth/session-server";
 import { query } from "@/lib/db-postgres";
 
-interface Idea     { id: string; text: string; createdAt: string }
+interface Idea {
+  id: string;
+  text: string;
+  createdAt: string;
+}
 type TaskStatus = "open" | "in_progress" | "review" | "done" | "blocked";
 interface Task {
   id: string;
@@ -39,7 +43,12 @@ interface Task {
   status: TaskStatus;
   // Reserved for Phase 2 (background agent delegation). Set when an
   // autonomous agent has been kicked off against this task.
-  agent?: { runId: string; startedAt: string; finishedAt?: string; status: "queued" | "running" | "succeeded" | "failed" } | null;
+  agent?: {
+    runId: string;
+    startedAt: string;
+    finishedAt?: string;
+    status: "queued" | "running" | "succeeded" | "failed";
+  } | null;
   createdAt: string;
   startedAt?: string;
   doneAt?: string;
@@ -47,16 +56,36 @@ interface Task {
   // present on rows created before the markdown migration.
   text?: string;
 }
-interface Decision { id: string; title: string; choice: string; why?: string; createdAt: string }
+interface Decision {
+  id: string;
+  title: string;
+  choice: string;
+  why?: string;
+  createdAt: string;
+}
+
+export interface BlueprintDocs {
+  stories?: string;
+  acceptance?: string;
+  success?: string;
+  ui_design?: string;
+  tech_context?: string;
+  data_model?: string;
+  file_structure?: string;
+  tasks?: string;
+  checklist?: string;
+}
+
 interface PlanShape {
   vision?: string;
+  blueprint?: BlueprintDocs;
   ideas: Idea[];
   tasks: Task[];
   decisions: Decision[];
 }
 
 function emptyPlan(): PlanShape {
-  return { ideas: [], tasks: [], decisions: [] };
+  return { ideas: [], tasks: [], decisions: [], blueprint: {} };
 }
 
 function newId(): string {
@@ -79,12 +108,18 @@ function readPlan(data: any): PlanShape {
   // on read, so old rows still render correctly without a one-shot
   // migration script. We DON'T persist back here; the next write will
   // serialize the new shape.
-  const tasksIn = Array.isArray(raw.tasks) ? (raw.tasks as Array<Partial<Task>>) : [];
+  const tasksIn = Array.isArray(raw.tasks)
+    ? (raw.tasks as Array<Partial<Task>>)
+    : [];
   const tasks: Task[] = tasksIn.map((t) => ({
     id: String(t.id ?? newId()),
     title: String(t.title ?? t.text ?? "").trim(),
     description: typeof t.description === "string" ? t.description : "",
-    status: (t.status === "in_progress" || t.status === "done" || t.status === "blocked" ? t.status : "open") as TaskStatus,
+    status: (t.status === "in_progress" ||
+    t.status === "done" ||
+    t.status === "blocked"
+      ? t.status
+      : "open") as TaskStatus,
     agent: t.agent ?? null,
     createdAt: String(t.createdAt ?? new Date().toISOString()),
     startedAt: t.startedAt,
@@ -95,13 +130,18 @@ function readPlan(data: any): PlanShape {
     vision: data?.productVision ?? raw.vision,
     brief: raw.brief,
     brief_filename: raw.brief_filename,
+    blueprint: raw.blueprint ?? {},
     ideas: Array.isArray(raw.ideas) ? raw.ideas : [],
     tasks,
     decisions: Array.isArray(raw.decisions) ? raw.decisions : [],
   };
 }
 
-async function writePlan(projectId: string, plan: PlanShape, alsoVision?: string) {
+async function writePlan(
+  projectId: string,
+  plan: PlanShape,
+  alsoVision?: string,
+) {
   // Use a single jsonb_set call so we don't race with other writers.
   // When the vision changes we also mirror it to productVision since
   // it's the canonical field elsewhere in the app.
@@ -123,6 +163,14 @@ async function writePlan(projectId: string, plan: PlanShape, alsoVision?: string
       [projectId, JSON.stringify({ ...plan, vision: undefined })],
     );
   }
+  // Immediately notify the SSE connections that this project has changed!
+  try {
+    // Note: Postgres NOTIFY does not support parameterized queries ($1) for the payload.
+    // It requires the payload string to be directly injected or sent as a literal.
+    await query(`NOTIFY project_updates, '${projectId}'`);
+  } catch (e) {
+    console.error("Failed to notify project updates:", e);
+  }
 }
 
 export async function GET(
@@ -131,10 +179,12 @@ export async function GET(
 ) {
   const { projectId } = await ctx.params;
   const session = await authSession();
-  if (!session?.user?.email) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  if (!session?.user?.email)
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
   const project = await loadOwnedProject(projectId, session.user.email);
-  if (!project) return NextResponse.json({ error: "Not found" }, { status: 404 });
+  if (!project)
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
 
   return NextResponse.json({ plan: readPlan(project.data) });
 }
@@ -145,10 +195,12 @@ export async function POST(
 ) {
   const { projectId } = await ctx.params;
   const session = await authSession();
-  if (!session?.user?.email) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  if (!session?.user?.email)
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
   const project = await loadOwnedProject(projectId, session.user.email);
-  if (!project) return NextResponse.json({ error: "Not found" }, { status: 404 });
+  if (!project)
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
 
   const body = await req.json().catch(() => ({}));
   const kind = String(body.kind ?? "");
@@ -163,7 +215,8 @@ export async function POST(
   }
   if (kind === "idea") {
     const text = String(body.text ?? "").trim();
-    if (!text) return NextResponse.json({ error: "text required" }, { status: 400 });
+    if (!text)
+      return NextResponse.json({ error: "text required" }, { status: 400 });
     plan.ideas.unshift({ id: newId(), text, createdAt: now });
     await writePlan(projectId, plan);
     return NextResponse.json({ plan });
@@ -173,8 +226,10 @@ export async function POST(
     // still send `text` are mapped to `title` so older AI tool versions
     // and any open clients keep working.
     const title = String(body.title ?? body.text ?? "").trim();
-    const description = typeof body.description === "string" ? body.description : "";
-    if (!title) return NextResponse.json({ error: "title required" }, { status: 400 });
+    const description =
+      typeof body.description === "string" ? body.description : "";
+    if (!title)
+      return NextResponse.json({ error: "title required" }, { status: 400 });
     plan.tasks.unshift({
       id: newId(),
       title,
@@ -189,7 +244,11 @@ export async function POST(
     const title = String(body.title ?? "").trim();
     const choice = String(body.choice ?? "").trim();
     const why = body.why ? String(body.why).trim() : undefined;
-    if (!title || !choice) return NextResponse.json({ error: "title and choice required" }, { status: 400 });
+    if (!title || !choice)
+      return NextResponse.json(
+        { error: "title and choice required" },
+        { status: 400 },
+      );
     plan.decisions.unshift({ id: newId(), title, choice, why, createdAt: now });
     await writePlan(projectId, plan);
     return NextResponse.json({ plan });
@@ -203,10 +262,12 @@ export async function PATCH(
 ) {
   const { projectId } = await ctx.params;
   const session = await authSession();
-  if (!session?.user?.email) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  if (!session?.user?.email)
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
   const project = await loadOwnedProject(projectId, session.user.email);
-  if (!project) return NextResponse.json({ error: "Not found" }, { status: 404 });
+  if (!project)
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
 
   const body = await req.json().catch(() => ({}));
   const { kind, id } = body;
@@ -214,33 +275,48 @@ export async function PATCH(
 
   if (kind === "task" && id) {
     const t = plan.tasks.find((x) => x.id === id);
-    if (!t) return NextResponse.json({ error: "task not found" }, { status: 404 });
+    if (!t)
+      return NextResponse.json({ error: "task not found" }, { status: 404 });
     if (typeof body.title === "string") t.title = body.title.trim();
     if (typeof body.description === "string") t.description = body.description;
     // Backward compat: PATCH body { text } updates the title.
-    if (typeof body.text === "string" && typeof body.title !== "string") t.title = body.text.trim();
-    const validStatuses: TaskStatus[] = ["open", "in_progress", "done", "blocked"];
+    if (typeof body.text === "string" && typeof body.title !== "string")
+      t.title = body.text.trim();
+    const validStatuses: TaskStatus[] = [
+      "open",
+      "in_progress",
+      "done",
+      "blocked",
+    ];
     if (validStatuses.includes(body.status)) {
       const next = body.status as TaskStatus;
       const now = new Date().toISOString();
       t.status = next;
       if (next === "in_progress" && !t.startedAt) t.startedAt = now;
       if (next === "done") t.doneAt = now;
-      if (next === "open") { t.doneAt = undefined; t.startedAt = undefined; }
+      if (next === "open") {
+        t.doneAt = undefined;
+        t.startedAt = undefined;
+      }
     }
     await writePlan(projectId, plan);
     return NextResponse.json({ plan });
   }
   if (kind === "idea" && id) {
     const i = plan.ideas.find((x) => x.id === id);
-    if (!i) return NextResponse.json({ error: "idea not found" }, { status: 404 });
+    if (!i)
+      return NextResponse.json({ error: "idea not found" }, { status: 404 });
     if (typeof body.text === "string") i.text = body.text.trim();
     await writePlan(projectId, plan);
     return NextResponse.json({ plan });
   }
   if (kind === "decision" && id) {
     const d = plan.decisions.find((x) => x.id === id);
-    if (!d) return NextResponse.json({ error: "decision not found" }, { status: 404 });
+    if (!d)
+      return NextResponse.json(
+        { error: "decision not found" },
+        { status: 404 },
+      );
     if (typeof body.title === "string") d.title = body.title.trim();
     if (typeof body.choice === "string") d.choice = body.choice.trim();
     if (typeof body.why === "string") d.why = body.why.trim();
@@ -256,19 +332,22 @@ export async function DELETE(
 ) {
   const { projectId } = await ctx.params;
   const session = await authSession();
-  if (!session?.user?.email) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  if (!session?.user?.email)
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
   const project = await loadOwnedProject(projectId, session.user.email);
-  if (!project) return NextResponse.json({ error: "Not found" }, { status: 404 });
+  if (!project)
+    return NextResponse.json({ error: "Not found" }, { status: 404 });
 
   const { searchParams } = new URL(req.url);
   const kind = searchParams.get("kind") || "";
   const id = searchParams.get("id") || "";
   const plan = readPlan(project.data);
 
-  if (kind === "task")     plan.tasks     = plan.tasks.filter((x) => x.id !== id);
-  if (kind === "idea")     plan.ideas     = plan.ideas.filter((x) => x.id !== id);
-  if (kind === "decision") plan.decisions = plan.decisions.filter((x) => x.id !== id);
+  if (kind === "task") plan.tasks = plan.tasks.filter((x) => x.id !== id);
+  if (kind === "idea") plan.ideas = plan.ideas.filter((x) => x.id !== id);
+  if (kind === "decision")
+    plan.decisions = plan.decisions.filter((x) => x.id !== id);
 
   await writePlan(projectId, plan);
   return NextResponse.json({ plan });
diff --git a/app/api/projects/[projectId]/stream/route.ts b/app/api/projects/[projectId]/stream/route.ts
new file mode 100644
index 00000000..0c321755
--- /dev/null
+++ b/app/api/projects/[projectId]/stream/route.ts
@@ -0,0 +1,77 @@
+import { getPool } from "@/lib/db-postgres";
+import { authSession } from "@/lib/auth/session-server";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(
+  req: Request,
+  ctx: { params: Promise<{ projectId: string }> },
+) {
+  const { projectId } = await ctx.params;
+  const session = await authSession();
+
+  if (!session?.user?.email) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  const encoder = new TextEncoder();
+
+  const stream = new ReadableStream({
+    async start(controller) {
+      const pool = getPool();
+      let client: import("pg").PoolClient;
+
+      try {
+        client = await pool.connect();
+      } catch (err) {
+        console.error("[SSE] Failed to connect to pg pool:", err);
+        controller.close();
+        return;
+      }
+
+      const notifyHandler = (msg: import("pg").Notification) => {
+        if (msg.payload === projectId) {
+          try {
+            controller.enqueue(encoder.encode(`data: {"event":"updated"}\n\n`));
+          } catch {
+            // controller might be closed
+          }
+        }
+      };
+
+      client.on("notification", notifyHandler);
+      await client.query("LISTEN project_updates");
+
+      // Keep alive ping every 15s to prevent browser/proxy from dropping the connection
+      const keepAlive = setInterval(() => {
+        try {
+          controller.enqueue(encoder.encode(`: ping\n\n`));
+        } catch {
+          cleanup();
+        }
+      }, 15000);
+
+      const cleanup = () => {
+        clearInterval(keepAlive);
+        if (client) {
+          client.removeListener("notification", notifyHandler);
+          client.release();
+        }
+      };
+
+      // When the client disconnects, clean up the DB connection
+      req.signal.addEventListener("abort", cleanup);
+    },
+    cancel() {
+      // Handled by abort listener
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache, no-transform",
+      Connection: "keep-alive",
+    },
+  });
+}
diff --git a/app/globals.css b/app/globals.css
index 061d4582..b3ac4558 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,179 +3,242 @@
 
 @custom-variant dark (&:is(.dark *));
 
-@keyframes vibn-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
-@keyframes vibn-blink { 0%,100%{opacity:.2} 50%{opacity:.8} }
-@keyframes vibn-breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
-.vibn-enter { animation: vibn-enter 0.35s ease both; }
+@keyframes vibn-enter {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+@keyframes vibn-blink {
+    0%,
+    100% {
+        opacity: 0.2;
+    }
+    50% {
+        opacity: 0.8;
+    }
+}
+@keyframes vibn-breathe {
+    0%,
+    100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.15);
+    }
+}
+@keyframes animate-pulse {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+@keyframes animate-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.vibn-enter {
+    animation: vibn-enter 0.35s ease both;
+}
+.animate-pulse {
+    animation: animate-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+.animate-spin {
+    animation: animate-spin 1s linear infinite;
+}
 
 /* Marketing — Justine ink & parchment (no blue/purple chrome) */
 .vibn-gradient-text {
-  background-image: linear-gradient(90deg, var(--vibn-mid) 0%, var(--vibn-ink) 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
+    background-image: linear-gradient(
+        90deg,
+        var(--vibn-mid) 0%,
+        var(--vibn-ink) 100%
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
 }
 .vibn-cta-surface {
-  background-image: linear-gradient(to bottom right, var(--vibn-cream), var(--vibn-parch));
+    background-image: linear-gradient(
+        to bottom right,
+        var(--vibn-cream),
+        var(--vibn-parch)
+    );
 }
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-inter);
-  --font-serif: var(--font-lora);
-  --font-mono: var(--font-ibm-plex-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --font-sans: var(--font-inter);
+    --font-serif: var(--font-lora);
+    --font-mono: var(--font-ibm-plex-mono);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
 }
 
 :root {
-  --radius: 0.5rem;
-  /* Justine UX pack — ink & parchment (aligned with master-ai/justine/00_design-tokens.css) */
-  --vibn-ink: #1a1510;
-  --vibn-ink2: #2c2c2a;
-  --vibn-ink3: #444441;
-  --vibn-mid: #5f5e5a;
-  --vibn-muted: #888780;
-  --vibn-stone: #b4b2a9;
-  --vibn-parch: #d3d1c7;
-  --vibn-cream: #f1efe8;
-  --vibn-paper: #f7f4ee;
-  --vibn-white: #fdfcfa;
-  --vibn-border: #e8e2d9;
+    --radius: 0.5rem;
+    /* Justine UX pack — ink & parchment (aligned with master-ai/justine/00_design-tokens.css) */
+    --vibn-ink: #1a1510;
+    --vibn-ink2: #2c2c2a;
+    --vibn-ink3: #444441;
+    --vibn-mid: #5f5e5a;
+    --vibn-muted: #888780;
+    --vibn-stone: #b4b2a9;
+    --vibn-parch: #d3d1c7;
+    --vibn-cream: #f1efe8;
+    --vibn-paper: #f7f4ee;
+    --vibn-white: #fdfcfa;
+    --vibn-border: #e8e2d9;
 
-  --background: var(--vibn-paper);
-  --foreground: var(--vibn-ink);
-  --card: var(--vibn-white);
-  --card-foreground: var(--vibn-ink);
-  --popover: var(--vibn-white);
-  --popover-foreground: var(--vibn-ink);
-  --primary: var(--vibn-ink);
-  --primary-foreground: var(--vibn-paper);
-  --secondary: var(--vibn-cream);
-  --secondary-foreground: var(--vibn-ink);
-  --muted: var(--vibn-cream);
-  --muted-foreground: var(--vibn-muted);
-  --accent: var(--vibn-cream);
-  --accent-foreground: var(--vibn-ink);
-  --destructive: #b42318;
-  --border: var(--vibn-border);
-  --input: var(--vibn-border);
-  --ring: var(--vibn-stone);
-  --chart-1: oklch(0.70 0.15 60);
-  --chart-2: oklch(0.70 0.12 210);
-  --chart-3: oklch(0.55 0.10 220);
-  --chart-4: oklch(0.40 0.08 230);
-  --chart-5: oklch(0.75 0.15 70);
-  --sidebar: var(--vibn-white);
-  --sidebar-foreground: var(--vibn-ink);
-  --sidebar-primary: var(--vibn-ink);
-  --sidebar-primary-foreground: var(--vibn-paper);
-  --sidebar-accent: var(--vibn-paper);
-  --sidebar-accent-foreground: var(--vibn-ink);
-  --sidebar-border: var(--vibn-border);
-  --sidebar-ring: var(--vibn-stone);
+    --background: var(--vibn-paper);
+    --foreground: var(--vibn-ink);
+    --card: var(--vibn-white);
+    --card-foreground: var(--vibn-ink);
+    --popover: var(--vibn-white);
+    --popover-foreground: var(--vibn-ink);
+    --primary: var(--vibn-ink);
+    --primary-foreground: var(--vibn-paper);
+    --secondary: var(--vibn-cream);
+    --secondary-foreground: var(--vibn-ink);
+    --muted: var(--vibn-cream);
+    --muted-foreground: var(--vibn-muted);
+    --accent: var(--vibn-cream);
+    --accent-foreground: var(--vibn-ink);
+    --destructive: #b42318;
+    --border: var(--vibn-border);
+    --input: var(--vibn-border);
+    --ring: var(--vibn-stone);
+    --chart-1: oklch(0.7 0.15 60);
+    --chart-2: oklch(0.7 0.12 210);
+    --chart-3: oklch(0.55 0.1 220);
+    --chart-4: oklch(0.4 0.08 230);
+    --chart-5: oklch(0.75 0.15 70);
+    --sidebar: var(--vibn-white);
+    --sidebar-foreground: var(--vibn-ink);
+    --sidebar-primary: var(--vibn-ink);
+    --sidebar-primary-foreground: var(--vibn-paper);
+    --sidebar-accent: var(--vibn-paper);
+    --sidebar-accent-foreground: var(--vibn-ink);
+    --sidebar-border: var(--vibn-border);
+    --sidebar-ring: var(--vibn-stone);
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.85 0.02 85);
-  --sidebar-primary-foreground: oklch(0.18 0.02 60);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.85 0.02 85);
+    --sidebar-primary-foreground: oklch(0.18 0.02 60);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
 }
 
 @layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
-  }
-  h1, h2, h3 {
-    font-family: var(--font-lora), ui-serif, Georgia, serif;
-  }
-  button {
-    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
-    cursor: pointer;
-  }
-  input, textarea, select {
-    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
-  }
-  input::placeholder {
-    color: var(--muted-foreground);
-  }
-  ::selection {
-    background: var(--foreground);
-    color: var(--background);
-  }
-  ::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-  }
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  ::-webkit-scrollbar-thumb {
-    background: var(--vibn-stone);
-    border-radius: 10px;
-  }
+    * {
+        @apply border-border outline-ring/50;
+    }
+    body {
+        @apply bg-background text-foreground;
+        font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+    }
+    h1,
+    h2,
+    h3 {
+        font-family: var(--font-lora), ui-serif, Georgia, serif;
+    }
+    button {
+        font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+        cursor: pointer;
+    }
+    input,
+    textarea,
+    select {
+        font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+    }
+    input::placeholder {
+        color: var(--muted-foreground);
+    }
+    ::selection {
+        background: var(--foreground);
+        color: var(--background);
+    }
+    ::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+    }
+    ::-webkit-scrollbar-track {
+        background: transparent;
+    }
+    ::-webkit-scrollbar-thumb {
+        background: var(--vibn-stone);
+        border-radius: 10px;
+    }
 }
diff --git a/components/AtlasChat.tsx b/components/AtlasChat.tsx
deleted file mode 100644
index 3366b19c..00000000
--- a/components/AtlasChat.tsx
+++ /dev/null
@@ -1,880 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState, useCallback } from "react";
-import { useParams } from "next/navigation";
-import Link from "next/link";
-import { ChevronDown, Plus, Trash2, X } from "lucide-react";
-import { JM, JV } from "@/components/project-creation/modal-theme";
-import {
-  type ChatContextRef,
-  contextRefKey,
-} from "@/lib/chat-context-refs";
-
-interface ChatMessage {
-  role: "user" | "assistant";
-  content: string;
-}
-
-interface AtlasChatProps {
-  projectId: string;
-  projectName?: string;
-  /** Sidebar picks — shown as chips; sent with each user message until removed */
-  chatContextRefs?: ChatContextRef[];
-  onRemoveChatContextRef?: (key: string) => void;
-  /** Separate thread from overview discovery chat (stored in DB per scope). */
-  conversationScope?: "overview" | "build";
-  /** Shown in the composer when no context refs (e.g. Discovery vs Workspace). */
-  contextEmptyLabel?: string;
-  /** Empty-state subtitle under the Vibn title */
-  emptyStateHint?: string;
-}
-
-// ---------------------------------------------------------------------------
-// Markers — Atlas appends these at end of messages to signal UI actions
-// ---------------------------------------------------------------------------
-
-const PHASE_MARKER_RE = /\[\[PHASE_COMPLETE:(.*?)\]\]/s;
-const NEXT_STEP_RE = /\[\[NEXT_STEP:(.*?)\]\]/s;
-
-interface PhasePayload {
-  phase: string;
-  title: string;
-  summary: string;
-  data: Record<string, unknown>;
-}
-
-interface NextStepPayload {
-  action: string;
-  label: string;
-}
-
-function extractMarkers(text: string): {
-  clean: string;
-  phase: PhasePayload | null;
-  nextStep: NextStepPayload | null;
-} {
-  let clean = text;
-  let phase: PhasePayload | null = null;
-  let nextStep: NextStepPayload | null = null;
-
-  const phaseMatch = clean.match(PHASE_MARKER_RE);
-  if (phaseMatch) {
-    try { phase = JSON.parse(phaseMatch[1]); } catch { /* ignore */ }
-    clean = clean.replace(PHASE_MARKER_RE, "").trimEnd();
-  }
-
-  const nextMatch = clean.match(NEXT_STEP_RE);
-  if (nextMatch) {
-    try { nextStep = JSON.parse(nextMatch[1]); } catch { /* ignore */ }
-    clean = clean.replace(NEXT_STEP_RE, "").trimEnd();
-  }
-
-  return { clean, phase, nextStep };
-}
-
-// ---------------------------------------------------------------------------
-// Markdown-lite renderer — handles **bold**, newlines, numbered/bullet lists
-// ---------------------------------------------------------------------------
-function renderContent(text: string | null | undefined) {
-  if (!text) return null;
-  return text.split("\n").map((line, i) => {
-    const parts = line.split(/(\*\*.*?\*\*)/g).map((seg, j) =>
-      seg.startsWith("**") && seg.endsWith("**")
-        ? <strong key={j} style={{ fontWeight: 600, color: JM.ink }}>{seg.slice(2, -2)}</strong>
-        : <span key={j}>{seg}</span>
-    );
-    return <div key={i} style={{ minHeight: line.length ? undefined : "0.75em" }}>{parts}</div>;
-  });
-}
-
-// ---------------------------------------------------------------------------
-// Message row
-// ---------------------------------------------------------------------------
-function MessageRow({
-  msg, projectId, workspace,
-}: {
-  msg: ChatMessage;
-  projectId: string;
-  workspace: string;
-}) {
-  const isAtlas = msg.role === "assistant";
-  const { clean, phase, nextStep } = isAtlas
-    ? extractMarkers(msg.content ?? "")
-    : { clean: msg.content ?? "", phase: null, nextStep: null };
-
-  // Phase save state
-  const [saved, setSaved] = useState(false);
-  const [saving, setSaving] = useState(false);
-
-  // Architecture generation state
-  const [archState, setArchState] = useState<"idle" | "loading" | "done" | "error">("idle");
-  const [archError, setArchError] = useState<string | null>(null);
-
-  const handleSavePhase = async () => {
-    if (!phase || saved || saving) return;
-    setSaving(true);
-    try {
-      await fetch(`/api/projects/${projectId}/save-phase`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(phase),
-      });
-      setSaved(true);
-    } catch { /* swallow — user can retry */ } finally {
-      setSaving(false);
-    }
-  };
-
-  const handleGenerateArchitecture = async () => {
-    if (archState !== "idle") return;
-    setArchState("loading");
-    setArchError(null);
-    try {
-      const res = await fetch(`/api/projects/${projectId}/architecture`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({}),
-      });
-      const d = await res.json();
-      if (!res.ok) throw new Error(d.error || "Generation failed");
-      setArchState("done");
-    } catch (e) {
-      setArchError(e instanceof Error ? e.message : "Something went wrong");
-      setArchState("error");
-    }
-  };
-
-  if (!isAtlas) {
-    return (
-      <div style={{
-        marginBottom: 20,
-        marginTop: -4,
-        animation: "enter 0.3s ease both",
-        display: "flex",
-        justifyContent: "flex-end",
-      }}>
-        <div style={{
-          maxWidth: "min(85%, 480px)",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "flex-end",
-          gap: 4,
-        }}>
-          <div style={{
-            background: JV.userBubbleBg,
-            border: `1px solid ${JV.userBubbleBorder}`,
-            borderRadius: 18,
-            padding: "12px 16px",
-            fontSize: 14,
-            color: JM.ink,
-            lineHeight: 1.65,
-            fontFamily: JM.fontSans,
-            whiteSpace: "pre-wrap",
-          }}>
-            {renderContent(clean)}
-          </div>
-          <div style={{
-            fontSize: 10, fontWeight: 600, color: JM.muted,
-            textTransform: "uppercase", letterSpacing: "0.06em",
-            fontFamily: JM.fontSans,
-            paddingRight: 2,
-          }}>
-            You
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div style={{ display: "flex", gap: 12, marginBottom: 26, animation: "enter 0.3s ease both" }}>
-      <div style={{
-        width: 28, height: 28, borderRadius: 8, flexShrink: 0, marginTop: 2,
-        background: JM.primaryGradient,
-        display: "flex", alignItems: "center", justifyContent: "center",
-        fontSize: 11, fontWeight: 700,
-        color: "#fff",
-        fontFamily: JM.fontSans,
-        boxShadow: JM.primaryShadow,
-      }}>
-        A
-      </div>
-      <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{
-          fontSize: 10, fontWeight: 600, color: JM.muted,
-          marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.05em",
-          fontFamily: JM.fontSans,
-        }}>
-          Vibn
-        </div>
-        <div style={{
-          fontSize: 15, color: JM.ink, lineHeight: 1.75,
-          fontFamily: JM.fontSans,
-          whiteSpace: "normal",
-        }}>
-          {renderContent(clean)}
-        </div>
-
-        {/* Phase save button */}
-        {phase && (
-          <div style={{ marginTop: 14 }}>
-            <button
-              type="button"
-              onClick={handleSavePhase}
-              disabled={saved || saving}
-              style={{
-                display: "inline-flex", alignItems: "center", gap: 7,
-                padding: "8px 16px", borderRadius: 8,
-                background: saved ? "#e8f5e9" : JM.primaryGradient,
-                color: saved ? "#2e7d32" : "#fff",
-                border: saved ? "1px solid #a5d6a7" : "none",
-                fontSize: 12, fontWeight: 600,
-                fontFamily: JM.fontSans,
-                cursor: saved || saving ? "default" : "pointer",
-                transition: "all 0.15s",
-                opacity: saving ? 0.7 : 1,
-                boxShadow: saved ? "none" : JM.primaryShadow,
-              }}
-            >
-              {saved ? "✓ Phase saved" : saving ? "Saving…" : `Save phase — ${phase.title}`}
-            </button>
-            {!saved && (
-              <div style={{
-                marginTop: 6, fontSize: 11, color: JM.muted,
-                fontFamily: JM.fontSans, lineHeight: 1.4,
-              }}>
-                {phase.summary}
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Next step — architecture generation */}
-        {nextStep?.action === "generate_architecture" && (
-          <div style={{
-            marginTop: 16,
-            padding: "16px 18px",
-            background: JV.composerSurface,
-            border: `1px solid ${JM.border}`,
-            borderRadius: 14,
-            borderLeft: `3px solid ${JM.indigo}`,
-            boxShadow: "0 1px 8px rgba(30,27,75,0.04)",
-          }}>
-            {archState === "done" ? (
-              <div>
-                <div style={{ fontSize: "0.82rem", fontWeight: 600, color: "#2e7d32", marginBottom: 6 }}>
-                  ✓ Architecture generated
-                </div>
-                <p style={{ fontSize: "0.76rem", color: "#6b6560", margin: "0 0 12px", lineHeight: 1.5 }}>
-                  Review the recommended apps, services, and infrastructure — then confirm when you&apos;re ready.
-                </p>
-                <Link
-                  href={`/${workspace}/project/${projectId}/build`}
-                  style={{
-                    display: "inline-block", padding: "8px 16px", borderRadius: 8,
-                    background: JM.primaryGradient, color: "#fff",
-                    fontSize: 12, fontWeight: 600,
-                    fontFamily: JM.fontSans, textDecoration: "none",
-                    boxShadow: JM.primaryShadow,
-                  }}
-                >
-                  Review architecture →
-                </Link>
-              </div>
-            ) : archState === "error" ? (
-              <div>
-                <div style={{ fontSize: "0.78rem", color: "#c62828", marginBottom: 8 }}>
-                  ⚠ {archError}
-                </div>
-                <button
-                  type="button"
-                  onClick={() => { setArchState("idle"); setArchError(null); }}
-                  style={{
-                    padding: "7px 14px", borderRadius: 8, border: `1px solid ${JM.border}`,
-                    background: "none", fontSize: 12, color: JM.mid,
-                    fontFamily: JM.fontSans, cursor: "pointer",
-                  }}
-                >
-                  Try again
-                </button>
-              </div>
-            ) : (
-              <div>
-                <div style={{ fontSize: 13, fontWeight: 600, color: JM.ink, marginBottom: 5, fontFamily: JM.fontSans }}>
-                  Next: Technical architecture
-                </div>
-                <p style={{ fontSize: 12, color: JM.mid, margin: "0 0 14px", lineHeight: 1.55, fontFamily: JM.fontSans }}>
-                  The AI will read your PRD and recommend the apps, services, and infrastructure your product needs. Takes about 30 seconds.
-                </p>
-                <button
-                  type="button"
-                  onClick={handleGenerateArchitecture}
-                  disabled={archState === "loading"}
-                  style={{
-                    display: "inline-flex", alignItems: "center", gap: 8,
-                    padding: "9px 18px", borderRadius: 8, border: "none",
-                    background: archState === "loading" ? JM.muted : JM.primaryGradient,
-                    color: "#fff", fontSize: 12, fontWeight: 600,
-                    fontFamily: JM.fontSans,
-                    cursor: archState === "loading" ? "default" : "pointer",
-                    transition: "background 0.15s",
-                    boxShadow: archState === "loading" ? "none" : JM.primaryShadow,
-                  }}
-                >
-                  {archState === "loading" && (
-                    <span style={{
-                      width: 12, height: 12, borderRadius: "50%",
-                      border: "2px solid #ffffff40", borderTopColor: "#fff",
-                      animation: "spin 0.7s linear infinite", display: "inline-block",
-                    }} />
-                  )}
-                  {archState === "loading" ? "Analysing PRD…" : nextStep.label}
-                </button>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Typing indicator
-// ---------------------------------------------------------------------------
-function TypingIndicator() {
-  return (
-    <div style={{ display: "flex", gap: 12, marginBottom: 26, animation: "enter 0.2s ease", alignItems: "center" }}>
-      <div style={{
-        width: 28, height: 28, borderRadius: 8, flexShrink: 0,
-        background: JM.primaryGradient,
-        boxShadow: JM.primaryShadow,
-        display: "flex", alignItems: "center", justifyContent: "center",
-        fontSize: 11, fontWeight: 700, color: "#fff", fontFamily: JM.fontSans,
-      }}>A</div>
-      <div style={{ display: "flex", gap: 5, alignItems: "center", paddingTop: 2 }}>
-        {[0, 1, 2].map(d => (
-          <div key={d} style={{
-            width: 5, height: 5, borderRadius: "50%", background: JM.muted,
-            animation: `blink 1s ease ${d * 0.15}s infinite`,
-          }} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Main component
-// ---------------------------------------------------------------------------
-export function AtlasChat({
-  projectId,
-  chatContextRefs = [],
-  onRemoveChatContextRef,
-  conversationScope = "overview",
-  contextEmptyLabel = "Discovery",
-  emptyStateHint,
-}: AtlasChatProps) {
-  const params = useParams();
-  const workspace = (params?.workspace as string) ?? "";
-
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [input, setInput] = useState("");
-  const [isStreaming, setIsStreaming] = useState(false);
-  const [historyLoaded, setHistoryLoaded] = useState(false);
-  const [showScrollFab, setShowScrollFab] = useState(false);
-  const initTriggered = useRef(false);
-  const endRef = useRef<HTMLDivElement>(null);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  const visibleMessages = messages.filter(msg => msg.content);
-
-  const syncScrollFab = useCallback(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    const dist = el.scrollHeight - el.scrollTop - el.clientHeight;
-    setShowScrollFab(dist > 120 && visibleMessages.length > 0);
-  }, [visibleMessages.length]);
-
-  // Scroll to bottom whenever messages change
-  useEffect(() => {
-    endRef.current?.scrollIntoView({ behavior: "smooth" });
-    requestAnimationFrame(syncScrollFab);
-  }, [messages, isStreaming, syncScrollFab]);
-
-  // Send a message to Atlas — optionally hidden from UI (for init trigger)
-  const sendToAtlas = useCallback(async (text: string, hideUserMsg = false) => {
-    if (!hideUserMsg) {
-      setMessages(prev => [...prev, { role: "user", content: text }]);
-    }
-    setIsStreaming(true);
-
-    const isInit = text.trim() === "__atlas_init__";
-    const payload: { message: string; contextRefs?: ChatContextRef[] } = { message: text };
-    if (!isInit && chatContextRefs.length > 0) {
-      payload.contextRefs = chatContextRefs;
-    }
-
-    try {
-      const res = await fetch(`/api/projects/${projectId}/atlas-chat`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ ...payload, scope: conversationScope }),
-      });
-
-      if (!res.ok) {
-        const err = await res.json().catch(() => ({}));
-        throw new Error(err.error || "Atlas is unavailable. Please try again.");
-      }
-
-      const data = await res.json();
-
-      // alreadyStarted means the init was called but history already exists — ignore
-      if (data.alreadyStarted) return;
-
-      if (data.reply) {
-        setMessages(prev => [...prev, { role: "assistant", content: data.reply }]);
-      }
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : "Something went wrong.";
-      setMessages(prev => [...prev, { role: "assistant", content: msg }]);
-    } finally {
-      setIsStreaming(false);
-    }
-  }, [projectId, chatContextRefs, conversationScope]);
-
-  // On mount: load stored history; if empty, trigger Atlas greeting exactly once
-  useEffect(() => {
-    let cancelled = false; // guard against unmount during fetch
-
-    fetch(`/api/projects/${projectId}/atlas-chat?scope=${encodeURIComponent(conversationScope)}`)
-      .then(r => r.json())
-      .then((data: { messages: ChatMessage[] }) => {
-        if (cancelled) return;
-        const stored = data.messages ?? [];
-        setMessages(stored);
-        setHistoryLoaded(true);
-
-        // Only greet if there is genuinely no history and we haven't triggered yet
-        if (stored.length === 0 && !initTriggered.current) {
-          initTriggered.current = true;
-          sendToAtlas("__atlas_init__", true);
-        }
-      })
-      .catch(() => {
-        if (cancelled) return;
-        setHistoryLoaded(true);
-      });
-
-    return () => { cancelled = true; };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [projectId, conversationScope]);
-
-  const handleReset = async () => {
-    if (!confirm("Clear this conversation and start fresh?")) return;
-    try {
-      await fetch(
-        `/api/projects/${projectId}/atlas-chat?scope=${encodeURIComponent(conversationScope)}`,
-        { method: "DELETE" }
-      );
-      setMessages([]);
-      setHistoryLoaded(false);
-      initTriggered.current = false;
-      // Trigger fresh greeting
-      setTimeout(() => {
-        initTriggered.current = true;
-        sendToAtlas("__atlas_init__", true);
-      }, 100);
-    } catch {
-      // swallow
-    }
-  };
-
-  const handleSend = () => {
-    const text = input.trim();
-    if (!text || isStreaming) return;
-    setInput("");
-    sendToAtlas(text, false);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  };
-
-  const isEmpty = visibleMessages.length === 0 && !isStreaming;
-
-  const feedPad = { paddingLeft: 20, paddingRight: 20 } as const;
-
-  return (
-    <div style={{
-      display: "flex", flexDirection: "column", height: "100%",
-      background: JV.chatColumnBg,
-      fontFamily: JM.fontSans,
-    }}>
-      <style>{`
-        @keyframes blink { 0%,100%{opacity:.2} 50%{opacity:.8} }
-        @keyframes enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
-        @keyframes spin { to { transform:rotate(360deg); } }
-      `}</style>
-
-      {/* Empty state */}
-      {isEmpty && (
-        <div style={{
-          flex: 1, display: "flex", flexDirection: "column",
-          alignItems: "center", justifyContent: "center",
-          gap: 12, padding: "40px 20px",
-        }}>
-          <div style={{ width: "100%", maxWidth: JV.chatFeedMaxWidth, margin: "0 auto" }}>
-            <div style={{
-              display: "flex", flexDirection: "column", alignItems: "center", gap: 12,
-            }}>
-              <div style={{
-                width: 44, height: 44, borderRadius: 14, background: JM.primaryGradient,
-                boxShadow: JM.primaryShadow,
-                display: "flex", alignItems: "center", justifyContent: "center",
-                fontFamily: JM.fontSans, fontSize: 18, fontWeight: 600, color: "#fff",
-                animation: "breathe 2.5s ease infinite",
-              }}>A</div>
-              <style>{`@keyframes breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }`}</style>
-              <div style={{ textAlign: "center" }}>
-                <p style={{ fontSize: 15, fontWeight: 600, color: JM.ink, marginBottom: 4, fontFamily: JM.fontDisplay }}>Vibn</p>
-                <p style={{ fontSize: 13, color: JM.muted, maxWidth: 320, lineHeight: 1.55, margin: 0 }}>
-                  {emptyStateHint ??
-                    "Your product strategist. Let\u2019s define what you\u2019re building."}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {!isEmpty && (
-        <div style={{
-          flex: 1, minHeight: 0, position: "relative", display: "flex", flexDirection: "column",
-        }}>
-          <div
-            ref={scrollRef}
-            onScroll={syncScrollFab}
-            style={{
-              flex: 1, overflowY: "auto", paddingTop: 24, paddingBottom: 16,
-              ...feedPad,
-            }}
-          >
-            <div style={{ maxWidth: JV.chatFeedMaxWidth, margin: "0 auto", width: "100%" }}>
-              {visibleMessages.map((msg, i) => (
-                <MessageRow key={i} msg={msg} projectId={projectId} workspace={workspace} />
-              ))}
-              {isStreaming && <TypingIndicator />}
-              <div ref={endRef} />
-            </div>
-          </div>
-          {showScrollFab && (
-            <button
-              type="button"
-              title="Scroll to latest"
-              onClick={() => endRef.current?.scrollIntoView({ behavior: "smooth" })}
-              style={{
-                position: "absolute",
-                right: `max(20px, calc((100% - ${JV.chatFeedMaxWidth}px) / 2 + 8px))`,
-                bottom: 12,
-                width: 36,
-                height: 36,
-                borderRadius: "50%",
-                border: `1px solid ${JM.border}`,
-                background: JV.composerSurface,
-                boxShadow: "0 2px 12px rgba(30,27,75,0.1)",
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                color: JM.mid,
-              }}
-            >
-              <ChevronDown size={18} strokeWidth={2} />
-            </button>
-          )}
-        </div>
-      )}
-
-      {isEmpty && isStreaming && (
-        <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", ...feedPad }}>
-          <div style={{ maxWidth: JV.chatFeedMaxWidth, width: "100%" }}>
-            <TypingIndicator />
-          </div>
-        </div>
-      )}
-
-      {!isEmpty && !isStreaming && (
-        <div style={{
-          padding: "0 0 10px",
-          ...feedPad,
-          display: "flex",
-          justifyContent: "center",
-        }}>
-          <div style={{
-            maxWidth: JV.chatFeedMaxWidth,
-            width: "100%",
-            display: "flex",
-            gap: 8,
-            flexWrap: "wrap",
-          }}>
-            {[
-              { label: "Give me suggestions", prompt: "Can you give me some examples or suggestions to help me think through this?" },
-              { label: "What's most important?", prompt: "What's the most important thing for me to nail down right now?" },
-              { label: "Move on", prompt: "That's enough detail for now — let's move to the next phase." },
-            ].map(({ label, prompt }) => (
-              <button
-                type="button"
-                key={label}
-                onClick={() => sendToAtlas(prompt, false)}
-                style={{
-                  padding: "6px 14px", borderRadius: 999,
-                  border: `1px solid ${JM.border}`,
-                  background: JV.composerSurface, color: JM.mid,
-                  fontSize: 12, fontFamily: JM.fontSans,
-                  cursor: "pointer", transition: "all 0.1s",
-                  whiteSpace: "nowrap",
-                }}
-                onMouseEnter={e => {
-                  (e.currentTarget as HTMLElement).style.background = JV.violetTint;
-                  (e.currentTarget as HTMLElement).style.borderColor = JV.bubbleAiBorder;
-                  (e.currentTarget as HTMLElement).style.color = JM.ink;
-                }}
-                onMouseLeave={e => {
-                  (e.currentTarget as HTMLElement).style.background = JV.composerSurface;
-                  (e.currentTarget as HTMLElement).style.borderColor = JM.border;
-                  (e.currentTarget as HTMLElement).style.color = JM.mid;
-                }}
-              >
-                {label}
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-
-      <div style={{
-        padding: `10px 20px max(20px, env(safe-area-inset-bottom))`,
-        flexShrink: 0,
-        display: "flex",
-        justifyContent: "center",
-      }}>
-        <div style={{ width: "100%", maxWidth: JV.chatFeedMaxWidth }}>
-          <div style={{
-            background: JV.composerSurface,
-            border: `1px solid ${JM.border}`,
-            borderRadius: JV.composerRadius,
-            boxShadow: JV.composerShadow,
-            overflow: "hidden",
-          }}>
-            <textarea
-              ref={textareaRef}
-              value={input}
-              onChange={e => setInput(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder="Reply…"
-              rows={2}
-              disabled={isStreaming}
-              style={{
-                display: "block",
-                width: "100%",
-                border: "none",
-                background: "transparent",
-                fontSize: 15,
-                fontFamily: JM.fontSans,
-                color: JM.ink,
-                padding: "16px 18px 10px",
-                resize: "none",
-                outline: "none",
-                minHeight: 52,
-                maxHeight: 200,
-                lineHeight: 1.5,
-                boxSizing: "border-box",
-              }}
-            />
-            <div style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              gap: 12,
-              padding: "8px 10px 10px 12px",
-              borderTop: `1px solid ${JM.border}`,
-              background: "rgba(249,250,251,0.6)",
-            }}>
-              <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
-                <button
-                  type="button"
-                  title="Focus composer"
-                  onClick={() => textareaRef.current?.focus()}
-                  style={{
-                    width: 36,
-                    height: 36,
-                    borderRadius: 10,
-                    border: "none",
-                    background: "transparent",
-                    cursor: "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    color: JM.mid,
-                  }}
-                >
-                  <Plus size={20} strokeWidth={1.75} />
-                </button>
-                <button
-                  type="button"
-                  title="Clear conversation"
-                  onClick={handleReset}
-                  style={{
-                    width: 36,
-                    height: 36,
-                    borderRadius: 10,
-                    border: "none",
-                    background: "transparent",
-                    cursor: "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    color: JM.muted,
-                  }}
-                >
-                  <Trash2 size={18} strokeWidth={1.75} />
-                </button>
-              </div>
-              <div style={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "flex-end",
-                gap: 8,
-                flex: 1,
-                minWidth: 0,
-                flexWrap: "wrap",
-              }}>
-                {chatContextRefs.length > 0 && onRemoveChatContextRef && (
-                  <div style={{
-                    display: "flex",
-                    flexWrap: "wrap",
-                    gap: 6,
-                    alignItems: "center",
-                    justifyContent: "flex-end",
-                    minWidth: 0,
-                    flex: "1 1 auto",
-                    maxWidth: "100%",
-                  }}>
-                    {chatContextRefs.map(ref => {
-                      const key = contextRefKey(ref);
-                      const prefix =
-                        ref.kind === "section" ? "Section" : ref.kind === "phase" ? "Phase" : "App";
-                      return (
-                        <span
-                          key={key}
-                          style={{
-                            display: "inline-flex",
-                            alignItems: "center",
-                            gap: 4,
-                            maxWidth: 200,
-                            padding: "4px 6px 4px 10px",
-                            borderRadius: 999,
-                            border: `1px solid ${JV.bubbleAiBorder}`,
-                            background: JV.violetTint,
-                            fontSize: 11,
-                            fontWeight: 600,
-                            color: JM.indigo,
-                            fontFamily: JM.fontSans,
-                            flexShrink: 1,
-                          }}
-                        >
-                          <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 }}>
-                            {prefix}: {ref.label}
-                          </span>
-                          <button
-                            type="button"
-                            title="Remove reference"
-                            onClick={() => onRemoveChatContextRef(key)}
-                            style={{
-                              border: "none",
-                              background: "rgba(255,255,255,0.7)",
-                              borderRadius: "50%",
-                              width: 20,
-                              height: 20,
-                              padding: 0,
-                              cursor: "pointer",
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "center",
-                              color: JM.mid,
-                              flexShrink: 0,
-                            }}
-                          >
-                            <X size={12} strokeWidth={2.5} />
-                          </button>
-                        </span>
-                      );
-                    })}
-                  </div>
-                )}
-                {chatContextRefs.length === 0 && (
-                  <span style={{
-                    fontSize: 11,
-                    fontWeight: 600,
-                    color: JM.mid,
-                    fontFamily: JM.fontSans,
-                    padding: "5px 10px",
-                    borderRadius: 999,
-                    border: `1px solid ${JM.border}`,
-                    background: JV.violetTint,
-                    whiteSpace: "nowrap",
-                    flexShrink: 0,
-                  }}>
-                    {contextEmptyLabel}
-                  </span>
-                )}
-                {isStreaming ? (
-                  <button
-                    type="button"
-                    onClick={() => setIsStreaming(false)}
-                    style={{
-                      padding: "9px 18px", borderRadius: 10, border: "none",
-                      background: JV.violetTint, color: JM.mid,
-                      fontSize: 12, fontWeight: 600, fontFamily: JM.fontSans,
-                      cursor: "pointer",
-                      display: "flex", alignItems: "center", gap: 6,
-                      flexShrink: 0,
-                    }}
-                  >
-                    <span style={{ width: 8, height: 8, background: JM.indigo, borderRadius: 2, display: "inline-block" }} />
-                    Stop
-                  </button>
-                ) : (
-                  <button
-                    type="button"
-                    onClick={handleSend}
-                    disabled={!input.trim()}
-                    style={{
-                      padding: "9px 20px", borderRadius: 10, border: "none",
-                      background: input.trim() ? JM.primaryGradient : JV.violetTint,
-                      color: input.trim() ? "#fff" : JM.muted,
-                      fontSize: 12, fontWeight: 600, fontFamily: JM.fontSans,
-                      cursor: input.trim() ? "pointer" : "default",
-                      boxShadow: input.trim() ? JM.primaryShadow : "none",
-                      transition: "opacity 0.15s",
-                      flexShrink: 0,
-                    }}
-                    onMouseEnter={e => { if (input.trim()) (e.currentTarget.style.opacity = "0.92"); }}
-                    onMouseLeave={e => { (e.currentTarget.style.opacity = "1"); }}
-                  >
-                    Send
-                  </button>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/components/project/project-stream-handler.tsx b/components/project/project-stream-handler.tsx
new file mode 100644
index 00000000..2a95e4f2
--- /dev/null
+++ b/components/project/project-stream-handler.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { useEffect } from "react";
+import { useSWRConfig } from "swr";
+
+/**
+ * A headless component that maintains a Server-Sent Events (SSE) connection
+ * to the Postgres database. When the backend agent mutates this project,
+ * this component receives a ping and aggressively revalidates SWR.
+ */
+export function ProjectStreamHandler({ projectId }: { projectId: string }) {
+  const { mutate } = useSWRConfig();
+
+  useEffect(() => {
+    if (!projectId) return;
+
+    let eventSource: EventSource | null = null;
+    let retryTimeout: NodeJS.Timeout;
+
+    const connect = () => {
+      eventSource = new EventSource(`/api/projects/${projectId}/stream`);
+
+      eventSource.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          if (data.event === "updated") {
+            // The database row for this project was mutated!
+            // Find all SWR cache keys that belong to this project and invalidate them.
+            // This instantly updates the Plan tab, Task Kanban, and Anatomy overview.
+            mutate(
+              (key) => typeof key === "string" && key.includes(projectId),
+              undefined,
+              { revalidate: true }
+            );
+          }
+        } catch (err) {
+          console.error("[SSE] Parse error", err);
+        }
+      };
+
+      eventSource.onerror = () => {
+        eventSource?.close();
+        // If the connection drops (e.g. server restart or network dip), back off and try again
+        retryTimeout = setTimeout(connect, 5000);
+      };
+    };
+
+    connect();
+
+    return () => {
+      eventSource?.close();
+      clearTimeout(retryTimeout);
+    };
+  }, [projectId, mutate]);
+
+  return null;
+}
diff --git a/components/vibn-chat/chat-panel.tsx b/components/vibn-chat/chat-panel.tsx
index 453b7768..bf1584f3 100644
--- a/components/vibn-chat/chat-panel.tsx
+++ b/components/vibn-chat/chat-panel.tsx
@@ -24,6 +24,8 @@ import {
   Square,
   MousePointerClick,
   Sparkles,
+  Compass,
+  Cpu,
 } from "lucide-react";
 import { ProjectIconRail } from "@/components/project/project-icon-rail";
 import {
@@ -71,12 +73,6 @@ type TimelineEntry =
   // accumulation so multi-round turns render as separate bubbles.
   | { kind: "text"; text: string };
 
-interface ToolEvent {
-  name: string;
-  status: "running" | "done";
-  result?: string;
-}
-
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
 function getFriendlyCategory(name: string): string {
@@ -167,11 +163,109 @@ function autoLinkBareUrls(s: string): string {
 }
 
 function renderMarkdown(text: string): string {
-  let s = text
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;");
+  const codeBlocks: string[] = [];
+  let s = text;
+
+  // Extract triple backtick code blocks first to protect them from other formatting
+  s = s.replace(/```(\w*)[\s\n]([\s\S]*?)```/g, (match, lang, code) => {
+    const id = `___CODE_BLOCK_${codeBlocks.length}___`;
+    const escapedCode = code
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;");
+    const languageLabel = lang ? lang.toUpperCase() : "CODE";
+
+    const containerStyle = `
+      margin: 12px 0;
+      border: 1px solid #e8e4dc;
+      border-radius: 8px;
+      overflow: hidden;
+      background: #faf8f5;
+      box-shadow: 0 1px 3px rgba(1a,1a,1a,0.02);
+      font-family: var(--font-ibm-plex-mono), SFMono-Regular, Consolas, monospace;
+    `
+      .trim()
+      .replace(/\s+/g, " ");
+
+    const headerStyle = `
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 6px 12px;
+      background: #f0ede8;
+      border-bottom: 1px solid #e8e4dc;
+      font-size: 0.68rem;
+      font-weight: 600;
+      color: #6b6560;
+    `
+      .trim()
+      .replace(/\s+/g, " ");
+
+    const preStyle = `
+      display: block;
+      padding: 12px;
+      margin: 0;
+      overflow-x: auto;
+      font-size: 0.78rem;
+      line-height: 1.55;
+      color: #1a1a1a;
+      white-space: pre;
+    `
+      .trim()
+      .replace(/\s+/g, " ");
+
+    const buttonStyle = `
+      background: #ffffff;
+      border: 1px solid #e8e4dc;
+      border-radius: 4px;
+      padding: 2px 6px;
+      font-size: 0.65rem;
+      cursor: pointer;
+      color: #6b6560;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-family: var(--font-inter), ui-sans-serif, sans-serif;
+      transition: all 0.1s ease;
+    `
+      .trim()
+      .replace(/\s+/g, " ");
+
+    const copyId = `btn-copy-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+    const textId = `txt-code-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+
+    const copyScript = `
+      navigator.clipboard.writeText(document.getElementById('${textId}').innerText)
+        .then(() => {
+          const btn = document.getElementById('${copyId}');
+          btn.innerHTML = 'Copied ✓';
+          setTimeout(() => { btn.innerHTML = 'Copy'; }, 1500);
+        });
+    `
+      .trim()
+      .replace(/\s+/g, " ");
+
+    const blockHtml = `
+      <div style="${containerStyle}">
+        <div style="${headerStyle}">
+          <span>${languageLabel}</span>
+          <button id="${copyId}" onclick="${copyScript}" style="${buttonStyle}">Copy</button>
+        </div>
+        <pre id="${textId}" style="${preStyle}"><code>${escapedCode}</code></pre>
+      </div>
+    `
+      .trim()
+      .replace(/\s*\n\s*/g, "");
+
+    codeBlocks.push(blockHtml);
+    return id;
+  });
+
+  // Safe escape of remaining content
+  s = s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
   s = markdownLinksToHtml(s);
+
   s = s
     .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
     .replace(
@@ -199,28 +293,21 @@ function renderMarkdown(text: string): string {
       '</p><p style="margin:0 0 8px;overflow-wrap:anywhere;word-break:break-word">',
     )
     .replace(/\n/g, "<br>");
+
   s = autoLinkBareUrls(s);
+
+  // Restore the formatted code blocks
+  codeBlocks.forEach((html, index) => {
+    s = s.replace(`___CODE_BLOCK_${index}___`, html);
+  });
+
   return s;
 }
 
 // ── Message bubble ────────────────────────────────────────────────────────────
 
-/**
- * Strip the markdown-bold "**Section Heading**" lines that Gemini
- * loves to start each thought with so the collapsed pill shows the
- * actual sentence rather than "**Examining the Target Server File**".
- * The full text is still available in the expanded view.
- */
-function thoughtPreview(thoughts: string): string {
-  const stripped = thoughts
-    .replace(/^\s*\*\*[^*]+\*\*\s*/gm, "")
-    .replace(/\s+/g, " ")
-    .trim();
-  if (stripped.length <= 90) return stripped;
-  return stripped.slice(0, 87) + "…";
-}
-
 function ThinkingBubble({ thoughts }: { thoughts: string }) {
+  const [expanded, setExpanded] = useState(false);
   if (!thoughts) return null;
 
   // Split thoughts into phrases, take the last one as the "current" action
@@ -235,33 +322,66 @@ function ThinkingBubble({ thoughts }: { thoughts: string }) {
   return (
     <div
       style={{
-        display: "flex",
-        alignItems: "center",
-        gap: 8,
-        padding: "6px 12px",
         margin: "4px 0",
-        fontSize: "0.75rem",
-        color: "#8c8580",
+        background: "#faf8f5",
+        border: "1px dashed #e8e4dc",
+        borderRadius: 8,
         fontFamily: "var(--font-inter),ui-sans-serif,sans-serif",
-        fontStyle: "italic",
       }}
     >
-      <div
+      <button
+        type="button"
+        onClick={() => setExpanded(!expanded)}
         style={{
-          position: "relative",
-          width: 14,
-          height: 14,
           display: "flex",
           alignItems: "center",
-          justifyContent: "center",
+          width: "100%",
+          gap: 8,
+          padding: "6px 12px",
+          background: "none",
+          border: "none",
+          fontSize: "0.75rem",
+          color: "#8c8580",
+          cursor: "pointer",
+          textAlign: "left",
         }}
       >
-        <Sparkles
-          style={{ width: 12, height: 12, opacity: 0.7 }}
-          className="animate-pulse"
-        />
-      </div>
-      <span className="animate-pulse">{currentAction}</span>
+        <span style={{ width: 14, display: "flex", justifyContent: "center" }}>
+          <Sparkles
+            style={{ width: 12, height: 12, color: "#d4a04a" }}
+            className="animate-pulse"
+          />
+        </span>
+        <span style={{ flex: 1, fontStyle: "italic" }}>
+          {expanded ? "Thinking Process" : `${currentAction}...`}
+        </span>
+        <span
+          style={{
+            transform: expanded ? "rotate(180deg)" : "none",
+            transition: "transform 0.15s ease",
+            opacity: 0.5,
+          }}
+        >
+          <ChevronDown style={{ width: 12, height: 12 }} />
+        </span>
+      </button>
+
+      {expanded && (
+        <div
+          style={{
+            padding: "0 12px 10px 34px",
+            fontSize: "0.74rem",
+            color: "#6b6560",
+            lineHeight: 1.55,
+            whiteSpace: "pre-wrap",
+            borderTop: "1px solid #f0ede8",
+            marginTop: 4,
+            paddingTop: 8,
+          }}
+        >
+          {thoughts}
+        </div>
+      )}
     </div>
   );
 }
@@ -570,35 +690,6 @@ function TimelineToolGroup({
   );
 }
 
-function ToolBubble({ event }: { event: ToolEvent }) {
-  return (
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        gap: 8,
-        padding: "6px 12px",
-        margin: "4px 0",
-        background: "#f0ede8",
-        borderRadius: 8,
-        fontSize: "0.75rem",
-        color: "#6b6560",
-        fontFamily: "var(--font-inter),ui-sans-serif,sans-serif",
-      }}
-    >
-      {event.status === "running" ? (
-        <Loader2 style={{ width: 12, height: 12 }} className="animate-spin" />
-      ) : (
-        <Wrench style={{ width: 12, height: 12, color: "#2e7d32" }} />
-      )}
-      <span>
-        {friendlyToolName(event.name)}
-        {event.status === "running" ? "…" : " ✓"}
-      </span>
-    </div>
-  );
-}
-
 // ── Main panel ────────────────────────────────────────────────────────────────
 
 interface ChatPanelProps {
@@ -757,7 +848,7 @@ export function ChatPanel({
   structural = false,
   artifactSlot,
 }: ChatPanelProps = {}) {
-  const { data: sessionData, status } = useSession();
+  const { status } = useSession();
   const params = useParams();
   const pathname = usePathname() ?? "";
   const workspace = (params?.workspace as string) || "";
@@ -787,8 +878,10 @@ export function ChatPanel({
   const [threadsLoaded, setThreadsLoaded] = useState(false);
   const [activeThread, setActiveThread] = useState<string | null>(null);
   const [messages, setMessages] = useState<Message[]>([]);
-    const [input, setInput] = useState("");
-  const [chatMode, setChatMode] = useState<"collaborate" | "vibe" | "delegate">("vibe");
+  const [input, setInput] = useState("");
+  const [chatMode, setChatMode] = useState<"collaborate" | "vibe" | "delegate">(
+    "vibe",
+  );
   const [sending, setSending] = useState(false);
   const [showThreads, setShowThreads] = useState(false);
   const [mcpToken, setMcpToken] = useState<string | null>(null);
@@ -917,29 +1010,39 @@ export function ChatPanel({
       // so a reloaded thread renders the same per-round bubbles the
       // user saw during streaming. Older messages without
       // textSegments fall back to the legacy single-bubble path.
-      const hydrated = (data.messages || []).map((m: any) => {
-        if (m.role !== "assistant") return m;
-        const segs: string[] = Array.isArray(m.textSegments)
-          ? m.textSegments
-          : [];
-        if (segs.length === 0) return m;
-        const timeline: TimelineEntry[] = segs.map((t) => ({
-          kind: "text",
-          text: t,
-        }));
-        // We don't have round-level interleaving for tool calls in
-        // the persisted shape (the schema flattens them), so we drop
-        // the toolCalls into the timeline at the end. The streamed
-        // shape preserves true ordering; this is just a reload
-        // approximation. Good enough — what the user really cares
-        // about is the text segments not run-on'ing into one blob.
-        if (Array.isArray(m.toolCalls)) {
-          for (const tc of m.toolCalls) {
-            timeline.push({ kind: "tool", name: tc.name, status: "done" });
+      const hydrated = (data.messages || []).map(
+        (m: {
+          role: string;
+          textSegments?: string[];
+          toolCalls?: Array<{
+            name: string;
+            args: Record<string, unknown>;
+            result?: string;
+          }>;
+        }) => {
+          if (m.role !== "assistant") return m as unknown as Message;
+          const segs: string[] = Array.isArray(m.textSegments)
+            ? m.textSegments
+            : [];
+          if (segs.length === 0) return m as unknown as Message;
+          const timeline: TimelineEntry[] = segs.map((t) => ({
+            kind: "text",
+            text: t,
+          }));
+          // We don't have round-level interleaving for tool calls in
+          // the persisted shape (the schema flattens them), so we drop
+          // the toolCalls into the timeline at the end. The streamed
+          // shape preserves true ordering; this is just a reload
+          // approximation. Good enough — what the user really cares
+          // about is the text segments not run-on'ing into one blob.
+          if (Array.isArray(m.toolCalls)) {
+            for (const tc of m.toolCalls) {
+              timeline.push({ kind: "tool", name: tc.name, status: "done" });
+            }
           }
-        }
-        return { ...m, timeline, content: "" };
-      });
+          return { ...m, timeline, content: "" } as unknown as Message;
+        },
+      );
       setMessages(hydrated);
     } catch {
       /* silent */
@@ -1032,26 +1135,27 @@ export function ChatPanel({
       try {
         // If Delegate mode is selected, route to the background runner instead of streaming chat!
         if (chatMode === "delegate") {
-          const r = await fetch(
-            `/api/projects/${projectId}/agent/sessions`,
-            {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({
-                appName: "frontend",
-                appPath: ".",
-                task: text,
-              }),
-            },
-          );
+          const r = await fetch(`/api/projects/${projectId}/agent/sessions`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              appName: "frontend",
+              appPath: ".",
+              task: text,
+            }),
+          });
           if (!r.ok) {
             const err = await r.json().catch(() => ({}));
             throw new Error(err.error || `HTTP ${r.status}`);
           }
-          
+
           setMessages((prev) => [
             ...prev,
-            { role: "assistant", content: "I have started a background runner for this task. You can safely close this browser or work on something else. I will commit and ship the code when I am finished!" },
+            {
+              role: "assistant",
+              content:
+                "I have started a background runner for this task. You can safely close this browser or work on something else. I will commit and ship the code when I am finished!",
+            },
           ]);
           setSending(false);
           return;
@@ -1091,7 +1195,13 @@ export function ChatPanel({
 
           for (const line of lines) {
             if (!line.startsWith("data: ")) continue;
-            let ev: any;
+            let ev: {
+              type: string;
+              text?: string;
+              name?: string;
+              result?: string;
+              error?: string;
+            };
             try {
               ev = JSON.parse(line.slice(6));
             } catch {
@@ -1277,6 +1387,8 @@ export function ChatPanel({
       threads,
       loadThreads,
       unifiedProjectShell,
+      chatMode,
+      projectId,
     ],
   );
 
@@ -1493,8 +1605,8 @@ export function ChatPanel({
                 }}
               >
                 Welcome to {activeProjectName ? activeProjectName : "Vibn"}!
-                Tell me what you want to build and I'll scaffold it, run it in a
-                preview, and ship it when you say so.
+                Tell me what you want to build and I&apos;ll scaffold it, run it
+                in a preview, and ship it when you say so.
               </div>
             </div>
           </div>
@@ -1566,6 +1678,118 @@ export function ChatPanel({
           flexShrink: 0,
         }}
       >
+        {/* Chat Mode Toggle */}
+        <div
+          style={{
+            display: "flex",
+            gap: 4,
+            marginBottom: 8,
+            padding: "2px",
+            background: "#f0ede8",
+            borderRadius: 8,
+            border: "1px solid #e8e4dc",
+          }}
+        >
+          <button
+            type="button"
+            onClick={() => setChatMode("vibe")}
+            style={{
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 6,
+              padding: "6px 0",
+              fontSize: "0.72rem",
+              fontWeight: chatMode === "vibe" ? 600 : 500,
+              borderRadius: 6,
+              border: "none",
+              background: chatMode === "vibe" ? "#fff" : "transparent",
+              color: chatMode === "vibe" ? "#3d5afe" : "#6b6560",
+              cursor: "pointer",
+              boxShadow:
+                chatMode === "vibe" ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
+              transition: "all 0.1s ease",
+            }}
+            title="Vibe Code: Fast, iterative coding with immediate live previews."
+          >
+            <Sparkles
+              style={{
+                width: 12,
+                height: 12,
+                color: chatMode === "vibe" ? "#3d5afe" : "#8c8580",
+              }}
+            />
+            <span>Vibe Code</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => setChatMode("collaborate")}
+            style={{
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 6,
+              padding: "6px 0",
+              fontSize: "0.72rem",
+              fontWeight: chatMode === "collaborate" ? 600 : 500,
+              borderRadius: 6,
+              border: "none",
+              background: chatMode === "collaborate" ? "#fff" : "transparent",
+              color: chatMode === "collaborate" ? "#d4a04a" : "#6b6560",
+              cursor: "pointer",
+              boxShadow:
+                chatMode === "collaborate"
+                  ? "0 1px 2px rgba(0,0,0,0.05)"
+                  : "none",
+              transition: "all 0.1s ease",
+            }}
+            title="Architect: Brainstorm, spec out features, and plan architecture without writing code."
+          >
+            <Compass
+              style={{
+                width: 12,
+                height: 12,
+                color: chatMode === "collaborate" ? "#d4a04a" : "#8c8580",
+              }}
+            />
+            <span>Architect</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => setChatMode("delegate")}
+            style={{
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 6,
+              padding: "6px 0",
+              fontSize: "0.72rem",
+              fontWeight: chatMode === "delegate" ? 600 : 500,
+              borderRadius: 6,
+              border: "none",
+              background: chatMode === "delegate" ? "#fff" : "transparent",
+              color: chatMode === "delegate" ? "#2e7d32" : "#6b6560",
+              cursor: "pointer",
+              boxShadow:
+                chatMode === "delegate" ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
+              transition: "all 0.1s ease",
+            }}
+            title="Delegate Offline: Send this task to the background runner to build automatically while you step away."
+          >
+            <Cpu
+              style={{
+                width: 12,
+                height: 12,
+                color: chatMode === "delegate" ? "#2e7d32" : "#8c8580",
+              }}
+            />
+            <span>Delegate</span>
+          </button>
+        </div>
+
         {!mcpToken && (
           <div
             style={{
diff --git a/docs/architecture/POSTAL_INTEGRATION_SCOPE.md b/docs/architecture/POSTAL_INTEGRATION_SCOPE.md
new file mode 100644
index 00000000..b9b7c964
--- /dev/null
+++ b/docs/architecture/POSTAL_INTEGRATION_SCOPE.md
@@ -0,0 +1,103 @@
+# Postal Email Infrastructure & AI Integration Scope
+
+## Overview
+Vibn requires a scalable, multi-tenant email infrastructure that allows both the core platform and user-generated AI agents to send emails. To support unlimited custom domains without incurring high per-domain or per-email costs, we will self-host **Postal**, an open-source mail delivery platform, on Coolify.
+
+This document outlines the end-to-end implementation plan, covering infrastructure, backend integration, database modifications, and the AI MCP tool.
+
+---
+
+## Phase 1: Infrastructure (Self-Hosted Postal)
+*Status: Pending*
+
+Postal requires its own dedicated environment with MariaDB and RabbitMQ. We will deploy this via Coolify's Docker Compose feature.
+
+### 1. Server & DNS Prerequisites
+- **Clean IP:** Ensure the Coolify host (or dedicated VPS) IP is not on any DNSBL (Blacklists).
+- **Subdomain:** Dedicate a subdomain (e.g., `postal.vibn.com` or `mail.vibn.com`).
+- **Reverse DNS (rDNS/PTR):** Configure the hosting provider to map the server's IP back to the Postal subdomain.
+
+### 2. Coolify Deployment
+- Create a new **Docker Compose** application in Coolify.
+- Use the official Postal docker-compose configuration, which includes:
+  - `postal` (The Ruby-based core app)
+  - `mariadb` (Relational database for routing/config)
+  - `rabbitmq` (Message queue for email spooling)
+- Configure environment variables within Coolify (signing keys, DNS hostnames).
+- Expose ports: `80/443` (Web UI/API) and `25` (SMTP inbound/outbound).
+
+### 3. Deliverability Foundations
+- Generate and configure the global **SPF**, **DKIM**, and **DMARC** records for the Vibn root domain.
+- Set up a master "Organization" and "Vibn System" Mail Server inside the Postal UI to generate the first API key.
+
+---
+
+## Phase 2: Backend Integration & Database
+*Status: Pending*
+
+We need to securely store Postal credentials and allow individual Vibn projects to configure their own sender identities.
+
+### 1. Database Schema Update (`lib/db-postgres.ts`)
+Add an `email_config` JSONB column to the `projects` table to handle multi-tenancy.
+```typescript
+// Proposed structure for email_config
+{
+  provider: "postal",
+  postalServerKey: "api_key_for_this_specific_project",
+  verifiedDomains: ["userapp.com"],
+  defaultFrom: "hello@userapp.com"
+}
+```
+
+### 2. Environment Variables (`.env.local` & Coolify)
+Add global fallback variables for Vibn system emails:
+- `VIBN_POSTAL_API_URL` (e.g., `https://postal.vibn.com/api/v1`)
+- `VIBN_POSTAL_API_KEY`
+
+### 3. Email Utility Client (`lib/email/postal.ts`)
+Create a robust TypeScript wrapper for the Postal REST API.
+- **Methods:** `sendEmail()`, `createServer()`, `addDomain()`.
+- **Logic:** Must support passing a custom API key (for project-specific routing) or falling back to the global key.
+
+---
+
+## Phase 3: AI Agent Integration (MCP Tool)
+*Status: Pending*
+
+Expose the ability to send emails to the AI via the Model Context Protocol (MCP).
+
+### 1. Register `send_email` Tool (`vibn-agent-runner/src/tools/vibn-tools.ts`)
+Define the JSON Schema for the tool:
+- `to`: Array of email addresses.
+- `subject`: String.
+- `body`: Markdown or Plain Text string.
+- *(Optional)* `from`: Override sender address (must match a verified domain).
+
+### 2. Handle MCP Execution (`vibn-frontend/app/api/mcp/route.ts`)
+When the AI invokes `send_email`:
+1. Extract the `projectId` from the authenticated MCP session.
+2. Query the database for the project's `email_config`.
+3. Validate that the requested `from` address is authorized for this project.
+4. Call the `lib/email/postal.ts` utility.
+5. Return the Postal Message ID to the AI so it can confirm delivery in the chat.
+
+---
+
+## Phase 4: User Interface (Optional but Recommended)
+*Status: Pending*
+
+To achieve true multi-tenancy, users need a way to connect their custom domains to Postal via the Vibn UI.
+
+### 1. Project Settings -> Email Tab
+- A UI where users can click "Add Domain".
+- Vibn calls the Postal API to register the domain and retrieve the required DNS records (DKIM, SPF).
+- Display these DNS records to the user.
+- Add a "Verify DNS" button that queries Postal to confirm the records are active.
+
+---
+
+## Next Steps
+
+To begin, we should tackle **Phase 1: Infrastructure**. 
+
+I can write the exact `docker-compose.yml` you need to paste into Coolify right now. Do you have a specific subdomain in mind for Postal (e.g., `postal.yourdomain.com`)?
\ No newline at end of file
diff --git a/docs/architecture/REALTIME_UPDATES.md b/docs/architecture/REALTIME_UPDATES.md
new file mode 100644
index 00000000..02a180d8
--- /dev/null
+++ b/docs/architecture/REALTIME_UPDATES.md
@@ -0,0 +1,57 @@
+# Vibn Real-Time Updates Architecture
+
+## The Problem
+Currently, the Vibn frontend relies on static data fetching and manual browser refreshes. Because autonomous AI agents (like the background Coder) operate headlessly via `vibn-agent-runner`, they mutate the Postgres database directly. The Next.js frontend has no mechanism to know when these mutations occur, leading to stale data in the UI (e.g., the Plan tab not updating when a task is checked off, or the Chat UI not streaming in new messages instantly).
+
+## The Solution: Real-Time SWR + Server-Sent Events (SSE)
+
+To solve this holistically without introducing the overhead of WebSockets or a third-party service (like Pusher), we will implement a lightweight **Server-Sent Events (SSE)** architecture combined with **SWR mutation**.
+
+### 1. The Real-Time Event Bus (Postgres LISTEN/NOTIFY)
+Postgres has built-in pub/sub capabilities. When an AI agent makes a change to a project (e.g., completes a task or sends a message), we will fire a simple trigger in Postgres.
+
+```sql
+-- Example Postgres Trigger (To be created)
+CREATE OR REPLACE FUNCTION notify_project_update() RETURNS TRIGGER AS $$
+BEGIN
+  PERFORM pg_notify('project_updates', json_build_object('project_id', NEW.id, 'updated_at', NEW.data->>'updatedAt')::text);
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+```
+
+### 2. The SSE API Route (`/api/projects/[projectId]/stream`)
+We will create a Next.js API route that keeps an open HTTP connection to the client. This route will subscribe to the Postgres `pg_notify` channel.
+When the database emits an event for `projectId`, this route pushes a small payload to the browser: `data: {"event": "plan_updated"}`.
+
+### 3. The Frontend Hook (`useProjectStream`)
+We will write a global React hook that wraps SWR. 
+When the SSE connection receives an event, it simply tells SWR to re-fetch the data in the background and update the UI instantly.
+
+```tsx
+// Example Hook Concept
+export function useProjectStream(projectId: string) {
+  useEffect(() => {
+    const eventSource = new EventSource(`/api/projects/${projectId}/stream`);
+    
+    eventSource.onmessage = (event) => {
+      const data = JSON.parse(event.data);
+      if (data.type === 'plan_updated') mutate(`/api/projects/${projectId}/plan`);
+      if (data.type === 'chat_updated') mutate(`/api/projects/${projectId}/chat`);
+    };
+
+    return () => eventSource.close();
+  }, [projectId]);
+}
+```
+
+### Why this is the best approach for Vibn:
+1. **No New Infrastructure:** It uses your existing Postgres database and Next.js server.
+2. **Zero Dependencies:** SSE is native to HTTP and browsers. We don't need `socket.io`.
+3. **Works perfectly with SWR:** Instead of trying to push massive JSON payloads over the socket, the socket just acts as a "ping" to tell the client, *"Hey, the data is stale, fetch the new state via your existing API routes."*
+
+---
+## Next Steps for Implementation
+1. Add the generic SSE API route.
+2. Build the `useProjectStream` hook and drop it into the `app/[workspace]/project/[projectId]/layout.tsx` file so every tab gets real-time capabilities.
+3. Update the backend API tools (like `plan_task_complete` and the new `email_send`) to trigger the update events.
\ No newline at end of file
diff --git a/docs/scripts/mcp-zed-bridge.js b/docs/scripts/mcp-zed-bridge.js
index a414bfd0..671a6281 100755
--- a/docs/scripts/mcp-zed-bridge.js
+++ b/docs/scripts/mcp-zed-bridge.js
@@ -22,8 +22,6 @@ if (!VIBNDEV_API_KEY) {
 
 // ── JSON-RPC helpers ─────────────────────────────────────────────────
 
-let requestId = 0;
-
 function sendJson(obj) {
   process.stdout.write(JSON.stringify(obj) + "\n");
 }
diff --git a/docs/todo/DIAGNOSIS.md b/docs/todo/DIAGNOSIS.md
new file mode 100644
index 00000000..e8d762c8
--- /dev/null
+++ b/docs/todo/DIAGNOSIS.md
@@ -0,0 +1,21 @@
+# Diagnosis: Why the Plan / PRD Didn't Update in the UI
+
+I investigated why the PRD and Tasks did not appear in your Plan UI after the AI said it updated them. 
+
+Here is exactly what happened:
+
+### 1. Why the PRD text didn't update
+- The UI's "Product Spec" tab specifically looks for a single document stored in your database under a hardcoded ID called `prd_spec`.
+- Because the AI doesn't have a tool specifically named `update_prd_spec`, it used the generic `plan_vision_set` tool. It saved your new PRD text into the `plan.vision` field (the "Objective" box) instead of the `prd_spec` document.
+- **The Fix:** I can either add a new AI tool specifically for updating the PRD document, or we can adjust the UI to read from the correct field.
+
+### 2. Why the Tasks didn't show up immediately
+- The AI correctly executed `plan_task_add` for both tasks (`[US1]` and `[US2]`). I queried the Postgres database, and **both tasks are successfully saved in your project's plan.**
+- However, the Plan UI uses aggressive caching (`revalidateOnFocus: false`). When the AI finishes running its background tools, the UI doesn't know the database changed. 
+- You simply need to **refresh the page**, and then click on the **Delegate** tab. You will see both `[US1]` and `[US2]` waiting in the queue!
+
+### How we can fix this permanently when you return:
+1. **Real-time UI:** We can add a simple `router.refresh()` or WebSocket trigger so the Plan tab instantly updates when the AI adds a task.
+2. **Dedicated PRD Tool:** I can add an `update_prd_document` tool to the AI so it knows exactly where to save Product Specifications.
+
+Let me know which you want to tackle first when you're back!
\ No newline at end of file
diff --git a/docs/todo/NEXT_STEPS.md b/docs/todo/NEXT_STEPS.md
new file mode 100644
index 00000000..4d5f25f2
--- /dev/null
+++ b/docs/todo/NEXT_STEPS.md
@@ -0,0 +1,46 @@
+# Vibn Product Roadmap & To-Do List
+
+This document tracks the immediate next steps for the Vibn UI and project management features.
+
+## 1. Complete the "Plan" UI
+*Status: Pending*
+
+The Plan UI needs to be the central hub where founders and AI agents collaborate on the product roadmap, user stories, and architecture.
+
+**Key Tasks:**
+- **Visual Design:** Implement the UI for viewing and editing the PRD (Product Requirements Document). 
+- **Agent Integration:** Ensure the `Atlas` (PRD) and `PM` (Product Manager) agents can seamlessly update the plan and reflect changes in the UI in real-time.
+- **Task Management:** Build out the interface for tracking actionable tasks (e.g., KanBan or List view) that the `Coder` agent can pick up and execute.
+- **Database Sync:** Ensure all UI interactions correctly read/write to the `phase_data` or `plan` JSON structure in the Postgres database.
+
+## 2. Build the "Messages/Inbox" UI
+*Status: Pending*
+
+Projects need a dedicated "Messages" tab to act as a unified inbox for all external communications, specifically emails sent by the AI or the platform.
+
+**Key Tasks:**
+- **Email History Table:** Create a Postgres table (e.g., `project_messages`) to log every email sent via the new Mailgun integration. The schema should include: `project_id`, `to`, `subject`, `body_text`, `body_html`, `sent_at`, and `status`.
+- **Backend Logging:** Update the `app/api/mcp/route.ts` `email.send` tool to insert a record into this new table immediately after a successful Mailgun dispatch.
+- **UI Implementation:** Build a clean Inbox UI within the Project Dashboard.
+  - List view of all sent/received messages.
+  - Detail view to read the actual email content (rendering the compiled HTML/MJML safely).
+  - *(Future)* Webhook integration with Mailgun to receive replies and log them in this same UI.
+
+## 3. Implement System-Wide Real-Time UI Updates
+*Status: Pending*
+
+**Key Tasks:**
+- Implement the Postgres `LISTEN/NOTIFY` event bus (as defined in `REALTIME_UPDATES.md`).
+- Build the Next.js Server-Sent Events (SSE) `/api/projects/[projectId]/stream` route.
+- Wrap the Project layout with a `useProjectStream` hook so SWR automatically re-fetches when the background AI modifies the database (e.g., checking off tasks, editing the PRD).
+
+## 4. Integrate Open-Source Analytics (Umami)
+*Status: Pending*
+
+Every project deployed by Vibn should automatically have privacy-first analytics injected and visible to the founder.
+
+**Key Tasks:**
+- **Infrastructure:** Deploy Umami via Coolify using Docker Compose (backed by the existing Postgres DB).
+- **Automation:** Build a backend integration so when an AI ships a project, Vibn programmatically calls the Umami API to generate a unique `Website ID` for that project.
+- **Code Injection:** Ensure the AI agent automatically injects the Umami `<script>` tag with the correct ID into the project's root `layout.tsx`.
+- **UI Dashboard:** Add an "Analytics" tab to the project workspace that surfaces the Umami traffic metrics natively inside Vibn.
\ No newline at end of file
diff --git a/lib/ai/gemini-chat.ts b/lib/ai/gemini-chat.ts
index 71314231..d93513a9 100644
--- a/lib/ai/gemini-chat.ts
+++ b/lib/ai/gemini-chat.ts
@@ -1,10 +1,15 @@
-import { GoogleGenAI } from '@google/genai';
+import { GoogleGenAI } from "@google/genai";
 
 const GEMINI_API_KEY = process.env.GOOGLE_API_KEY || "";
 const GEMINI_MODEL = process.env.VIBN_CHAT_MODEL || "gemini-3.1-pro-preview";
 
+// Add a clear visual log so we always know exactly which model is active in the terminal
+console.log(`[GeminiChat] Initialized — Model: ${GEMINI_MODEL}`);
+
 if (!GEMINI_API_KEY) {
-  console.warn(`[GeminiChat] WARNING: GOOGLE_API_KEY is not set. Chat stream will fail with 403 Forbidden.`);
+  console.warn(
+    `[GeminiChat] WARNING: GOOGLE_API_KEY is not set. Chat stream will fail with 403 Forbidden.`,
+  );
 }
 
 const ai = new GoogleGenAI({ apiKey: GEMINI_API_KEY });
@@ -38,18 +43,24 @@ export interface ChatChunk {
   error?: string;
 }
 
+type GeminiPart = Record<string, unknown>;
+type GeminiContent = {
+  role: string;
+  parts: GeminiPart[];
+};
+
 function toGeminiContents(messages: ChatMessage[]) {
-  const contents: any[] = [];
+  const contents: GeminiContent[] = [];
 
   for (const msg of messages) {
     if (msg.role === "user") {
       contents.push({ role: "user", parts: [{ text: msg.content }] });
     } else if (msg.role === "assistant") {
-      const parts: any[] = [];
+      const parts: GeminiPart[] = [];
       if (msg.content) parts.push({ text: msg.content });
       if (msg.toolCalls?.length) {
         for (const tc of msg.toolCalls) {
-          const part: any = {
+          const part: GeminiPart = {
             functionCall: { name: tc.name, args: tc.args },
           };
           if (tc.thoughtSignature) {
@@ -84,7 +95,7 @@ function toGeminiFunctions(tools: ToolDefinition[]) {
       functionDeclarations: tools.map((t) => ({
         name: t.name,
         description: t.description,
-        parameters: t.parameters as any,
+        parameters: t.parameters as Record<string, unknown>,
       })),
     },
   ];
@@ -104,16 +115,14 @@ export async function callGeminiChat(opts: {
   error?: string;
 }> {
   try {
-    const config: any = {
+    const config: Record<string, unknown> = {
       temperature: opts.temperature ?? 0.7,
       maxOutputTokens: 8192,
     };
-    
-    if (opts.systemPrompt) {
-        config.systemInstruction = opts.systemPrompt;
-    }
 
-    
+    if (opts.systemPrompt) {
+      config.systemInstruction = opts.systemPrompt;
+    }
 
     const fns = toGeminiFunctions(opts.tools ?? []);
     if (fns) config.tools = fns;
@@ -121,37 +130,37 @@ export async function callGeminiChat(opts: {
     const response = await ai.models.generateContent({
       model: GEMINI_MODEL,
       contents: toGeminiContents(opts.messages),
-      config
+      config,
     });
 
     let text = "";
     let thoughts = "";
     const toolCalls: ToolCall[] = [];
-    
+
     const parts = response.candidates?.[0]?.content?.parts ?? [];
 
     for (const part of parts) {
       if (part.text) {
-        if ((part as any).thought) thoughts += part.text;
+        if ((part as { thought?: unknown }).thought) thoughts += part.text;
         else text += part.text;
       }
       if (part.functionCall) {
         toolCalls.push({
           id: `tc-${Date.now()}-${Math.random().toString(36).slice(2)}`,
           name: part.functionCall.name,
-          args: part.functionCall.args as Record<string, unknown> ?? {},
-          thoughtSignature: (part as any).thoughtSignature,
+          args: (part.functionCall.args as Record<string, unknown>) ?? {},
+          thoughtSignature: (part as { thoughtSignature?: string })
+            .thoughtSignature,
         });
       }
     }
 
-    return { 
-      text, 
-      thoughts, 
-      toolCalls, 
-      finishReason: response.candidates?.[0]?.finishReason 
+    return {
+      text,
+      thoughts,
+      toolCalls,
+      finishReason: response.candidates?.[0]?.finishReason,
     };
-
   } catch (error) {
     return {
       text: "",
@@ -169,14 +178,13 @@ export async function* streamGeminiChat(opts: {
   temperature?: number;
 }): AsyncGenerator<ChatChunk> {
   try {
-    const config: any = {
+    const config: Record<string, unknown> = {
       temperature: opts.temperature ?? 0.7,
       maxOutputTokens: 8192,
-      
     };
 
     if (opts.systemPrompt) {
-        config.systemInstruction = opts.systemPrompt;
+      config.systemInstruction = opts.systemPrompt;
     }
 
     const fns = toGeminiFunctions(opts.tools ?? []);
@@ -185,14 +193,14 @@ export async function* streamGeminiChat(opts: {
     const streamResult = await ai.models.generateContentStream({
       model: GEMINI_MODEL,
       contents: toGeminiContents(opts.messages),
-      config
+      config,
     });
 
     for await (const chunk of streamResult) {
       const parts = chunk.candidates?.[0]?.content?.parts ?? [];
       for (const part of parts) {
         if (part.text) {
-          yield (part as any).thought
+          yield (part as { thought?: unknown }).thought
             ? { type: "thinking", text: part.text }
             : { type: "text", text: part.text };
         }
@@ -200,7 +208,6 @@ export async function* streamGeminiChat(opts: {
     }
 
     yield { type: "done" };
-
   } catch (error) {
     yield {
       type: "error",
diff --git a/lib/ai/openai-compatible-chat.ts b/lib/ai/openai-compatible-chat.ts
index 9cf07e39..e02504ef 100644
--- a/lib/ai/openai-compatible-chat.ts
+++ b/lib/ai/openai-compatible-chat.ts
@@ -289,17 +289,24 @@ export async function callOpenAiCompatibleChat(opts: {
   if (tools?.length) body.tools = tools;
 
   // ── Request logging (DeepSeek 400 debug) ──────────────────────────────
-  const msgSummary = oaiMessages.map((m: any) => ({
-    role: m.role,
-    has_tool_calls:
-      m.role === "assistant" ? Boolean(m.tool_calls?.length) : undefined,
-    tool_calls_ids:
-      m.role === "assistant" && m.tool_calls?.length
-        ? m.tool_calls.map((tc: any) => tc.id)
-        : undefined,
-    tool_call_id: m.role === "tool" ? m.tool_call_id : undefined,
-    content_len: typeof m.content === "string" ? m.content.length : 0,
-  }));
+  const msgSummary = oaiMessages.map(
+    (m: {
+      role: string;
+      content?: unknown;
+      tool_calls?: Array<{ id: string }>;
+      tool_call_id?: string;
+    }) => ({
+      role: m.role,
+      has_tool_calls:
+        m.role === "assistant" ? Boolean(m.tool_calls?.length) : undefined,
+      tool_calls_ids:
+        m.role === "assistant" && m.tool_calls?.length
+          ? m.tool_calls.map((tc: { id: string }) => tc.id)
+          : undefined,
+      tool_call_id: m.role === "tool" ? m.tool_call_id : undefined,
+      content_len: typeof m.content === "string" ? m.content.length : 0,
+    }),
+  );
   console.error(
     "[deepseek] request",
     JSON.stringify({
@@ -309,7 +316,7 @@ export async function callOpenAiCompatibleChat(opts: {
       has_tools: Boolean(tools?.length),
       tool_count: tools?.length ?? 0,
       msg_summary: msgSummary,
-      last_5_roles: msgSummary.slice(-5).map((m: any) => m.role),
+      last_5_roles: msgSummary.slice(-5).map((m: { role: string }) => m.role),
     }),
   );
   // ───────────────────────────────────────────────────────────────────────
diff --git a/lib/ai/vibn-tools.ts b/lib/ai/vibn-tools.ts
index 7033972a..e90f061d 100644
--- a/lib/ai/vibn-tools.ts
+++ b/lib/ai/vibn-tools.ts
@@ -1675,28 +1675,35 @@ After this returns, ALWAYS call apps_deploy { uuid } to regenerate the live Trae
     },
   },
   {
-    name: "plan_decision_log",
+    name: "plan_document_update",
     description:
-      "Log a decision the user has made. Call this PROACTIVELY whenever a non-trivial choice gets settled in conversation (database engine, auth approach, framework, pricing model, copy, branding…) — so it shows up in the Plan tab and you stop re-asking it next session. Don't ask permission; log it and move on.",
+      "Overwrite the content of one of the Blueprint documents in the Plan tab. These documents define the specifications for the product. ALWAYS use this instead of `fs_write` when a user asks you to update the PRD, Spec, or Architecture plan.",
     parameters: {
       type: "OBJECT",
       properties: {
-        projectId: { type: "STRING", description: "The Vibn project ID." },
-        title: {
+        projectId: { type: "STRING" },
+        docId: {
+          type: "STRING",
+          description: "The specific document to update.",
+          enum: [
+            "stories",
+            "acceptance",
+            "success",
+            "ui_design",
+            "tech_context",
+            "data_model",
+            "file_structure",
+            "tasks",
+            "checklist",
+          ],
+        },
+        content: {
           type: "STRING",
           description:
-            'Short topic of the decision (e.g. "Database engine", "Auth provider").',
-        },
-        choice: {
-          type: "STRING",
-          description: 'What was chosen (e.g. "Postgres", "Stripe Checkout").',
-        },
-        why: {
-          type: "STRING",
-          description: "Optional 1-2 sentence reasoning. Strongly recommended.",
+            "The full markdown content for the document. This will completely overwrite the existing document.",
         },
       },
-      required: ["projectId", "title", "choice"],
+      required: ["projectId", "docId", "content"],
     },
   },
   {
diff --git a/lib/email/mailgun.ts b/lib/email/mailgun.ts
new file mode 100644
index 00000000..63a96542
--- /dev/null
+++ b/lib/email/mailgun.ts
@@ -0,0 +1,81 @@
+import Mailgun from "mailgun.js";
+import formData from "form-data";
+import mjml2html from "mjml";
+
+const mailgun = new Mailgun(formData);
+
+const API_KEY = process.env.MAILGUN_API_KEY || "";
+const DOMAIN = process.env.MAILGUN_DOMAIN || "";
+const API_URL = process.env.MAILGUN_API_URL || "https://api.mailgun.net";
+
+// Initialize the Mailgun client
+const mg = mailgun.client({
+  username: "api",
+  key: API_KEY,
+  url: API_URL,
+});
+
+export interface SendEmailOptions {
+  to: string | string[];
+  subject: string;
+  text: string;
+  html?: string;
+  mjml?: string; // Optional: If provided, this will be compiled to HTML and override the `html` field.
+  from?: string; // Optional: If not provided, defaults to the Mailgun system domain
+}
+
+/**
+ * Sends an email using the Mailgun API.
+ * If `mjml` is provided, it compiles it to responsive HTML before sending.
+ */
+export async function sendEmail(options: SendEmailOptions) {
+  // Use the provided from address, or fallback to a default on the live domain
+  const fromAddress = options.from || `Vibn AI <mailgun@${DOMAIN}>`;
+
+  // Format the 'to' address
+  const toAddresses = Array.isArray(options.to)
+    ? options.to.join(",")
+    : options.to;
+
+  // Process MJML if it exists
+  let finalHtml = options.html;
+  if (options.mjml) {
+    try {
+      const compiled = mjml2html(options.mjml, {
+        validationLevel: "soft", // Warn on errors but try to compile anyway
+        minify: true,
+      });
+      if (compiled.errors && compiled.errors.length > 0) {
+        console.warn("[MJML Compiler Warnings]:", compiled.errors);
+      }
+      finalHtml = compiled.html;
+    } catch (e) {
+      console.error("[MJML Compiler Error]:", e);
+      // Fallback to plain text if MJML fails catastrophically
+      finalHtml = undefined;
+    }
+  }
+
+  try {
+    const response = await mg.messages.create(DOMAIN, {
+      from: fromAddress,
+      to: toAddresses,
+      subject: options.subject,
+      text: options.text,
+      html: finalHtml,
+    });
+
+    return {
+      success: true,
+      id: response.id,
+      message: response.message,
+    };
+  } catch (error: any) {
+    console.error("[Mailgun Error]:", error);
+    return {
+      success: false,
+      error: error.message || "Failed to send email via Mailgun",
+      status: error.status,
+    };
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index 6ecb393d..1face04d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,8 +38,11 @@
         "daisyui": "^5.5.1-beta.2",
         "dotenv": "^17.2.3",
         "firebase": "^12.5.0",
+        "form-data": "^4.0.5",
         "google-auth-library": "^10.5.0",
         "lucide-react": "^0.553.0",
+        "mailgun.js": "^13.0.1",
+        "mjml": "^5.2.2",
         "next": "16.0.1",
         "next-auth": "^4.24.13",
         "next-themes": "^0.4.6",
@@ -62,6 +65,7 @@
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
+        "@types/mjml": "^5.0.0",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -1419,6 +1423,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@colordx/core": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/@colordx/core/-/core-5.4.3.tgz",
+      "integrity": "sha512-kIxYSfA5T8HXjav55UaaH/o/cKivF6jCCGIb8eqtcsfI46wsvlSiT8jMDyrl779qLec3c2c2oHBZo4oAhvbjrQ==",
+      "license": "MIT"
+    },
     "node_modules/@dmsnell/diff-match-patch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@dmsnell/diff-match-patch/-/diff-match-patch-1.1.0.tgz",
@@ -4208,6 +4218,12 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@one-ini/wasm": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
+      "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
+      "license": "MIT"
+    },
     "node_modules/@opentelemetry/api": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.1.tgz",
@@ -8601,6 +8617,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/mjml": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mjml/-/mjml-5.0.0.tgz",
+      "integrity": "sha512-z6P0yjEOVOz6cZVyD3vkPSifzVH0fa9M8BFM8Jl9HtpeFkBJyCZHRLPx1uFnkZijgAYmtO/JfSbp4EF1fNwsXQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/mjml-core": "*"
+      }
+    },
+    "node_modules/@types/mjml-core": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mjml-core/-/mjml-core-5.0.0.tgz",
+      "integrity": "sha512-E1Rho2ZfVEqZekQoESDuPAw7C3MrzdUvS6YAiEPGdhQQqAchMXfdChXlSi6ly9YhZgUP026ujrRlEGJn9o/zAg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/ms": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
@@ -8679,6 +8712,12 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/relateurl": {
+      "version": "0.2.33",
+      "resolved": "https://registry.npmjs.org/@types/relateurl/-/relateurl-0.2.33.tgz",
+      "integrity": "sha512-bTQCKsVbIdzLqZhLkF5fcJQreE4y1ro4DIyVrlDNSCJRRwHhB8Z+4zXXa8jN6eDvc2HbRsEYgbvrnGvi54EpSw==",
+      "license": "MIT"
+    },
     "node_modules/@types/request": {
       "version": "2.48.13",
       "resolved": "https://registry.npmjs.org/@types/request/-/request-2.48.13.tgz",
@@ -8693,6 +8732,50 @@
         "form-data": "^2.5.5"
       }
     },
+    "node_modules/@types/request/node_modules/form-data": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.5.5.tgz",
+      "integrity": "sha512-jqdObeR2rxZZbPSGL+3VckHMYtu+f9//KXBsVny6JSX/pa38Fy+bGjuG8eW/H6USNQWhLi8Num++cU2yOCNz4A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.35",
+        "safe-buffer": "^5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.12"
+      }
+    },
+    "node_modules/@types/request/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@types/request/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/@types/send": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-1.2.1.tgz",
@@ -9351,6 +9434,15 @@
         "react": "^18.0.0 || >=19.2.1"
       }
     },
+    "node_modules/abbrev": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
+      "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==",
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/abort-controller": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
@@ -9451,6 +9543,15 @@
         }
       }
     },
+    "node_modules/ansi-colors": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
+      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -9475,11 +9576,23 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
       "license": "Python-2.0"
     },
     "node_modules/aria-hidden": {
@@ -9759,9 +9872,7 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
@@ -9789,6 +9900,52 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.16.1.tgz",
+      "integrity": "sha512-caYkukvroVPO8KrzuJEb50Hm07KwfBZPEC3VeFHTsqWHvKTsy54hjJz9BS/cdaypROE2rH6xvm9mHX4fgWkr3A==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.16.0",
+        "form-data": "^4.0.5",
+        "https-proxy-agent": "^5.0.1",
+        "proxy-from-env": "^2.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/axios/node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/axios/node_modules/proxy-from-env": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -9815,6 +9972,12 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/base-64": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/base-64/-/base-64-1.0.0.tgz",
+      "integrity": "sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==",
+      "license": "MIT"
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -9836,12 +9999,15 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.9.19",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz",
-      "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==",
+      "version": "2.10.31",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.31.tgz",
+      "integrity": "sha512-MujYO3eP72uvmSE0i4wltsodRfIpZATP3jvzRNRGGxgzId7aVocVJJV3nf01qnzzKFGxQVC9bpWxl5cjxTr/7Q==",
       "license": "Apache-2.0",
       "bin": {
-        "baseline-browser-mapping": "dist/cli.js"
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
     "node_modules/bcrypt-pbkdf": {
@@ -9875,6 +10041,18 @@
         "node": "*"
       }
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/body-parser": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
@@ -9899,6 +10077,12 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "license": "ISC"
+    },
     "node_modules/bowser": {
       "version": "2.14.1",
       "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.14.1.tgz",
@@ -9920,7 +10104,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -9930,9 +10113,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
-      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
       "funding": [
         {
           "type": "opencollective",
@@ -9949,11 +10132,11 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "baseline-browser-mapping": "^2.9.0",
-        "caniuse-lite": "^1.0.30001759",
-        "electron-to-chromium": "^1.5.263",
-        "node-releases": "^2.0.27",
-        "update-browserslist-db": "^1.2.0"
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -10038,16 +10221,27 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001770",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001770.tgz",
-      "integrity": "sha512-x/2CLQ1jHENRbHg5PSId2sXq1CIO1CISvwWAj027ltMVG2UNgW+w9oH2+HzgEIRFembL8bUlXtfbBHR1fCg2xw==",
+      "version": "1.0.30001793",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001793.tgz",
+      "integrity": "sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==",
       "funding": [
         {
           "type": "opencollective",
@@ -10131,6 +10325,84 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/cheerio": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0.tgz",
+      "integrity": "sha512-quS9HgjQpdaXOvsZz82Oz7uxtXiy6UIsIQcpBj7HRw2M63Skasm9qlDocAM7jNuaxdhpPU7c4kJN+gA5MCu4ww==",
+      "license": "MIT",
+      "dependencies": {
+        "cheerio-select": "^2.1.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "encoding-sniffer": "^0.2.0",
+        "htmlparser2": "^9.1.0",
+        "parse5": "^7.1.2",
+        "parse5-htmlparser2-tree-adapter": "^7.0.0",
+        "parse5-parser-stream": "^7.1.2",
+        "undici": "^6.19.5",
+        "whatwg-mimetype": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18.17"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-select": "^5.1.0",
+        "css-what": "^6.1.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/cjs-module-lexer": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-2.2.0.tgz",
@@ -10206,9 +10478,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -10226,6 +10496,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/commander": {
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.3.tgz",
+      "integrity": "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -10239,6 +10518,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
     "node_modules/content-disposition": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz",
@@ -10302,6 +10591,32 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/cosmiconfig": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.1.tgz",
+      "integrity": "sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==",
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/cpu-features": {
       "version": "0.0.10",
       "resolved": "https://registry.npmjs.org/cpu-features/-/cpu-features-0.0.10.tgz",
@@ -10330,6 +10645,198 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-declaration-sorter": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-7.4.0.tgz",
+      "integrity": "sha512-LTuzjPoyA2vMGKKcaOqKSp7Ub2eGrNfKiZH4LpezxpNrsICGCSFvsQOI29psISxNZtaXibkC2CXzrQ5enMeGGw==",
+      "license": "ISC",
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cssnano": {
+      "version": "7.1.9",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-7.1.9.tgz",
+      "integrity": "sha512-uPR75+5Dk/WJ/YSPR1/YDHdwMM9c5FsaARljfKWgeCKLKOtJ0we21xy/RcCjn53fZnD/f6yYEIZ8pu18+GnbNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cssnano-preset-default": "^7.0.17",
+        "lilconfig": "^3.1.3"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/cssnano"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/cssnano-preset-default": {
+      "version": "7.0.17",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-7.0.17.tgz",
+      "integrity": "sha512-11qO63A+czwguQFJCaTdICvbaxn0pJzz/XghLlv+OT7WyToDxAMR0Xb3/26/l0y0hQJywwNbj/SLSQlGBHE1OA==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "css-declaration-sorter": "^7.2.0",
+        "cssnano-utils": "^5.0.3",
+        "postcss-calc": "^10.1.1",
+        "postcss-colormin": "^7.0.10",
+        "postcss-convert-values": "^7.0.12",
+        "postcss-discard-comments": "^7.0.8",
+        "postcss-discard-duplicates": "^7.0.4",
+        "postcss-discard-empty": "^7.0.3",
+        "postcss-discard-overridden": "^7.0.3",
+        "postcss-merge-longhand": "^7.0.7",
+        "postcss-merge-rules": "^7.0.11",
+        "postcss-minify-font-values": "^7.0.3",
+        "postcss-minify-gradients": "^7.0.5",
+        "postcss-minify-params": "^7.0.9",
+        "postcss-minify-selectors": "^7.1.2",
+        "postcss-normalize-charset": "^7.0.3",
+        "postcss-normalize-display-values": "^7.0.3",
+        "postcss-normalize-positions": "^7.0.4",
+        "postcss-normalize-repeat-style": "^7.0.4",
+        "postcss-normalize-string": "^7.0.3",
+        "postcss-normalize-timing-functions": "^7.0.3",
+        "postcss-normalize-unicode": "^7.0.9",
+        "postcss-normalize-url": "^7.0.3",
+        "postcss-normalize-whitespace": "^7.0.3",
+        "postcss-ordered-values": "^7.0.4",
+        "postcss-reduce-initial": "^7.0.9",
+        "postcss-reduce-transforms": "^7.0.3",
+        "postcss-svgo": "^7.1.3",
+        "postcss-unique-selectors": "^7.0.7"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/cssnano-preset-lite": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-lite/-/cssnano-preset-lite-4.0.6.tgz",
+      "integrity": "sha512-EI/VDoucl8SmVkXUZtWIux31cWoxgNUbF7njnpPxdz5ZbnKOjAd5DueLuCE1RKKLrOPQsEUaNfUgB1taohIIyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cssnano-utils": "^5.0.3",
+        "postcss-discard-comments": "^7.0.8",
+        "postcss-discard-empty": "^7.0.3",
+        "postcss-normalize-whitespace": "^7.0.3"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/cssnano-utils": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-5.0.3.tgz",
+      "integrity": "sha512-ynIREMICLxkxm7e9bCR9sh75s4Q5drICi0ua1yxo5jH2XPBqSKkl4dOh4EbFqtUmnTMhRffHgYL0EKKkMjtJTg==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "license": "CC0-1.0"
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -10493,9 +11000,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -10539,6 +11044,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
+      "license": "MIT"
+    },
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
@@ -10571,6 +11082,61 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/dotenv": {
       "version": "17.3.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.3.1.tgz",
@@ -10624,6 +11190,69 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "node_modules/editorconfig": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.7.tgz",
+      "integrity": "sha512-e0GOtq/aTQhVdNyDU9e02+wz9oDDM+SIOQxWME2QRjzRX5yyLAuHDE+0aE8vHb9XRC8XD37eO2u57+F09JqFhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@one-ini/wasm": "0.1.1",
+        "commander": "^10.0.0",
+        "minimatch": "^9.0.1",
+        "semver": "^7.5.3"
+      },
+      "bin": {
+        "editorconfig": "bin/editorconfig"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/editorconfig/node_modules/brace-expansion": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
+      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/editorconfig/node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/editorconfig/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/editorconfig/node_modules/semver": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.0.tgz",
+      "integrity": "sha512-AcM7dV/5ul4EekoQ29Agm5vri8JNqRyj39o0qpX6vDF2GZrtutZl5RwgD1XnZjiTAfncsJhMI48QQH3sN87YNA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -10631,9 +11260,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.286",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.286.tgz",
-      "integrity": "sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==",
+      "version": "1.5.360",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.360.tgz",
+      "integrity": "sha512-GkcBt6YYAw9SxFWn+xVar4cLVGlXVuswwtRLBozi2zp0GjXs4ZnOrqV4zbXzg35n7w81hCkyJNYicgXlVHAmBA==",
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
@@ -10651,6 +11280,31 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/encoding-sniffer": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.1.tgz",
+      "integrity": "sha512-5gvq20T6vfpekVtqrYQsSCFZ1wEg5+wW0/QaZMWkFr6BqD3NfKs0rLCx4rrVlSWJeZb5NBJgVLswK/w2MWU+Gw==",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "whatwg-encoding": "^3.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/encoding-sniffer?sponsor=1"
+      }
+    },
+    "node_modules/encoding-sniffer/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/end-of-stream": {
       "version": "1.4.5",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
@@ -10674,6 +11328,36 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.24.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
@@ -10805,7 +11489,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
       "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -10898,6 +11581,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-goat": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-3.0.0.tgz",
+      "integrity": "sha512-w3PwNZJwRxlp47QGzhuEBldEqVHHhh8/tIPcl6ecf2Bou99cdAt0knihBV0Ecc7CGxYduXVBDheH1K2oADRlvw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -11681,7 +12376,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -12254,6 +12948,26 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -12287,31 +13001,26 @@
       }
     },
     "node_modules/form-data": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.5.5.tgz",
-      "integrity": "sha512-jqdObeR2rxZZbPSGL+3VckHMYtu+f9//KXBsVny6JSX/pa38Fy+bGjuG8eW/H6USNQWhLi8Num++cU2yOCNz4A==",
-      "dev": true,
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
         "es-set-tostringtag": "^2.1.0",
         "hasown": "^2.0.2",
-        "mime-types": "^2.1.35",
-        "safe-buffer": "^5.2.1"
+        "mime-types": "^2.1.12"
       },
       "engines": {
-        "node": ">= 0.12"
+        "node": ">= 6"
       }
     },
     "node_modules/form-data/node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -12320,9 +13029,7 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -13025,7 +13732,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-symbols": "^1.0.3"
@@ -13141,6 +13847,76 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/htmlnano": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/htmlnano/-/htmlnano-3.3.1.tgz",
+      "integrity": "sha512-UXOwkDA1WUFSamPXpCzJz131mqbuaenm4Agra3VTpP6lpbuCytILqXEAG5kwzkeksDnFQ+JG3EhVVqpBPsh51w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/relateurl": "^0.2.33",
+        "commander": "^14.0.0",
+        "cosmiconfig": "^9.0.0",
+        "posthtml": "^0.16.5"
+      },
+      "bin": {
+        "htmlnano": "dist/bin.js"
+      },
+      "peerDependencies": {
+        "cssnano": "^8.0.0",
+        "postcss": "^8.3.11",
+        "purgecss": "^8.0.0",
+        "relateurl": "^0.2.7",
+        "srcset": "^5.0.1",
+        "svgo": "^4.0.0",
+        "terser": "^5.21.0",
+        "uncss": "^0.17.3"
+      },
+      "peerDependenciesMeta": {
+        "cssnano": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "purgecss": {
+          "optional": true
+        },
+        "relateurl": {
+          "optional": true
+        },
+        "srcset": {
+          "optional": true
+        },
+        "svgo": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "uncss": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
+      "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "entities": "^4.5.0"
+      }
+    },
     "node_modules/http-errors": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
@@ -13246,7 +14022,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
       "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
@@ -13290,6 +14065,12 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "license": "ISC"
+    },
     "node_modules/inline-style-parser": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
@@ -13371,6 +14152,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "license": "MIT"
+    },
     "node_modules/is-async-function": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
@@ -13407,6 +14194,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-boolean-object": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
@@ -13525,7 +14324,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -13580,7 +14378,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -13599,6 +14396,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-json": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-json/-/is-json-2.0.1.tgz",
+      "integrity": "sha512-6BEnpVn1rcf3ngfmViLM6vjUjGErbdrL4rwlv+u1NO1XO8kqT4YGL8+19Q+Z/bas8tY90BTWMk2+fW1g6hQjbA==",
+      "license": "ISC"
+    },
     "node_modules/is-map": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -13641,7 +14444,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -13913,6 +14715,36 @@
         "url": "https://github.com/sponsors/panva"
       }
     },
+    "node_modules/js-beautify": {
+      "version": "1.15.4",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.15.4.tgz",
+      "integrity": "sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==",
+      "license": "MIT",
+      "dependencies": {
+        "config-chain": "^1.1.13",
+        "editorconfig": "^1.0.4",
+        "glob": "^10.4.2",
+        "js-cookie": "^3.0.5",
+        "nopt": "^7.2.1"
+      },
+      "bin": {
+        "css-beautify": "js/bin/css-beautify.js",
+        "html-beautify": "js/bin/html-beautify.js",
+        "js-beautify": "js/bin/js-beautify.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/js-cookie": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.7.tgz",
+      "integrity": "sha512-z/wZZgDrkNV1eA0ULjM/F9/50Ya8fbzgKneSpoPsXSGd0KnpdtHfOZWK+GcwLk+EZbS4F9RBhU+K2RgzuDaItw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -13923,7 +14755,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
       "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
@@ -13960,6 +14791,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "license": "MIT"
+    },
     "node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
@@ -14058,6 +14895,47 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/juice": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/juice/-/juice-11.1.1.tgz",
+      "integrity": "sha512-4SBfZqKcc6DrIS+5b/WiGoWaZsdUPBH+e6SbRlNjJpaIRtfoBhYReAtobIEW6mcLeFFDXLBJMuZwkJLkBJjs2w==",
+      "license": "MIT",
+      "dependencies": {
+        "cheerio": "1.0.0",
+        "commander": "^12.1.0",
+        "entities": "^7.0.0",
+        "mensch": "^0.3.4",
+        "slick": "^1.12.2",
+        "web-resource-inliner": "^8.0.0"
+      },
+      "bin": {
+        "juice": "bin/juice"
+      },
+      "engines": {
+        "node": ">=18.17"
+      }
+    },
+    "node_modules/juice/node_modules/commander": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/juice/node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/jwa": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
@@ -14411,12 +15289,30 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
     "node_modules/limiter": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz",
       "integrity": "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA==",
       "dev": true
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -14432,6 +15328,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "license": "MIT"
+    },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -14487,6 +15389,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -14501,6 +15409,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
+      "license": "MIT"
+    },
     "node_modules/long": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
@@ -14588,6 +15502,20 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/mailgun.js": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/mailgun.js/-/mailgun.js-13.0.1.tgz",
+      "integrity": "sha512-KiQbFpJeBtpalM/c3E0kStrGf/wF/eOvnK4eeLbNyEKQIrgQvW3M2Gi5Gyl2LsrOud3PLkJHe2xI/y+k9gXkRw==",
+      "license": "MIT",
+      "dependencies": {
+        "axios": "^1.15.0",
+        "base-64": "^1.0.0",
+        "url-join": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/markdown-table": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
@@ -14889,6 +15817,12 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "license": "CC0-1.0"
+    },
     "node_modules/media-typer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
@@ -14898,6 +15832,12 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/mensch": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/mensch/-/mensch-0.3.4.tgz",
+      "integrity": "sha512-IAeFvcOnV9V0Yk+bFhYR07O3yNina9ANIN5MoXBKYJ/RLYPurd2d0yw14MDhpr9/momp0WofT1bPUh3hkzdi/g==",
+      "license": "MIT"
+    },
     "node_modules/merge-descriptors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
@@ -15578,6 +16518,418 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mjml": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml/-/mjml-5.2.2.tgz",
+      "integrity": "sha512-hTxb9kF8CNrzk+1YtjVlwh/8BNlNGozurPn+IbXdGh0GMW+fSXN0CoQK7oRvRrEpsKWjMdXonPCSYZSBNukfDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "mjml-cli": "5.2.2",
+        "mjml-core": "5.2.2",
+        "mjml-preset-core": "5.2.2",
+        "mjml-validator": "5.2.2"
+      },
+      "bin": {
+        "mjml": "bin/mjml"
+      }
+    },
+    "node_modules/mjml-accordion": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-accordion/-/mjml-accordion-5.2.2.tgz",
+      "integrity": "sha512-QBPlon8CJUSG725DDiE5qGCDUj8wJvsYNwNzQmgqlgZYNAtKvl8nnSAP/TyhZpUmbEmQgh+yKYIeBkR6psX9tg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-body": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-body/-/mjml-body-5.2.2.tgz",
+      "integrity": "sha512-wECRqVp8RizZaUwnpa+/th4ASk23FCqy6h/t4xo+lZaDdnFVkZYCH9P0M9OxnbrWxSjn7K5G8bTt0ELXdvxdkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-button": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-button/-/mjml-button-5.2.2.tgz",
+      "integrity": "sha512-rUPsqtLsL6mt/1JEpr19CUkAW7DAzVlA3OzU8R87G2s2bfeinGJq9a1YMqodOy8lTo4DhM8006jUKL8x4chrIw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-carousel": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-carousel/-/mjml-carousel-5.2.2.tgz",
+      "integrity": "sha512-G8VTrD23Emdj+oEasZpuIQjUn2dEl8zbYYZOG3zVbU4Ihwvdc5WlIO6U4nZ+F3ub9E4XSG15+k9pBdCNxQBVUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-cli": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-cli/-/mjml-cli-5.2.2.tgz",
+      "integrity": "sha512-qhkxCqjeLqOFxGVOJAawrcovGbp6PxYi9uA5CK5mobnN3YjphECy+tjd3ueZ4yoKR1evfPcJhPGqrFwMGQLcvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "chokidar": "^3.0.0",
+        "glob": "^10.5.0",
+        "lodash": "^4.17.21",
+        "minimatch": "^9.0.3",
+        "mjml-core": "5.2.2",
+        "mjml-parser-xml": "5.2.2",
+        "mjml-preset-core": "5.2.2",
+        "mjml-validator": "5.2.2",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "mjml-cli": "bin/mjml"
+      }
+    },
+    "node_modules/mjml-cli/node_modules/brace-expansion": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
+      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/mjml-cli/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/mjml-column": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-column/-/mjml-column-5.2.2.tgz",
+      "integrity": "sha512-KeJaM7zfYXSNrhZ4UkAsIz7ii1rdYqK/bYd7b1eUJC4lmwMe2AYs+PiqO6kF5qq9ybQSNMHe4gVnttFXcaqD3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-core": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-core/-/mjml-core-5.2.2.tgz",
+      "integrity": "sha512-z9Vkzzl84T8xSUfrBgXGBMgu4rfh4BrZke9DG+VFffJ/Rea3Qe7eEn9jGjpxLrH6Q0vAbzOqYVIGvWfWJ4TF+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "cheerio": "1.0.0",
+        "cssnano": "^7.1.2",
+        "cssnano-preset-lite": "^4.0.4",
+        "detect-node": "^2.0.4",
+        "htmlnano": "^3.2.0",
+        "js-beautify": "^1.15.4",
+        "juice": "^11.0.0",
+        "lodash": "^4.17.21",
+        "mjml-parser-xml": "5.2.2",
+        "mjml-validator": "5.2.2",
+        "postcss": "^8.5.8"
+      }
+    },
+    "node_modules/mjml-divider": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-divider/-/mjml-divider-5.2.2.tgz",
+      "integrity": "sha512-yVeYzOCSM3OZbDJBYqumN7+mzMkGqRX2iYmh13Mxk2Yfytk4jt23FRpetIuHJkhhz0Gv8OSZv2/VI9tkhtWKIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-group": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-group/-/mjml-group-5.2.2.tgz",
+      "integrity": "sha512-ORTg+vYUy2jS+gFCh9kunozS60TdOLixUdjl06bbinFMI/Wvi2+LFNsoKXtVzRUZe4Olybs8X/vFEVcJTjra3g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-head": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-head/-/mjml-head-5.2.2.tgz",
+      "integrity": "sha512-1yyePEpEjUBIMopLql+COCfaTx5JPiU+5XdH11KUqjrowiO7wKDkgpHIxVGi8iv48nwDlv6BWV6kT8gsr3ak0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-head-attributes": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-head-attributes/-/mjml-head-attributes-5.2.2.tgz",
+      "integrity": "sha512-O9KIhfLxUWnmKzN3F/Zo18Ec3MgqIpgkXSEAryGbAzxuqNmXTG4Tj19+AOZE9PjNBpcVIvLDroJy0vV1SlaVfg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-head-breakpoint": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-head-breakpoint/-/mjml-head-breakpoint-5.2.2.tgz",
+      "integrity": "sha512-/nXk798PJ2fWQXKhuOdnPdn17fzPBvlEJufecDfTcwF7NtT365YH2EQSj5S10A5jCphohoVL+c/J/FbrGP5m2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-head-font": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-head-font/-/mjml-head-font-5.2.2.tgz",
+      "integrity": "sha512-hdoC/1sFBd4Zw3i3PHsJolheuC4CqU/kIgkhOzlpinazPD/jS3ceeVs5om5xNlwKRRsu+mtvKkrYaFJKyGllxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-head-html-attributes": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-head-html-attributes/-/mjml-head-html-attributes-5.2.2.tgz",
+      "integrity": "sha512-Sy1//o6KHxdMWOiVaKMboQKHKhS+u0zBUrcJKBVpc9nzrULiHuU35JLXVMsjqfHUkyyQq8PAmlSGGlBjoZWa2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-head-preview": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-head-preview/-/mjml-head-preview-5.2.2.tgz",
+      "integrity": "sha512-8e/y9bHikFKFNF//jt7bSSZ83sb0aySE4msnnpl2a31w6i/anpiP1bs+nHYjXzV0a22BgT2/dE7baB4xHFdf4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-head-style": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-head-style/-/mjml-head-style-5.2.2.tgz",
+      "integrity": "sha512-AyPeDo17wW2RNCxBxxopMKM+b6+12yOeYcDVajg6WJSgQCnY9tcnF+qZCDle1SRcumc/MR/NW9/ahIOZCwUvdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-head-title": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-head-title/-/mjml-head-title-5.2.2.tgz",
+      "integrity": "sha512-/DFYi9f9zNGo/MZkT4qdkdrrGWbv6GgdoCPb1h9vdYJMRJ9aIMLxZtgzmmzz7AWABLJ7RXx9Uu03zS8Rwe9nzA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-hero": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-hero/-/mjml-hero-5.2.2.tgz",
+      "integrity": "sha512-sToaIu5I9Yj8XZkedxah3VMby0O0G2V4f/ipJRnKNCuXlkJE2oh1s2Fyi9PAwcAERWOiTCMq2l7SmN3+aQ8ulw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-image": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-image/-/mjml-image-5.2.2.tgz",
+      "integrity": "sha512-FmKYXZmGdqlczc2FMociri39Mc5Bx+PfSzr+3XBPZkq7isQCsNa1ZmdwkzD51GbUDifgk78K/MHQveF3oZfjdg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-navbar": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-navbar/-/mjml-navbar-5.2.2.tgz",
+      "integrity": "sha512-GEvdDoxhWYjMZlyzsrqw2U8zBBBYIr5lz+ul0eEv5bxQVshS45Ja1bBRbh8TjaAhbeQc3Nhwh7HMT8sIJdPeCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-parser-xml": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-parser-xml/-/mjml-parser-xml-5.2.2.tgz",
+      "integrity": "sha512-Ei7Kt5ts7JFgRePcROl/6AJoNADpaFsYlO35laaLqjBDA9t9a4XggYQNSoy+Gx9CPCOrRMnJ0TFHjzFdZt3HzA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "detect-node": "2.1.0",
+        "htmlparser2": "^9.1.0",
+        "lodash": "^4.17.21"
+      }
+    },
+    "node_modules/mjml-preset-core": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-preset-core/-/mjml-preset-core-5.2.2.tgz",
+      "integrity": "sha512-+CQfQUQnMFqA8/B0Cr0160Mcc2I30UFHemM2/+0dIfybUFx5fxQk7i6ps5hwJViJcE2fljCMZ9mmna89xZHkJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "mjml-accordion": "5.2.2",
+        "mjml-body": "5.2.2",
+        "mjml-button": "5.2.2",
+        "mjml-carousel": "5.2.2",
+        "mjml-column": "5.2.2",
+        "mjml-divider": "5.2.2",
+        "mjml-group": "5.2.2",
+        "mjml-head": "5.2.2",
+        "mjml-head-attributes": "5.2.2",
+        "mjml-head-breakpoint": "5.2.2",
+        "mjml-head-font": "5.2.2",
+        "mjml-head-html-attributes": "5.2.2",
+        "mjml-head-preview": "5.2.2",
+        "mjml-head-style": "5.2.2",
+        "mjml-head-title": "5.2.2",
+        "mjml-hero": "5.2.2",
+        "mjml-image": "5.2.2",
+        "mjml-navbar": "5.2.2",
+        "mjml-raw": "5.2.2",
+        "mjml-section": "5.2.2",
+        "mjml-social": "5.2.2",
+        "mjml-spacer": "5.2.2",
+        "mjml-table": "5.2.2",
+        "mjml-text": "5.2.2",
+        "mjml-wrapper": "5.2.2"
+      }
+    },
+    "node_modules/mjml-raw": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-raw/-/mjml-raw-5.2.2.tgz",
+      "integrity": "sha512-T+KlyLObYS+7qD4Na7iXf3CXVhbh6YIlKtMHiRVdNbNDhxP+VN2PEzBEeMXcYi0ap1C/gKO7ZzMzfipK0MH/pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-section": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-section/-/mjml-section-5.2.2.tgz",
+      "integrity": "sha512-Efql64JChZibEM2+x+Mmm6Df7bPB2C7bXCbvsNdQEr3z/Wc0FpyA5SxZMOnFGVaWGzpP3hmSPks8CSuaW7XrdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-social": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-social/-/mjml-social-5.2.2.tgz",
+      "integrity": "sha512-5x8PNywCGwJL39SV4/Wf4+ZVf8WEDjR4fXApcsCEdwM98su3+tm4qJmMFwT4VRFJKzbtbF/JMlTcsT1iQbTvIw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-spacer": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-spacer/-/mjml-spacer-5.2.2.tgz",
+      "integrity": "sha512-//BmBnf570nqjLL5GF7qYeDo/mNzzdhtWVYjstOd/VxKw391d54ePcG+4qlx4cKlxVgQiMVpWqMjxVWmcm31ew==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-table": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-table/-/mjml-table-5.2.2.tgz",
+      "integrity": "sha512-dz8FDfIXkQ0XSbBIdcCwhLWew70RTgZdqi3xPRU3+XnExtFtVF8o3PEEoudOo90inged7x/JBRMoDN8/NrROjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-text": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-text/-/mjml-text-5.2.2.tgz",
+      "integrity": "sha512-zxTEGcDkQHWymRaFuMXTuzbW4oH1kMUPM/B4TL2gPRQluphL7J+nMUM4WWjfaF8+9XoJxgImN5W1yAONJKSH1g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2"
+      }
+    },
+    "node_modules/mjml-validator": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-validator/-/mjml-validator-5.2.2.tgz",
+      "integrity": "sha512-4q1fg8Ljnwh8xGqMCMJFKsztwrtX92Myyovk04lc9eOp9wzPQ8cOaGJeUIjvGHrxsxS6urdNvW47kQV4yIqN9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4"
+      }
+    },
+    "node_modules/mjml-wrapper": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/mjml-wrapper/-/mjml-wrapper-5.2.2.tgz",
+      "integrity": "sha512-oVb5Y0xIWxo1S1xPrzSIElpvmsj0/Xu1GOjW1bv3VWkEvI2L1vU1ebqqnlYBAR+fiVsrCQMHfvZW5FZ/LSbdhA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "lodash": "^4.17.21",
+        "mjml-core": "5.2.2",
+        "mjml-section": "5.2.2"
+      }
+    },
     "node_modules/module-details-from-path": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/module-details-from-path/-/module-details-from-path-1.0.4.tgz",
@@ -15598,9 +16950,9 @@
       "optional": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
       "funding": [
         {
           "type": "github",
@@ -15845,11 +17197,47 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.27",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
-      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "version": "2.0.44",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.44.tgz",
+      "integrity": "sha512-5WUyunoPMsvvEhS8AxHtRzP+oA8UCkJ7YRxatWKjngndhDGLiqEVAQKWjFAiAiuL8zMRGzGSJxFnLetoa43qGQ==",
       "license": "MIT"
     },
+    "node_modules/nopt": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.1.tgz",
+      "integrity": "sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==",
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^2.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/oauth": {
       "version": "0.9.15",
       "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz",
@@ -16169,7 +17557,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
@@ -16203,6 +17590,73 @@
       "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
       "license": "MIT"
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz",
+      "integrity": "sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "^5.0.3",
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-parser-stream": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz",
+      "integrity": "sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==",
+      "license": "MIT",
+      "dependencies": {
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5/node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -16405,7 +17859,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -16434,10 +17887,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
-      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
-      "dev": true,
+      "version": "8.5.15",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
       "funding": [
         {
           "type": "opencollective",
@@ -16454,7 +17906,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.11",
+        "nanoid": "^3.3.12",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -16462,6 +17914,438 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-calc": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-10.1.1.tgz",
+      "integrity": "sha512-NYEsLHh8DgG/PRH2+G9BTuUdtf9ViS+vdoQ0YA5OQdGsfN4ztiwtDWNtBl9EKeqNMFnIu8IKZ0cLxEQ5r5KVMw==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^7.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12 || ^20.9 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.38"
+      }
+    },
+    "node_modules/postcss-colormin": {
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-7.0.10.tgz",
+      "integrity": "sha512-yFr6JezOolHLta/buLE71VKPh2mXursp4saVe98/ol8ZnEWhL+racShqPKlvd/DKWLre/39B6HhcMXf7RZ3hxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@colordx/core": "^5.4.3",
+        "browserslist": "^4.28.2",
+        "caniuse-api": "^3.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-convert-values": {
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-7.0.12.tgz",
+      "integrity": "sha512-xurKu5qqk4viR3Cp3p4xBR4KfnZm4w4ys6+UBwBmeuBSNkH7+DtLnYOYnOffgtE4yx8sH9S1VZ6RAAvROXzP2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-discard-comments": {
+      "version": "7.0.8",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-7.0.8.tgz",
+      "integrity": "sha512-CvvS5S9WrXblFXCEJ9nVo+4z+eA7zSC7Z88V1HEJuwlQhlFnYTIjg1xJY+BCUiG2bvICap2tXii4mP22BD108Q==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^7.1.1"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-discard-duplicates": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-7.0.4.tgz",
+      "integrity": "sha512-VBNn1+EuMZkeGVVtz0gRfbNGtx9IFgAsAV+E2pHtXPrp4qfGBkhTIiAuE/wrb+Y6Pakg9NewAlfTpYIFAWODtw==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-discard-empty": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-7.0.3.tgz",
+      "integrity": "sha512-M2pyjQCU+/7cMHVtL6bKTHjv0lZnPLMpicgr67Dlth7AbuV9gjVTtUqaRwn6Pp6BwSDspUzhz8SaUrRykJU5Dw==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-discard-overridden": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-7.0.3.tgz",
+      "integrity": "sha512-aNovXo9UsZuRNLzHJtp13lHIvinDPfiXBPePpXkSjCbgp++iU2FqE+YxvjIsg6EdyPZsASFbfu+JcBFVsErXIQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-merge-longhand": {
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-7.0.7.tgz",
+      "integrity": "sha512-b3mfYUxR388u5Pt0HPcVIUtUDn/k15UfTY9M+ORW+meCR6JLNxoZffiYvXyOYQoRYQNZyX/UFkMCM/mNHxe1qA==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "stylehacks": "^7.0.11"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-merge-rules": {
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-7.0.11.tgz",
+      "integrity": "sha512-SJUPM18g2BmPhf8BVlbwqWz4aK3pLu6u6xjfwEzra7xL6IBR10sUaiB++EzqcVfadPHrKBSMlNdP+XieykhI+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "caniuse-api": "^3.0.0",
+        "cssnano-utils": "^5.0.3",
+        "postcss-selector-parser": "^7.1.1"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-minify-font-values": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-7.0.3.tgz",
+      "integrity": "sha512-yilG/VOaNI74IylQvAQQxm3/wZVBkXyYUqNUAdxqwtbWUXPsbK1q8Ms0mL83v+f8YicgcyfYCRZtWACUdYajpA==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-minify-gradients": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-7.0.5.tgz",
+      "integrity": "sha512-YraROyQRg3BI1+Hg8E05B/JPdnTm8EDSVu4P2BxdM+CRiOyfmou809+chGIqo6fQqwjPGQ947nbGncSjmTU1WQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@colordx/core": "^5.4.3",
+        "cssnano-utils": "^5.0.3",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-minify-params": {
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-7.0.9.tgz",
+      "integrity": "sha512-R8itbB8BhlpoYyBm1ou0dD+vJnQ3F6adQipR4UnkCHUwlo+S9WXJaDRg1RHjC8YVAtIdrQzSWvJl40HnGDTKjA==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "cssnano-utils": "^5.0.3",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-minify-selectors": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-7.1.2.tgz",
+      "integrity": "sha512-aQtrEWKwqafNlExcKHQvPGsXR2+vlUqqJtf5XsCQcgsSb5PL4wlujWBYDJuWsP4UnQX1YHDHU8qRlD+1PzTQ+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1",
+        "caniuse-api": "^3.0.0",
+        "cssesc": "^3.0.0",
+        "postcss-selector-parser": "^7.1.1"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-normalize-charset": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-7.0.3.tgz",
+      "integrity": "sha512-NoBfZu8PR4c2NlmjvrqQTzCzLY79hwcSRgNQ3ZiNK0ABzf9kYKloE/jNj+/8GQY1wsm8pRRgANk6ydLH8cwo0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-normalize-display-values": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-7.0.3.tgz",
+      "integrity": "sha512-ldsCX0QIt05pKIOobZtVQ48wXJecr+czw4+e1/YjVhLMqslShgpVxgPtI2CefURR8oyVoYaU/l829MMwExDMLw==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-normalize-positions": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-7.0.4.tgz",
+      "integrity": "sha512-VEvlpeGd3Ju1Hqa/oN4jaP3+ms4laYwkEL9N9u+B6k54PZjXbW1n6wI+aVprf1BQXlCYpS5+1pl/7/vHiKgARg==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-normalize-repeat-style": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-7.0.4.tgz",
+      "integrity": "sha512-6mPKlY/8cSaDHxX502wERADarJsccwlky6yIrOapHH2ZgfoKAV94SbiTKfKEs4EEpdazuc3J72WsqeYk7hp9+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-normalize-string": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-7.0.3.tgz",
+      "integrity": "sha512-HnEQPUchi1eznmDKEYrKUTqrprEq97SrpUYClgUkv7V2zRODD9DFoUsYU+m9ZOetmD5ku7fEMZB/lwy8IT6xVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-normalize-timing-functions": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-7.0.3.tgz",
+      "integrity": "sha512-zmEzHdvpZBZu0OKlbJSfgASQvaayyAoVuWtvyr34IJ/LyS+DaOKvvR3EvFJ9RWWtNIx+CMvO125OVophaxNYew==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-normalize-unicode": {
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-7.0.9.tgz",
+      "integrity": "sha512-DRAdWfeh/TjmhLJsw91vdiWCnUod9iwvM7xyS02/nF/sLsCR3A8l3pztrSUrWG8DSBqfX7yEk9FM0USaVJ2mSg==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-normalize-url": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-7.0.3.tgz",
+      "integrity": "sha512-CL93wmloq5qsffmFv+bw24MIRbmhHrp53qoh1LDAb/5TtjWEXI/np4xcP/Gw9oWCb2XyWnqHYLDUwiKRoJBA1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-normalize-whitespace": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-7.0.3.tgz",
+      "integrity": "sha512-FdHjjn+Ht5Z2ZRjNOmeCbNq6lq09sUYKpmlF/Aq0XjVNSLTL6fmHlA/3swN2wP2caY9GV/tjSDcIIyS7aN7W0A==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-ordered-values": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-7.0.4.tgz",
+      "integrity": "sha512-nubSi49hDHQk4E8KIj+IbLY8Bg+8OcSUEhgyolgM+atnOvXjV7EjaR6bac4YGZoFyPa9mWoAF3EaYbWdFkKqVg==",
+      "license": "MIT",
+      "dependencies": {
+        "cssnano-utils": "^5.0.3",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-reduce-initial": {
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-7.0.9.tgz",
+      "integrity": "sha512-ztTNPdIxXTxtBcG03E9u8v44M4ElXbMIRT7pf2onlquGula0Y83nKKxqM22FA/hMgkfCjN7ohevkVlaNwI8iOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "caniuse-api": "^3.0.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-reduce-transforms": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-7.0.3.tgz",
+      "integrity": "sha512-FXsnN9ZwcZTT8Yf8cAHA8qIGUXcX6WfLd9JoYhrdDfmvsVhhfqkkv7m4AC3rwFOfz+GzkUa87OCKF9dUcicd+g==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
+      "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-svgo": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-7.1.3.tgz",
+      "integrity": "sha512-2QfoFOYMcj8lwcVEf9WeTlkVIAm7u2QvOEhMzkQU3KUhhGX/l8hVV9EtjMv4iq3E9iI3OeeMN0YoMLbGusuigw==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "svgo": "^4.0.1"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >= 18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-unique-selectors": {
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-7.0.7.tgz",
+      "integrity": "sha512-d+sCkaRnSefghOUdH8CMJZV9yUQhj2ojpe8Nw/lA+LV1UOfeleGkLTl6XdCFFSai9UJ+DJPb69FFuqthXYsY8w==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^7.1.1"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "license": "MIT"
+    },
     "node_modules/postgres-array": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
@@ -16501,6 +18385,126 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/posthtml": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.7.tgz",
+      "integrity": "sha512-7Hc+IvlQ7hlaIfQFZnxlRl0jnpWq2qwibORBhQYIb0QbNtuicc5ZxvKkVT71HJ4Py1wSZ/3VR1r8LfkCtoCzhw==",
+      "license": "MIT",
+      "dependencies": {
+        "posthtml-parser": "^0.11.0",
+        "posthtml-render": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/posthtml-parser": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.11.0.tgz",
+      "integrity": "sha512-QecJtfLekJbWVo/dMAA+OSwY79wpRmbqS5TeXvXSX+f0c6pW4/SE6inzZ2qkU7oAMCPqIDkZDvd/bQsSFUnKyw==",
+      "license": "MIT",
+      "dependencies": {
+        "htmlparser2": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/posthtml-parser/node_modules/dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/posthtml-parser/node_modules/dom-serializer/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "license": "BSD-2-Clause",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/posthtml-parser/node_modules/domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/posthtml-parser/node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/posthtml-parser/node_modules/entities": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/posthtml-parser/node_modules/htmlparser2": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
+      "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.2",
+        "domutils": "^2.8.0",
+        "entities": "^3.0.1"
+      }
+    },
+    "node_modules/posthtml-render": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/posthtml-render/-/posthtml-render-3.0.0.tgz",
+      "integrity": "sha512-z+16RoxK3fUPgwaIgH9NGnK1HKY9XIDpydky5eQGgAFVXTCSezalv9U2jQuNV+Z9qV1fDWNzldcw4eK0SSbqKA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-json": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/preact": {
       "version": "10.11.3",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.11.3.tgz",
@@ -16590,6 +18594,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+      "license": "ISC"
+    },
     "node_modules/proto3-json-serializer": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/proto3-json-serializer/-/proto3-json-serializer-2.0.2.tgz",
@@ -17013,6 +19023,18 @@
         "node": ">= 6"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -17179,7 +19201,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -17412,6 +19433,15 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
+    "node_modules/sax": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
+      "integrity": "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=11.0.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -17706,6 +19736,15 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/slick": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/slick/-/slick-1.12.2.tgz",
+      "integrity": "sha512-4qdtOGcBjral6YIBCWJ0ljFSKNLz9KkhbWtuGvUyRowl1kxfuE1x/Z/aJcaiilpb3do9bl5K7/1h9XC5wWpY/A==",
+      "license": "MIT (http://mootools.net/license.txt)",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/sonner": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
@@ -18102,6 +20141,22 @@
         }
       }
     },
+    "node_modules/stylehacks": {
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-7.0.11.tgz",
+      "integrity": "sha512-iODNfhXVLqc5LADs+Y6Oh5wJuK5ZcHbVng8aiK3y9pjMQdc5hLrBW0eFU6FtnpNrE6PoEg/MmFTU4waotj5WNg==",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "postcss-selector-parser": "^7.1.1"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.13"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -18128,6 +20183,40 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svgo": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-4.0.1.tgz",
+      "integrity": "sha512-XDpWUOPC6FEibaLzjfe0ucaV0YrOjYotGJO1WpF0Zd+n6ZGEQUsSugaoLq9QkEZtAfQIxT42UChcssDVPP3+/w==",
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^11.1.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^3.0.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.1.1",
+        "sax": "^1.5.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
+    "node_modules/svgo/node_modules/commander": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/swr": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/swr/-/swr-2.4.1.tgz",
@@ -18268,7 +20357,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -18563,6 +20651,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici": {
+      "version": "6.25.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.25.0.tgz",
+      "integrity": "sha512-ZgpWDC5gmNiuY9CnLVXEH8rl50xhRCuLNA97fAUnKi8RRuV4E6KG31pDTsLVUKnohJE0I3XDrTeEydAXRw47xg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.17"
+      }
+    },
     "node_modules/undici-types": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
@@ -18740,6 +20837,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-join": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+      "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
+      "license": "MIT"
+    },
     "node_modules/use-callback-ref": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
@@ -18885,6 +20988,15 @@
         "pnpm": ">=9"
       }
     },
+    "node_modules/valid-data-url": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/valid-data-url/-/valid-data-url-3.0.1.tgz",
+      "integrity": "sha512-jOWVmzVceKlVVdwjNSenT4PbGghU0SBIizAev8ofZVgivk/TVHXSbNL8LP6M3spZvkR9/QolkyJavGSX5Cs0UA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -18922,6 +21034,34 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/web-resource-inliner": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/web-resource-inliner/-/web-resource-inliner-8.0.0.tgz",
+      "integrity": "sha512-Ezr98sqXW/+OCGoUEXuOKVR+oVFlSdn1tIySEEJdiSAw4IjrW8hQkwARSSBJTSB5Us5dnytDgL0ZDliAYBhaNA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-colors": "^4.1.1",
+        "escape-goat": "^3.0.0",
+        "htmlparser2": "^9.1.0",
+        "mime": "^2.4.6",
+        "valid-data-url": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/web-resource-inliner/node_modules/mime": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+      "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/web-streams-polyfill": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
@@ -18966,6 +21106,40 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-encoding/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
diff --git a/package.json b/package.json
index 0fbfb141..9e455763 100644
--- a/package.json
+++ b/package.json
@@ -54,8 +54,11 @@
     "daisyui": "^5.5.1-beta.2",
     "dotenv": "^17.2.3",
     "firebase": "^12.5.0",
+    "form-data": "^4.0.5",
     "google-auth-library": "^10.5.0",
     "lucide-react": "^0.553.0",
+    "mailgun.js": "^13.0.1",
+    "mjml": "^5.2.2",
     "next": "16.0.1",
     "next-auth": "^4.24.13",
     "next-themes": "^0.4.6",
@@ -78,6 +81,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@types/mjml": "^5.0.0",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",