Complete Stackless parity: Activity, Deploy, Settings, header desc

- Add project description line to project header (from productVision)
- Sidebar: add Activity nav item (Projects / Activity / Settings)
- New Activity page: timeline feed with type filters (Atlas/Builds/Deploys/You)
- New Activity layout using VIBNSidebar
- Rewrite Deploy tab: Project URLs, Custom Domain, Env Vars, Deploy History
  — fully Stackless style, real data from project API, no more MOCK_PROJECT
- Rewrite Project Settings tab: remove all Firebase refs (db, auth, Firestore)
  — General (name/description), Repo link, Collaborators, Export JSON/PDF,
  — Danger Zone with double-confirm delete
  — uses /api/projects/[id] PATCH for saves

Made-with: Cursor

app/[workspace]/project/[projectId]/settings/page.tsx

@@ -1,357 +1,258 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Loader2, Save, FolderOpen, AlertCircle } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
-import { db, auth } from "@/lib/firebase/config";
-import { doc, getDoc, updateDoc, serverTimestamp } from "firebase/firestore";
+import { useSession } from "next-auth/react";
 import { toast } from "sonner";
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@/components/ui/alert";
+import { Loader2 } from "lucide-react";
 
 interface Project {
   id: string;
-  name: string;
   productName: string;
   productVision?: string;
-  workspacePath?: string;
-  workspaceName?: string;
-  githubRepo?: string;
-  chatgptUrl?: string;
-  projectType: string;
-  status: string;
+  giteaRepo?: string;
+  giteaRepoUrl?: string;
+  status?: string;
+}
+
+function SectionLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{
+      fontSize: "0.6rem", fontWeight: 600, color: "#a09a90",
+      letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 12,
+    }}>
+      {children}
+    </div>
+  );
+}
+
+function FieldLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ fontSize: "0.72rem", fontWeight: 600, color: "#6b6560", marginBottom: 6 }}>
+      {children}
+    </div>
+  );
+}
+
+function InfoCard({ children, style = {} }: { children: React.ReactNode; style?: React.CSSProperties }) {
+  return (
+    <div style={{
+      background: "#fff", border: "1px solid #e8e4dc", borderRadius: 10,
+      padding: "22px", marginBottom: 12, boxShadow: "0 1px 2px #1a1a1a05", ...style,
+    }}>
+      {children}
+    </div>
+  );
 }
 
 export default function ProjectSettingsPage() {
   const params = useParams();
   const router = useRouter();
+  const { data: session } = useSession();
   const projectId = params.projectId as string;
   const workspace = params.workspace as string;
-  
+
   const [project, setProject] = useState<Project | null>(null);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
-  const [orphanedSessionsCount, setOrphanedSessionsCount] = useState(0);
-  
-  // Form state
+  const [deleting, setDeleting] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
   const [productName, setProductName] = useState("");
   const [productVision, setProductVision] = useState("");
-  const [workspacePath, setWorkspacePath] = useState("");
+
+  const userInitial = session?.user?.name?.[0]?.toUpperCase() ?? session?.user?.email?.[0]?.toUpperCase() ?? "?";
+  const userName = session?.user?.name ?? session?.user?.email?.split("@")[0] ?? "You";
 
   useEffect(() => {
-    const fetchProject = async () => {
-      try {
-        const user = auth.currentUser;
-        if (!user) {
-          toast.error('Please sign in');
-          router.push('/auth');
-          return;
-        }
-
-        const projectDoc = await getDoc(doc(db, 'projects', projectId));
-        if (!projectDoc.exists()) {
-          toast.error('Project not found');
-          router.push(`/${workspace}/projects`);
-          return;
-        }
-
-        const projectData = projectDoc.data() as Project;
-        setProject({ ...projectData, id: projectDoc.id });
-        
-        // Set form values
-        setProductName(projectData.productName);
-        setProductVision(projectData.productVision || "");
-        setWorkspacePath(projectData.workspacePath || "");
-
-        // Check for orphaned sessions from old workspace path
-        if (projectData.workspacePath) {
-          // This would require checking sessions - we'll implement this in the API
-          // For now, just show the UI
-        }
-      } catch (err: any) {
-        console.error('Error fetching project:', err);
-        toast.error('Failed to load project');
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    const unsubscribe = auth.onAuthStateChanged((user) => {
-      if (user) {
-        fetchProject();
-      } else {
-        router.push('/auth');
-      }
-    });
-
-    return () => unsubscribe();
-  }, [projectId, workspace, router]);
+    fetch(`/api/projects/${projectId}`)
+      .then((r) => r.json())
+      .then((d) => {
+        const p = d.project;
+        setProject(p);
+        setProductName(p?.productName ?? "");
+        setProductVision(p?.productVision ?? "");
+      })
+      .catch(() => toast.error("Failed to load project"))
+      .finally(() => setLoading(false));
+  }, [projectId]);
 
   const handleSave = async () => {
     setSaving(true);
     try {
-      const user = auth.currentUser;
-      if (!user) {
-        toast.error('Please sign in');
-        return;
-      }
-
-      // Get the directory name from the path
-      const workspaceName = workspacePath ? workspacePath.split('/').pop() || '' : '';
-
-      await updateDoc(doc(db, 'projects', projectId), {
-        productName,
-        productVision,
-        workspacePath,
-        workspaceName,
-        updatedAt: serverTimestamp(),
+      const res = await fetch(`/api/projects/${projectId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ productName, productVision }),
       });
-
-      toast.success('Project settings saved!');
-      
-      // Refresh project data
-      const projectDoc = await getDoc(doc(db, 'projects', projectId));
-      if (projectDoc.exists()) {
-        setProject({ ...projectDoc.data() as Project, id: projectDoc.id });
+      if (res.ok) {
+        toast.success("Saved");
+        setProject((p) => p ? { ...p, productName, productVision } : p);
+      } else {
+        toast.error("Failed to save");
       }
-    } catch (error) {
-      console.error('Error saving project:', error);
-      toast.error('Failed to save settings');
+    } catch {
+      toast.error("An error occurred");
     } finally {
       setSaving(false);
     }
   };
 
-  const handleSelectDirectory = async () => {
+  const handleDelete = async () => {
+    if (!confirmDelete) { setConfirmDelete(true); return; }
+    setDeleting(true);
     try {
-      // Check if File System Access API is supported
-      if ('showDirectoryPicker' in window) {
-        const dirHandle = await (window as any).showDirectoryPicker({
-          mode: 'read',
-        });
-        
-        if (dirHandle?.name) {
-          // Provide a path hint (browsers don't expose full paths for security)
-          const pathHint = `~/projects/${dirHandle.name}`;
-          setWorkspacePath(pathHint);
-          
-          toast.info('Update the path to match your actual folder location', {
-            description: 'You can get the full path from Finder/Explorer or your terminal'
-          });
-        }
+      const res = await fetch("/api/projects/delete", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ projectId }),
+      });
+      if (res.ok) {
+        toast.success("Project deleted");
+        router.push(`/${workspace}/projects`);
       } else {
-        toast.error('Directory picker not supported in this browser', {
-          description: 'Please enter the path manually or use Chrome/Edge'
-        });
-      }
-    } catch (error: any) {
-      // User cancelled or denied permission
-      if (error.name !== 'AbortError') {
-        console.error('Error selecting directory:', error);
-        toast.error('Failed to select directory');
+        toast.error("Failed to delete project");
       }
+    } catch {
+      toast.error("An error occurred");
+    } finally {
+      setDeleting(false);
     }
   };
 
   if (loading) {
     return (
-      <div className="flex h-full items-center justify-center">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-      </div>
-    );
-  }
-
-  if (!project) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <p className="text-muted-foreground">Project not found</p>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit, sans-serif" }}>
+        <Loader2 style={{ width: 24, height: 24, color: "#a09a90" }} className="animate-spin" />
       </div>
     );
   }
 
   return (
-    <div className="flex h-full flex-col overflow-auto">
-      {/* Header */}
-      <div className="border-b px-6 py-4">
-        <h1 className="text-2xl font-bold">Project Settings</h1>
-        <p className="text-sm text-muted-foreground mt-1">
-          Manage your project configuration and workspace settings
+    <div
+      className="vibn-enter"
+      style={{ padding: "28px 32px", overflow: "auto", fontFamily: "Outfit, sans-serif" }}
+    >
+      <div style={{ maxWidth: 480 }}>
+        <h3 style={{ fontFamily: "Newsreader, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 4 }}>
+          Project Settings
+        </h3>
+        <p style={{ fontSize: "0.8rem", color: "#a09a90", marginBottom: 24 }}>
+          Configure {project?.productName ?? "this project"}
         </p>
-      </div>
 
-      {/* Content */}
-      <div className="flex-1 overflow-auto p-6">
-        <div className="mx-auto max-w-4xl space-y-6">
-          
-          {/* General Settings */}
-          <Card>
-            <CardHeader>
-              <CardTitle>General Information</CardTitle>
-              <CardDescription>
-                Basic details about your project
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="productName">Product Name</Label>
-                <Input
-                  id="productName"
-                  value={productName}
-                  onChange={(e) => setProductName(e.target.value)}
-                  placeholder="My Awesome Product"
-                />
-              </div>
-              
-              <div className="space-y-2">
-                <Label htmlFor="productVision">Product Vision</Label>
-                <Textarea
-                  id="productVision"
-                  value={productVision}
-                  onChange={(e) => setProductVision(e.target.value)}
-                  placeholder="Describe what you're building and who it's for..."
-                  rows={4}
-                />
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Workspace Settings */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Workspace Path</CardTitle>
-              <CardDescription>
-                The local directory where you're coding this project
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <Alert>
-                <AlertCircle className="h-4 w-4" />
-                <AlertTitle>Why update this?</AlertTitle>
-                <AlertDescription>
-                  If you renamed your project folder or moved it to a different location, 
-                  update the path here so Vibn can correctly track your coding sessions.
-                </AlertDescription>
-              </Alert>
-
-              <div className="space-y-2">
-                <Label htmlFor="workspacePath">Local Workspace Path</Label>
-                <div className="flex gap-2">
-                  <Input
-                    id="workspacePath"
-                    value={workspacePath}
-                    onChange={(e) => setWorkspacePath(e.target.value)}
-                    placeholder="/Users/you/projects/my-project"
-                    className="flex-1"
-                  />
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={handleSelectDirectory}
-                  >
-                    <FolderOpen className="h-4 w-4" />
-                  </Button>
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  💡 <strong>Tip:</strong> Right-click your project folder → Get Info (Mac) or Properties (Windows) to copy the full path
-                </p>
-              </div>
-
-              {project.workspacePath && workspacePath !== project.workspacePath && (
-                <Alert className="border-orange-500/50 bg-orange-500/10">
-                  <AlertCircle className="h-4 w-4 text-orange-600" />
-                  <AlertTitle>Path Changed</AlertTitle>
-                  <AlertDescription>
-                    You're changing the workspace path from <code className="text-xs bg-muted px-1 py-0.5 rounded">{project.workspacePath}</code> to <code className="text-xs bg-muted px-1 py-0.5 rounded">{workspacePath}</code>.
-                    <br /><br />
-                    After saving, Vibn will track sessions from the new path. Any existing sessions from the old path will remain associated with this project.
-                  </AlertDescription>
-                </Alert>
-              )}
-            </CardContent>
-          </Card>
-
-          {/* Connected Services */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Connected Services</CardTitle>
-              <CardDescription>
-                External integrations for this project
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-3">
-              <div className="flex items-center justify-between p-3 border rounded-lg">
-                <div>
-                  <p className="font-medium">GitHub Repository</p>
-                  <p className="text-sm text-muted-foreground">
-                    {project.githubRepo || 'Not connected'}
-                  </p>
-                </div>
-                {project.githubRepo && (
-                  <a 
-                    href={`https://github.com/${project.githubRepo}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-sm text-blue-600 hover:underline"
-                  >
-                    View on GitHub →
-                  </a>
-                )}
-              </div>
-
-              <div className="flex items-center justify-between p-3 border rounded-lg">
-                <div>
-                  <p className="font-medium">ChatGPT Project</p>
-                  <p className="text-sm text-muted-foreground">
-                    {project.chatgptUrl ? 'Connected' : 'Not connected'}
-                  </p>
-                </div>
-                {project.chatgptUrl && (
-                  <a 
-                    href={project.chatgptUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-sm text-blue-600 hover:underline"
-                  >
-                    Open ChatGPT →
-                  </a>
-                )}
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Save Button */}
-          <div className="flex justify-end gap-3 pt-4">
-            <Button
-              variant="outline"
-              onClick={() => router.push(`/${workspace}/project/${projectId}/overview`)}
+        {/* General */}
+        <InfoCard>
+          <SectionLabel>General</SectionLabel>
+          <FieldLabel>Project name</FieldLabel>
+          <input
+            value={productName}
+            onChange={(e) => setProductName(e.target.value)}
+            style={{ width: "100%", padding: "9px 13px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#faf8f5", fontSize: "0.84rem", color: "#1a1a1a", marginBottom: 16, boxSizing: "border-box" }}
+          />
+          <FieldLabel>Description</FieldLabel>
+          <textarea
+            value={productVision}
+            onChange={(e) => setProductVision(e.target.value)}
+            rows={3}
+            style={{ width: "100%", padding: "9px 13px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#faf8f5", fontSize: "0.84rem", color: "#1a1a1a", resize: "vertical", boxSizing: "border-box" }}
+          />
+          <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 16 }}>
+            <button
+              onClick={handleSave}
+              disabled={saving}
+              style={{ padding: "8px 20px", borderRadius: 7, border: "none", background: "#1a1a1a", color: "#fff", fontSize: "0.78rem", fontWeight: 600, cursor: saving ? "not-allowed" : "pointer", opacity: saving ? 0.7 : 1, display: "flex", alignItems: "center", gap: 6 }}
             >
-              Cancel
-            </Button>
-            <Button onClick={handleSave} disabled={saving}>
-              {saving ? (
-                <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  Saving...
-                </>
-              ) : (
-                <>
-                  <Save className="mr-2 h-4 w-4" />
-                  Save Changes
-                </>
-              )}
-            </Button>
+              {saving && <Loader2 style={{ width: 12, height: 12 }} className="animate-spin" />}
+              {saving ? "Saving…" : "Save"}
+            </button>
+          </div>
+        </InfoCard>
+
+        {/* Repo */}
+        {project?.giteaRepoUrl && (
+          <InfoCard>
+            <SectionLabel>Repository</SectionLabel>
+            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+              <div style={{ flex: 1 }}>
+                <div style={{ fontSize: "0.84rem", fontFamily: "IBM Plex Mono, monospace", color: "#1a1a1a", fontWeight: 500 }}>{project.giteaRepo}</div>
+              </div>
+              <a href={project.giteaRepoUrl} target="_blank" rel="noopener noreferrer"
+                style={{ padding: "5px 12px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#fff", color: "#1a1a1a", fontSize: "0.7rem", fontWeight: 600, textDecoration: "none" }}>
+                View ↗
+              </a>
+            </div>
+          </InfoCard>
+        )}
+
+        {/* Collaborators */}
+        <InfoCard>
+          <SectionLabel>Collaborators</SectionLabel>
+          <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 0" }}>
+            <div style={{ width: 28, height: 28, borderRadius: "50%", background: "#f0ece4", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.68rem", fontWeight: 600, color: "#8a8478" }}>
+              {userInitial}
+            </div>
+            <span style={{ flex: 1, fontSize: "0.82rem", color: "#1a1a1a" }}>{userName}</span>
+            <span style={{ display: "inline-flex", alignItems: "center", padding: "3px 9px", borderRadius: 4, fontSize: "0.68rem", fontWeight: 600, color: "#6b6560", background: "#f0ece4" }}>Owner</span>
+          </div>
+          <button
+            style={{ width: "100%", marginTop: 12, padding: "8px 16px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#fff", color: "#1a1a1a", fontSize: "0.75rem", fontWeight: 600, cursor: "pointer" }}
+            onClick={() => toast.info("Team invites coming soon")}
+          >
+            + Invite to project
+          </button>
+        </InfoCard>
+
+        {/* Export */}
+        <InfoCard>
+          <SectionLabel>Export</SectionLabel>
+          <p style={{ fontSize: "0.82rem", color: "#6b6560", marginBottom: 14, lineHeight: 1.6 }}>
+            Download your PRD or project data for external use.
+          </p>
+          <div style={{ display: "flex", gap: 8 }}>
+            <button
+              style={{ padding: "8px 16px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#fff", color: "#1a1a1a", fontSize: "0.75rem", fontWeight: 600, cursor: "pointer" }}
+              onClick={() => toast.info("PDF export coming soon")}
+            >
+              Export PRD as PDF
+            </button>
+            <button
+              style={{ padding: "8px 16px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#fff", color: "#1a1a1a", fontSize: "0.75rem", fontWeight: 600, cursor: "pointer" }}
+              onClick={async () => {
+                const res = await fetch(`/api/projects/${projectId}`);
+                const data = await res.json();
+                const blob = new Blob([JSON.stringify(data.project, null, 2)], { type: "application/json" });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement("a");
+                a.href = url; a.download = `${productName.replace(/\s+/g, "-")}.json`; a.click();
+                URL.revokeObjectURL(url);
+              }}
+            >
+              Export as JSON
+            </button>
+          </div>
+        </InfoCard>
+
+        {/* Danger zone */}
+        <div style={{ background: "#fff", border: "1px solid #f5d5d5", borderRadius: 10, padding: "20px" }}>
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+            <div>
+              <div style={{ fontSize: "0.84rem", fontWeight: 500, color: "#d32f2f" }}>Delete project</div>
+              <div style={{ fontSize: "0.75rem", color: "#a09a90" }}>
+                {confirmDelete ? "Click again to confirm — this cannot be undone" : "This action cannot be undone"}
+              </div>
+            </div>
+            <button
+              onClick={handleDelete}
+              disabled={deleting}
+              style={{ padding: "6px 14px", borderRadius: 7, border: "1px solid #f5d5d5", background: confirmDelete ? "#d32f2f" : "#fff", color: confirmDelete ? "#fff" : "#d32f2f", fontSize: "0.72rem", fontWeight: 600, cursor: "pointer", transition: "all 0.15s", display: "flex", alignItems: "center", gap: 6 }}
+            >
+              {deleting && <Loader2 style={{ width: 12, height: 12 }} className="animate-spin" />}
+              {confirmDelete ? "Confirm Delete" : "Delete"}
+            </button>
           </div>
         </div>
       </div>
     </div>
   );
 }
-