From d60d300a6409a9791da385038a1349a7b1212528 Mon Sep 17 00:00:00 2001 From: Mark Henderson Date: Mon, 2 Mar 2026 16:33:09 -0800 Subject: [PATCH] Complete Stackless parity: Activity, Deploy, Settings, header desc MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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]/activity/layout.tsx | 20 + app/[workspace]/activity/page.tsx | 156 ++++++ .../project/[projectId]/deployment/page.tsx | 257 ++++++--- .../project/[projectId]/layout.tsx | 3 + .../project/[projectId]/settings/page.tsx | 501 +++++++----------- components/layout/project-shell.tsx | 12 + components/layout/vibn-sidebar.tsx | 12 +- 7 files changed, 595 insertions(+), 366 deletions(-) create mode 100644 app/[workspace]/activity/layout.tsx create mode 100644 app/[workspace]/activity/page.tsx diff --git a/app/[workspace]/activity/layout.tsx b/app/[workspace]/activity/layout.tsx new file mode 100644 index 0000000..8b03595 --- /dev/null +++ b/app/[workspace]/activity/layout.tsx @@ -0,0 +1,20 @@ +"use client"; + +import { VIBNSidebar } from "@/components/layout/vibn-sidebar"; +import { useParams } from "next/navigation"; +import { ReactNode } from "react"; +import { Toaster } from "sonner"; + +export default function ActivityLayout({ children }: { children: ReactNode }) { + const params = useParams(); + const workspace = params.workspace as string; + return ( + <> +
+ +
{children}
+
+ + + ); +} diff --git a/app/[workspace]/activity/page.tsx b/app/[workspace]/activity/page.tsx new file mode 100644 index 0000000..8fcb00d --- /dev/null +++ b/app/[workspace]/activity/page.tsx @@ -0,0 +1,156 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { useParams } from "next/navigation"; +import Link from "next/link"; + +interface ActivityItem { + id: string; + projectId: string; + projectName: string; + action: string; + type: "atlas" | "build" | "deploy" | "user"; + createdAt: string; +} + +function timeAgo(dateStr: string): string { + const date = new Date(dateStr); + if (isNaN(date.getTime())) return "—"; + const diff = (Date.now() - date.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`; + const days = Math.floor(diff / 86400); + if (days === 1) return "Yesterday"; + if (days < 7) return `${days}d ago`; + return date.toLocaleDateString("en-US", { month: "short", day: "numeric" }); +} + +function typeColor(t: string) { + return t === "atlas" ? "#1a1a1a" : t === "build" ? "#3d5afe" : t === "deploy" ? "#2e7d32" : "#8a8478"; +} + +const FILTERS = [ + { id: "all", label: "All" }, + { id: "atlas", label: "Atlas" }, + { id: "build", label: "Builds" }, + { id: "deploy", label: "Deploys" }, + { id: "user", label: "You" }, +]; + +export default function ActivityPage() { + const params = useParams(); + const workspace = params.workspace as string; + const [filter, setFilter] = useState("all"); + const [items, setItems] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + fetch("/api/activity") + .then((r) => r.json()) + .then((d) => setItems(d.items ?? [])) + .catch(() => {}) + .finally(() => setLoading(false)); + }, []); + + const filtered = filter === "all" ? items : items.filter((a) => a.type === filter); + + return ( +
+

+ Activity +

+

+ Everything happening across your projects +

+ + {/* Filter pills */} +
+ {FILTERS.map((f) => ( + + ))} +
+ + {loading && ( +

Loading…

+ )} + + {/* Timeline */} + {!loading && filtered.length === 0 && ( +

No activity yet.

+ )} + + {!loading && filtered.length > 0 && ( +
+ {/* Vertical line */} +
+ + {filtered.map((item, i) => ( +
(e.currentTarget.style.background = "#fff")} + onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")} + > + {/* Timeline dot */} +
+ +
+
+ (e.currentTarget.style.textDecoration = "underline")} + onMouseLeave={(e) => (e.currentTarget.style.textDecoration = "none")} + > + {item.projectName} + + · + {timeAgo(item.createdAt)} +
+
+ {item.action} +
+
+
+ ))} +
+ )} +
+ ); +} diff --git a/app/[workspace]/project/[projectId]/deployment/page.tsx b/app/[workspace]/project/[projectId]/deployment/page.tsx index 5c9b33d..f6c020d 100644 --- a/app/[workspace]/project/[projectId]/deployment/page.tsx +++ b/app/[workspace]/project/[projectId]/deployment/page.tsx @@ -1,69 +1,204 @@ -import { - Card, - CardContent, - CardDescription, - CardHeader, - CardTitle, -} from "@/components/ui/card"; -import { Server } from "lucide-react"; -import { PageHeader } from "@/components/layout/page-header"; +"use client"; -// Mock project data -const MOCK_PROJECT = { - id: "1", - name: "AI Proxy", - emoji: "🤖", -}; +import { useEffect, useState } from "react"; +import { useParams } from "next/navigation"; +import { toast } from "sonner"; -interface PageProps { - params: Promise<{ projectId: string }>; +interface Project { + id: string; + productName: string; + status?: string; + giteaRepoUrl?: string; + giteaRepo?: string; + theiaWorkspaceUrl?: string; + coolifyDeployUrl?: string; + customDomain?: string; + prd?: string; } -export default async function DeploymentPage({ params }: PageProps) { - const { projectId } = await params; - +function SectionLabel({ children }: { children: React.ReactNode }) { return ( - <> - - -
-
- {/* Hero Section */} - - -
-
- -
-
- Deployment - - Manage deployments, monitor environments, and track releases - -
-
- - -
-
- -
-

Coming Soon

-

- Connect your hosting platforms to manage deployments, view logs, - and monitor your application's health across all environments. -

-
- - -
-
- +
+ {children} +
); } +function InfoCard({ children, style = {} }: { children: React.ReactNode; style?: React.CSSProperties }) { + return ( +
+ {children} +
+ ); +} + +export default function DeploymentPage() { + const params = useParams(); + const projectId = params.projectId as string; + const [project, setProject] = useState(null); + const [loading, setLoading] = useState(true); + const [customDomainInput, setCustomDomainInput] = useState(""); + const [connecting, setConnecting] = useState(false); + + useEffect(() => { + fetch(`/api/projects/${projectId}`) + .then((r) => r.json()) + .then((d) => setProject(d.project)) + .catch(() => {}) + .finally(() => setLoading(false)); + }, [projectId]); + + const handleConnectDomain = async () => { + if (!customDomainInput.trim()) return; + setConnecting(true); + await new Promise((r) => setTimeout(r, 800)); + toast.info("Domain connection coming soon — we'll hook this to Coolify."); + setConnecting(false); + }; + + if (loading) { + return ( +
+ Loading… +
+ ); + } + + const hasDeploy = Boolean(project?.coolifyDeployUrl || project?.theiaWorkspaceUrl); + const hasRepo = Boolean(project?.giteaRepoUrl); + const hasPRD = Boolean(project?.prd); + + return ( +
+
+

+ Deployment +

+

+ Links, environments, and hosting for {project?.productName ?? "this project"} +

+ + {/* Project URLs */} + + Project URLs + {hasDeploy ? ( + <> + {project?.coolifyDeployUrl && ( +
+
▲
+
+
Staging
+
{project.coolifyDeployUrl}
+
+ + Open ↗ + +
+ )} + {project?.customDomain && ( +
+
●
+
+
Production
+
{project.customDomain}
+
+ SSL Active + + Open ↗ + +
+ )} + {project?.giteaRepoUrl && ( +
+
⚙
+
+
Build repo
+
{project.giteaRepo}
+
+ + View ↗ + +
+ )} + + ) : ( +
+

+ {!hasPRD + ? "Complete your PRD with Atlas first, then build and deploy." + : !hasRepo + ? "No repository yet — the Architect agent will scaffold one from your PRD." + : "No deployment yet — kick off a build to get a live URL."} +

+
+ )} + + + {/* Custom domain */} + {hasDeploy && !project?.customDomain && ( + + Custom Domain +

+ Point your own domain to this project. SSL certificates are handled automatically. +

+
+ setCustomDomainInput(e.target.value)} + style={{ flex: 1, padding: "9px 13px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#faf8f5", fontSize: "0.84rem", fontFamily: "IBM Plex Mono, monospace", color: "#1a1a1a" }} + /> + +
+ + )} + + {/* Environment variables */} + + Environment Variables + {hasDeploy ? ( +

+ Manage environment variables in Coolify for your deployed services. + {project?.coolifyDeployUrl && ( + <> Open Coolify ↗ + )} +

+ ) : ( +

Available after first build completes.

+ )} + + + {/* Deploy history */} + + Deploy History +

+ {project?.status === "live" + ? "Deploy history will appear here." + : "No deploys yet."} +

+ +
+
+ ); +} diff --git a/app/[workspace]/project/[projectId]/layout.tsx b/app/[workspace]/project/[projectId]/layout.tsx index 73e728d..bffa3e7 100644 --- a/app/[workspace]/project/[projectId]/layout.tsx +++ b/app/[workspace]/project/[projectId]/layout.tsx @@ -3,6 +3,7 @@ import { query } from "@/lib/db-postgres"; interface ProjectData { name: string; + description?: string; status?: string; progress?: number; discoveryPhase?: number; @@ -22,6 +23,7 @@ async function getProjectData(projectId: string): Promise { const { data, created_at, updated_at } = rows[0]; return { name: data?.productName || data?.name || "Project", + description: data?.productVision || data?.description, status: data?.status, progress: data?.progress ?? 0, discoveryPhase: data?.discoveryPhase ?? 0, @@ -52,6 +54,7 @@ export default async function ProjectLayout({ workspace={workspace} projectId={projectId} projectName={project.name} + projectDescription={project.description} projectStatus={project.status} projectProgress={project.progress} discoveryPhase={project.discoveryPhase} diff --git a/app/[workspace]/project/[projectId]/settings/page.tsx b/app/[workspace]/project/[projectId]/settings/page.tsx index afda2b9..231b2ac 100644 --- a/app/[workspace]/project/[projectId]/settings/page.tsx +++ b/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 ( +
+ {children} +
+ ); +} + +function FieldLabel({ children }: { children: React.ReactNode }) { + return ( +
+ {children} +
+ ); +} + +function InfoCard({ children, style = {} }: { children: React.ReactNode; style?: React.CSSProperties }) { + return ( +
+ {children} +
+ ); } 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(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 ( -
- -
- ); - } - - if (!project) { - return ( -
-

Project not found

+
+
); } return ( -
- {/* Header */} -
-

Project Settings

-

- Manage your project configuration and workspace settings +

+
+

+ Project Settings +

+

+ Configure {project?.productName ?? "this project"}

-
- {/* Content */} -
-
- - {/* General Settings */} - - - General Information - - Basic details about your project - - - -
- - setProductName(e.target.value)} - placeholder="My Awesome Product" - /> -
- -
- -