Frontend Architecture

{
  "name": "frontend",
  "dependencies": {
    "next": "15.1.6",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "typescript": "^5"
  }
}

"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import MainDash from "@/components/MainDash";

export default function Home() {
  const router = useRouter();
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  
  // Check authentication on mount
  useEffect(() => {
    const authToken = localStorage.getItem("auth_token");
    const loginTimestamp = localStorage.getItem("login_timestamp");
    
    if (!authToken) {
      router.push("/login");
      return;
    }
    
    // Check 7-day session expiration
    const SESSION_DURATION = 7 * 24 * 60 * 60 * 1000;
    if (loginTimestamp) {
      const timeElapsed = Date.now() - parseInt(loginTimestamp);
      
      if (timeElapsed > SESSION_DURATION) {
        localStorage.removeItem("auth_token");
        localStorage.removeItem("user");
        localStorage.removeItem("login_timestamp");
        router.push("/login");
        return;
      }
    }
    
    setIsAuthenticated(true);
  }, [router]);
  
  // ... rest of component
}

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

// Subscribe to real-time updates
const subscription = supabase
  .channel('repo-updates')
  .on(
    'postgres_changes',
    {
      event: 'INSERT',
      schema: 'public',
      table: 'repo-updates'
    },
    (payload) => {
      console.log('New update:', payload.new);
      setStatus(payload.new.status);
      setMessage(payload.new.message);
      setCode(payload.new.code);
    }
  )
  .subscribe();

// Cleanup on unmount
return () => {
  subscription.unsubscribe();
};

data = {
    "status": "READING",
    "message": f"📖 Reading {filename}",
    "code": chat_completion.code_content
}
supabase_client.table("repo-updates").insert(data).execute()

data = {
    "status": "WRITING",
    "message": f"✍️ Updating {filename}",
    "code": job_report.refactored_code
}
supabase_client.table("repo-updates").insert(data).execute()

interface MainDashProps {
  sidebarOpen: boolean;
  repositories: Repository[];
  tasks: Task[];
}

export default function MainDash({
  sidebarOpen,
  repositories,
  tasks
}: MainDashProps) {
  const [selectedRepo, setSelectedRepo] = useState<string | null>(null);
  const [isProcessing, setIsProcessing] = useState(false);
  
  const handleProcessRepo = async (repoUrl: string) => {
    setIsProcessing(true);
    
    try {
      const token = localStorage.getItem('auth_token');
      const response = await fetch(`${API_URL}/update`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          repository: repoUrl,
          repository_owner: owner,
          repository_name: name
        })
      });
      
      const result = await response.json();
      // Handle result...
    } catch (error) {
      console.error('Processing failed:', error);
    } finally {
      setIsProcessing(false);
    }
  };
  
  // ... render UI
}

import { useEffect, useRef } from 'react';

interface GradientCanvasProps {
  gradientColor1: string;
  gradientColor2: string;
  gradientColor3: string;
}

export default function GradientCanvas({
  gradientColor1,
  gradientColor2,
  gradientColor3
}: GradientCanvasProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  
  useEffect(() => {
    // Animated gradient using Canvas API
    // Creates organic, flowing background effect
  }, [gradientColor1, gradientColor2, gradientColor3]);
  
  return (
    <canvas
      ref={canvasRef}
      className="fixed inset-0 z-0"
      style={{ filter: 'blur(100px)' }}
    />
  );
}

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      colors: {
        'forest-green': {
          50: '#f0fdf4',
          500: '#22c55e',
          900: '#14532d'
        }
      },
      animation: {
        'spin': 'spin 1s linear infinite',
        'pulse': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite'
      }
    }
  },
  plugins: [require('tailwindcss-animate')]
}

NEXT_PUBLIC_GITHUB_CLIENT_ID=your_github_oauth_client_id
NEXT_PUBLIC_API_URL=https://your-backend.onrender.com
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key