fix: use client-side polling for real-time project status updates (#118)

Components were stuck showing "CREATING" status because they received
static server-rendered props from layout.tsx that never updated after
initial page load.
Changes:
- StatusBar: Convert to client component, use useProject hook
- ProjectSidebar: Use useProject hook instead of static props
- ProjectContentWrapper: Use useProject hook for TerminalContainer
- layout.tsx: Pass projectId instead of full project object, simplify
  Prisma query to only check project existence
All components now use useProject hook with 3s polling interval for
real-time status updates, matching PrimarySidebar behavior.

Author: Che-Zhu

app/projects/[id]/layout.tsx

@@ -23,15 +23,15 @@ export default async function ProjectLayout({
 
   const { id } = await params;
 
+  // Only need to check if project exists and belongs to user
+  // All components fetch their own data via useProject hook
   const project = await prisma.project.findFirst({
     where: {
       id: id,
       userId: session.user.id,
     },
-    include: {
-      sandboxes: true,
-      databases: true,
-      environments: true,
+    select: {
+      id: true,
     },
   });
 
@@ -48,20 +48,18 @@ export default async function ProjectLayout({
 
         {/* Secondary Sidebar - Project Settings */}
         <ProjectSidebar
-          project={project}
-          sandboxes={project.sandboxes}
-          envVars={project.environments}
+          projectId={id}
         />
 
         {/* Main Content Area */}
         <div className="flex-1 flex flex-col min-w-0 relative overflow-hidden">
-          <ProjectContentWrapper project={project} sandbox={project.sandboxes[0]}>
+          <ProjectContentWrapper projectId={id}>
             {children}
           </ProjectContentWrapper>
         </div>
       </div>
 
-      <StatusBar project={project} />
+      <StatusBar projectId={id} />
     </div>
   );
 }

app/projects/[id]/loading.tsx

@@ -20,15 +20,17 @@
 
 import { usePathname } from 'next/navigation';
 
-import { TerminalContainer, type TerminalContainerProps } from '@/components/terminal/terminal-container';
+import { TerminalContainer } from '@/components/terminal/terminal-container';
+import { useProject } from '@/hooks/use-project';
 
 import styles from './project-content-wrapper.module.css';
 
 // ============================================================================
 // Types
 // ============================================================================
 
-interface ProjectContentWrapperProps extends TerminalContainerProps {
+interface ProjectContentWrapperProps {
+  projectId: string;
   children: React.ReactNode;
 }
 
@@ -38,14 +40,17 @@ interface ProjectContentWrapperProps extends TerminalContainerProps {
 
 export function ProjectContentWrapper({
   children,
-  project,
-  sandbox,
+  projectId,
 }: ProjectContentWrapperProps) {
+  const { data: project } = useProject(projectId);
   const pathname = usePathname();
 
   // Determine which panel to display based on current route
   const isTerminalPage = pathname?.endsWith('/terminal') ?? false;
 
+  // Get sandbox from project data
+  const sandbox = project?.sandboxes?.[0];
+
   return (
     <div className={styles.wrapper}>
       {/* Terminal Panel - Persisted across navigation */}
@@ -57,11 +62,13 @@ export function ProjectContentWrapper({
         role="region"
         aria-label="Terminal Console"
       >
-        <TerminalContainer
-          project={project}
-          sandbox={sandbox}
-          isVisible={isTerminalPage}
-        />
+        {project && (
+          <TerminalContainer
+            project={project}
+            sandbox={sandbox}
+            isVisible={isTerminalPage}
+          />
+        )}
       </div>
 
       {/* Content Panel - Regular pages (overview, settings, env, etc.) */}

components/layout/project-content-wrapper.tsx

@@ -1,34 +1,32 @@
+'use client';
+
 import React from 'react';
-import { Prisma } from '@prisma/client';
 import { Box, Database } from 'lucide-react';
 
 import { RepoStatusIndicator } from '@/components/layout/repo-status-indicator';
+import { useProject } from '@/hooks/use-project';
 import { getStatusIconColor } from '@/lib/util/status-colors';
 
-type ProjectWithRelations = Prisma.ProjectGetPayload<{
-  include: {
-    sandboxes: true;
-    databases: true;
-    environments: true;
-  };
-}>;
-
 interface StatusBarProps {
-  project: ProjectWithRelations;
+  projectId: string;
 }
 
-export function StatusBar({ project }: StatusBarProps) {
-  const database = project.databases?.[0];
+export function StatusBar({ projectId }: StatusBarProps) {
+  const { data: project } = useProject(projectId);
+  
+  const database = project?.databases?.[0];
   const dbStatus = database?.status || 'CREATING';
-  const sandbox = project.sandboxes?.[0];
+  const sandbox = project?.sandboxes?.[0];
   const sbStatus = sandbox?.status || 'CREATING';
 
   return (
     <div className="h-6 bg-primary text-card-foreground [&_span]:text-card-foreground flex items-center justify-between px-2 text-xs select-none z-50">
       <div className="flex items-center gap-4">
-        <RepoStatusIndicator 
-          project={project}
-        />
+        {project && (
+          <RepoStatusIndicator 
+            project={project}
+          />
+        )}
 
       </div>
 

components/layout/status-bar.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useState } from 'react';
-import { Environment, Project, Sandbox } from '@prisma/client';
 import {
   ChevronLeft,
   ChevronRight,
@@ -16,15 +15,15 @@ import {
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
+import { useProject } from '@/hooks/use-project';
 import { cn } from '@/lib/utils';
 
 interface ProjectSidebarProps {
-  project: Project;
-  sandboxes: Sandbox[];
-  envVars: Environment[];
+  projectId: string;
 }
 
-export default function ProjectSidebar({ project }: ProjectSidebarProps) {
+export default function ProjectSidebar({ projectId }: ProjectSidebarProps) {
+  const { data: project } = useProject(projectId);
   const [isCollapsed, setIsCollapsed] = useState(false);
   const pathname = usePathname();
 
@@ -33,36 +32,36 @@ export default function ProjectSidebar({ project }: ProjectSidebarProps) {
       id: 'terminal',
       label: 'Web Terminal',
       icon: Terminal,
-      href: `/projects/${project.id}/terminal`,
+      href: `/projects/${projectId}/terminal`,
     },
-    { id: 'database', label: 'Database', icon: Database, href: `/projects/${project.id}/database` },
+    { id: 'database', label: 'Database', icon: Database, href: `/projects/${projectId}/database` },
   ];
 
   const configSections = [
     {
       id: 'environment',
       label: 'Environment Variables',
       icon: Package,
-      href: `/projects/${project.id}/environment`,
+      href: `/projects/${projectId}/environment`,
     },
     {
       id: 'secrets',
       label: 'Secret Configuration',
       icon: Key,
-      href: `/projects/${project.id}/secrets`,
+      href: `/projects/${projectId}/secrets`,
     },
-    { id: 'auth', label: 'Auth Configuration', icon: Shield, href: `/projects/${project.id}/auth` },
+    { id: 'auth', label: 'Auth Configuration', icon: Shield, href: `/projects/${projectId}/auth` },
     {
       id: 'payment',
       label: 'Payment Configuration',
       icon: CreditCard,
-      href: `/projects/${project.id}/payment`,
+      href: `/projects/${projectId}/payment`,
     },
     {
       id: 'github',
       label: 'GitHub Integration',
       icon: Github,
-      href: `/projects/${project.id}/github`,
+      href: `/projects/${projectId}/github`,
     },
   ];
 
@@ -76,7 +75,7 @@ export default function ProjectSidebar({ project }: ProjectSidebarProps) {
       {/* Header */}
       <div className="h-12 flex items-center justify-between px-3 border-b border-border">
         {!isCollapsed && (
-          <span className="text-sm font-medium text-foreground">Project {project.name}</span>
+          <span className="text-sm font-medium text-foreground">Project {project?.name ?? 'Loading...'}</span>
         )}
         <button
           onClick={() => setIsCollapsed(!isCollapsed)}