fix(ui): update API payloads for new chat modes

app/[workspace]/project/[projectId]/(home)/plan/page.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect, useCallback } from "react";
 import { useParams } from "next/navigation";
 import { Loader2, Target, BookOpen, Layers, GitBranch, Pencil, FileText, Check, Plus } from "lucide-react";
 import ReactMarkdown from "react-markdown";
+import useSWR from "swr";
 
 // Types mapping to our Postgres plan shape
 type Plan = {
@@ -25,37 +26,29 @@ const INK = {
   bgHover: "#f8f6f2",
 };
 
+const fetcher = async (url: string) => {
+  const res = await fetch(url, { credentials: "include" });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  const data = await res.json();
+  return data.plan;
+};
+
 export default function PlanPageV2() {
   const params = useParams();
   const projectId = (params?.projectId as string) || "";
 
-  const [plan, setPlan] = useState<Plan | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
   const [activeTab, setActiveTab] = useState<Tab>("objective");
 
-  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]);
+  const { data: plan, error, mutate: mutatePlan } = useSWR<Plan>(
+    projectId ? `/api/projects/${projectId}/plan` : null,
+    fetcher,
+    { refreshInterval: 15000, dedupingInterval: 5000 }
+  );
+  
+  // Wrapper for child components to update SWR cache optimally
+  const setPlan = (newPlan: Plan) => { mutatePlan(newPlan, false); };
 
-  useEffect(() => {
-    load();
-    // Safe polling interval
-    const intervalId = setInterval(load, 15000);
-    return () => clearInterval(intervalId);
-  }, [load]);
-
-  if (loading && !plan) {
+  if (!plan && !error) {
     return (
       <div style={{ display: "flex", justifyContent: "center", padding: 100 }}>
         <Loader2 className="animate-spin" size={24} color={INK.muted} />