Initial commit

.env.example

@@ -0,0 +1,30 @@
+# Application settings
+APP_ENV=development
+JWT_SECRET=supersecretjwtkeypleasechangeinproduction12345
+JWT_ALGORITHM=HS256
+ACCESS_TOKEN_EXPIRE_MINUTES=1440
+
+# Databases
+DATABASE_URL=postgresql+asyncpg://postgres:postgres@localhost:5432/gmail2
+MONGODB_URI=mongodb://localhost:27017/
+MONGODB_DB=gmail2
+
+# Redis
+REDIS_HOST=localhost
+REDIS_PORT=6379
+
+# Mock email provider (set to true to run offline / simulated)
+MOCK_EMAIL_PROVIDER=true
+
+# Google API Credentials (required if MOCK_EMAIL_PROVIDER=false)
+GOOGLE_CLIENT_ID=your-google-client-id
+GOOGLE_CLIENT_SECRET=your-google-client-secret
+GOOGLE_REDIRECT_URI=http://localhost:8000/api/auth/callback
+
+# OpenAI API (required for AI agents)
+OPENAI_API_KEY=your-openai-api-key
+
+# Optional LangSmith Tracing
+LANGCHAIN_TRACING_V2=false
+LANGCHAIN_API_KEY=your-langchain-api-key
+LANGCHAIN_PROJECT=agentic-email-app

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

@@ -0,0 +1,87 @@
+# Environment files (Secrets)
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Python virtual environments & packages
+.venv/
+venv/
+env/
+ENV/
+python-local-packages/
+
+# Python caches and build files
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# Python testing & linting caches
+.pytest_cache/
+.tox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+.mypy_cache/
+.ruff_cache/
+
+# Node.js dependencies & builds (Frontend)
+node_modules/
+.next/
+out/
+frontend/node_modules/
+frontend/.next/
+frontend/out/
+.npm
+.eslintcache
+
+# Logs and schedule data
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+celerybeat-schedule
+celerybeat-schedule.*
+dump.rdb
+backend/celerybeat-schedule*
+
+# Local development task states & compaction artifacts
+.system_generated/
+scratch/
+Cwd/
+*.bak
+*.dat
+*.dir
+
+# Docker volumes and persistent state data
+pgdata/
+mongodata/
+grafanadata/
+
+# Operating system / IDE specific files
+.DS_Store
+Thumbs.db
+.idea/
+.vscode/
+*.swp
+*.swo
+*.suo

docker-compose.prod.yml

@@ -0,0 +1,126 @@
+services:
+  postgres:
+    image: postgres:15-alpine
+    container_name: gmail2_postgres_prod
+    restart: always
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: gmail2
+    ports:
+      - "5432:5432"
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+
+  mongodb:
+    image: mongo:6-jammy
+    container_name: gmail2_mongodb_prod
+    restart: always
+    ports:
+      - "27017:27017"
+    volumes:
+      - mongodata:/data/db
+
+  redis:
+    image: redis:7-alpine
+    container_name: gmail2_redis_prod
+    restart: always
+    ports:
+      - "6379:6379"
+
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    container_name: gmail2_backend_prod
+    restart: always
+    ports:
+      - "8000:8000"
+    env_file:
+      - .env
+    environment:
+      - DATABASE_URL=postgresql+asyncpg://postgres:postgres@postgres:5432/gmail2
+      - MONGODB_URI=mongodb://mongodb:27017/
+      - REDIS_HOST=redis
+      - REDIS_PORT=6379
+    depends_on:
+      - postgres
+      - mongodb
+      - redis
+
+  celery_worker:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    container_name: gmail2_celery_worker_prod
+    restart: always
+    command: celery -A app.tasks.celery_app.celery_app worker --loglevel=info -P solo
+    env_file:
+      - .env
+    environment:
+      - DATABASE_URL=postgresql+asyncpg://postgres:postgres@postgres:5432/gmail2
+      - MONGODB_URI=mongodb://mongodb:27017/
+      - REDIS_HOST=redis
+      - REDIS_PORT=6379
+    depends_on:
+      - backend
+      - redis
+
+  celery_beat:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    container_name: gmail2_celery_beat_prod
+    restart: always
+    command: celery -A app.tasks.celery_app.celery_app beat --loglevel=info
+    env_file:
+      - .env
+    environment:
+      - DATABASE_URL=postgresql+asyncpg://postgres:postgres@postgres:5432/gmail2
+      - MONGODB_URI=mongodb://mongodb:27017/
+      - REDIS_HOST=redis
+      - REDIS_PORT=6379
+    depends_on:
+      - backend
+      - redis
+
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+      args:
+        - NEXT_PUBLIC_API_URL=http://localhost:8000
+        - NEXT_PUBLIC_WS_URL=ws://localhost:8000
+    container_name: gmail2_frontend_prod
+    restart: always
+    ports:
+      - "3000:3000"
+    depends_on:
+      - backend
+
+  prometheus:
+    image: prom/prometheus:latest
+    container_name: gmail2_prometheus_prod
+    restart: always
+    volumes:
+      - ./prometheus.yml:/etc/prometheus/prometheus.yml
+    ports:
+      - "9090:9090"
+    depends_on:
+      - backend
+
+  grafana:
+    image: grafana/grafana:latest
+    container_name: gmail2_grafana_prod
+    restart: always
+    ports:
+      - "3001:3000"
+    depends_on:
+      - prometheus
+    volumes:
+      - grafanadata:/var/lib/grafana
+
+volumes:
+  pgdata:
+  mongodata:
+  grafanadata:

docker-compose.yml

@@ -0,0 +1,56 @@
+services:
+  postgres:
+    image: postgres:15-alpine
+    container_name: gmail2_postgres
+    restart: always
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: gmail2
+    ports:
+      - "5432:5432"
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+
+  mongodb:
+    image: mongo:6-jammy
+    container_name: gmail2_mongodb
+    restart: always
+    ports:
+      - "27017:27017"
+    volumes:
+      - mongodata:/data/db
+
+  redis:
+    image: redis:7-alpine
+    container_name: gmail2_redis
+    restart: always
+    ports:
+      - "6379:6379"
+
+  prometheus:
+    image: prom/prometheus:latest
+    container_name: gmail2_prometheus
+    restart: always
+    volumes:
+      - ./prometheus.yml:/etc/prometheus/prometheus.yml
+    ports:
+      - "9090:9090"
+    depends_on:
+      - postgres
+
+  grafana:
+    image: grafana/grafana:latest
+    container_name: gmail2_grafana
+    restart: always
+    ports:
+      - "3001:3000"
+    depends_on:
+      - prometheus
+    volumes:
+      - grafanadata:/var/lib/grafana
+
+volumes:
+  pgdata:
+  mongodata:
+  grafanadata:

frontend/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/AGENTS.md

@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->

frontend/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

frontend/Dockerfile

@@ -0,0 +1,23 @@
+FROM node:18-alpine AS builder
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+COPY . .
+ENV NEXT_TELEMETRY_DISABLED 1
+ARG NEXT_PUBLIC_API_URL
+ARG NEXT_PUBLIC_WS_URL
+ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
+ENV NEXT_PUBLIC_WS_URL=$NEXT_PUBLIC_WS_URL
+RUN npm run build
+
+FROM node:18-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+
+EXPOSE 3000
+CMD ["npm", "start"]

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/app/(app)/agent/page.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { Terminal, ShieldAlert, CheckCircle, XCircle, ArrowLeft, RefreshCw } from 'lucide-react';
+import AgentRunTimeline from '@/components/AgentRunTimeline';
+import { API_BASE_URL } from '@/app/config';
+
+interface AgentRunListItem {
+  id: string;
+  action_type: string;
+  status: string;
+  started_at: string;
+  completed_at: string | null;
+  email_subject: string | null;
+  email_id: string | null;
+}
+
+export default function AgentDashboard() {
+  const router = useRouter();
+  const [runs, setRuns] = useState<AgentRunListItem[]>([]);
+  const [selectedRunId, setSelectedRunId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    fetchRuns();
+  }, []);
+
+  const fetchRuns = async () => {
+    setIsLoading(true);
+    const token = localStorage.getItem('token') || '';
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/agent/runs`, {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+        },
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setRuns(data);
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status.toUpperCase()) {
+      case 'COMPLETED':
+        return <CheckCircle size={15} className="text-emerald-400" />;
+      case 'FAILED':
+        return <XCircle size={15} className="text-red-400" />;
+      default:
+        return <RefreshCw size={15} className="text-purple-400 animate-spin" />;
+    }
+  };
+
+  const getStatusClass = (status: string) => {
+    switch (status.toUpperCase()) {
+      case 'COMPLETED':
+        return 'text-emerald-400 bg-emerald-950/20 border-emerald-900/30';
+      case 'FAILED':
+        return 'text-red-400 bg-red-950/20 border-red-900/30';
+      default:
+        return 'text-purple-400 bg-purple-950/20 border-purple-900/30';
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#06060c] px-8 py-10 relative overflow-hidden text-slate-200">
+      {/* Background glow */}
+      <div className="absolute top-1/4 right-1/4 w-[400px] h-[400px] bg-purple-950/5 rounded-full blur-[120px] pointer-events-none" />
+
+      <div className="max-w-6xl mx-auto flex flex-col gap-8 relative z-10">
+        {/* Header */}
+        <div className="flex justify-between items-center">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => router.push('/inbox')}
+              className="p-2 hover:bg-slate-900 border border-slate-900 hover:border-slate-800 rounded-xl transition text-slate-400 hover:text-white cursor-pointer"
+            >
+              <ArrowLeft size={16} />
+            </button>
+            <div>
+              <h1 className="text-2xl font-bold text-white tracking-wide">Agent Audit Hub</h1>
+              <p className="text-xs text-slate-500 mt-1">Audit historic runs and step-by-step thinking logs</p>
+            </div>
+          </div>
+          <button
+            onClick={fetchRuns}
+            disabled={isLoading}
+            className="bg-slate-950 hover:bg-slate-900 border border-slate-800 text-slate-300 hover:text-white font-medium py-2 px-4 rounded-xl text-xs flex items-center gap-2 cursor-pointer transition"
+          >
+            <RefreshCw size={14} className={isLoading ? 'animate-spin' : ''} />
+            <span>Refresh Audit</span>
+          </button>
+        </div>
+
+        {/* Workspace Layout */}
+        <div className="grid grid-cols-12 gap-8">
+          {/* Runs list column */}
+          <div className="col-span-7 flex flex-col gap-4">
+            <div className="glass-panel border-slate-900 rounded-2xl overflow-hidden">
+              <table className="w-full text-left border-collapse">
+                <thead>
+                  <tr className="bg-slate-950/50 border-b border-slate-900/60 text-slate-500 text-[10px] uppercase font-bold tracking-widest">
+                    <th className="py-4 px-6">Task Type</th>
+                    <th className="py-4 px-6">Target Subject</th>
+                    <th className="py-4 px-6">Status</th>
+                    <th className="py-4 px-6">Start Time</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-900/40 text-xs">
+                  {runs.length === 0 ? (
+                    <tr>
+                      <td colSpan={4} className="py-12 text-center text-slate-500 italic">
+                        No agent run history found. Try syncing some emails first.
+                      </td>
+                    </tr>
+                  ) : (
+                    runs.map((run) => {
+                      const isSelected = selectedRunId === run.id;
+                      return (
+                        <tr
+                          key={run.id}
+                          onClick={() => setSelectedRunId(run.id)}
+                          className={`hover:bg-slate-900/20 cursor-pointer transition ${
+                            isSelected ? 'bg-purple-950/10' : ''
+                          }`}
+                        >
+                          <td className="py-4 px-6 font-semibold text-slate-200">
+                            {run.action_type}
+                          </td>
+                          <td className="py-4 px-6 text-slate-400 font-medium truncate max-w-[200px]">
+                            {run.email_subject || 'System Trigger'}
+                          </td>
+                          <td className="py-4 px-6">
+                            <span className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded border text-[10px] uppercase font-bold ${getStatusClass(run.status)}`}>
+                              {getStatusIcon(run.status)}
+                              <span>{run.status}</span>
+                            </span>
+                          </td>
+                          <td className="py-4 px-6 font-mono text-slate-500 font-medium">
+                            {new Date(run.started_at).toLocaleTimeString()}
+                          </td>
+                        </tr>
+                      );
+                    })
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          {/* Timeline Audit Logs column */}
+          <div className="col-span-5">
+            {selectedRunId ? (
+              <div className="glass-panel border-purple-500/10 rounded-2xl p-6 h-[550px] overflow-y-auto">
+                <AgentRunTimeline runId={selectedRunId} />
+              </div>
+            ) : (
+              <div className="glass-panel border-slate-900 rounded-2xl p-8 flex flex-col items-center justify-center text-slate-500 text-center h-[350px] gap-3">
+                <Terminal size={24} className="stroke-[1.5]" />
+                <div>
+                  <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1">Select Execution</h3>
+                  <p className="text-[11px] leading-relaxed max-w-[200px] mx-auto">
+                    Click an agent row on the left to review its detailed planning and API integration logs.
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/(app)/inbox/page.tsx

@@ -0,0 +1,449 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { Inbox, FileText, Settings, LogOut, Terminal, Activity, AlertOctagon } from 'lucide-react';
+
+import EmailList from '@/components/EmailList';
+import EmailDetail from '@/components/EmailDetail';
+import StreamingDraft from '@/components/StreamingDraft';
+import AgentStatusBar from '@/components/AgentStatusBar';
+import AgentRunTimeline from '@/components/AgentRunTimeline';
+import { API_BASE_URL, WS_BASE_URL } from '@/app/config';
+
+interface EmailListItem {
+  id: string;
+  subject?: string;
+  sender: string;
+  received_at: string;
+  category: string;
+  is_read: boolean;
+  is_starred: boolean;
+  thread_id?: string;
+  has_attachment: boolean;
+}
+
+interface AgentStatus {
+  status: string;
+  progress: number;
+  active: boolean;
+  runId?: string;
+}
+
+interface AlertToast {
+  id: string;
+  message: string;
+  emailId?: string;
+}
+
+export default function InboxPage() {
+  const router = useRouter();
+  const [token, setToken] = useState<string | null>(null);
+  const [userEmail, setUserEmail] = useState<string>('user');
+
+  // Data states
+  const [emails, setEmails] = useState<EmailListItem[]>([]);
+  const [selectedEmail, setSelectedEmail] = useState<any | null>(null);
+  const [selectedEmailId, setSelectedEmailId] = useState<string | null>(null);
+  const [activeCategory, setActiveCategory] = useState<string | null>(null);
+  
+  // Status states
+  const [isSyncing, setIsSyncing] = useState(false);
+  const [emailLoading, setEmailLoading] = useState(false);
+  const [agentStatus, setAgentStatus] = useState<AgentStatus>({
+    status: 'Sleeping',
+    progress: 100,
+    active: false,
+  });
+  
+  // Timeline audit log states
+  const [activeAuditRunId, setActiveAuditRunId] = useState<string | null>(null);
+  const [showAuditPanel, setShowAuditPanel] = useState(false);
+  const [alerts, setAlerts] = useState<AlertToast[]>([]);
+
+  const wsRef = useRef<WebSocket | null>(null);
+
+  // Authenticate user & load first data
+  useEffect(() => {
+    const savedToken = localStorage.getItem('token');
+    if (!savedToken) {
+      router.push('/login');
+      return;
+    }
+    setToken(savedToken);
+    
+    const savedEmail = localStorage.getItem('email');
+    if (savedEmail) {
+      setUserEmail(savedEmail);
+    }
+  }, [router]);
+
+  // Fetch emails when category or token changes
+  useEffect(() => {
+    if (token) {
+      fetchEmails();
+    }
+  }, [token, activeCategory]);
+
+  // Handle WebSocket updates
+  useEffect(() => {
+    if (!token) return;
+
+    // Connect to WebSocket Server
+    const wsUrl = `${WS_BASE_URL}/ws?token=${encodeURIComponent(token)}`;
+    const ws = new WebSocket(wsUrl);
+    wsRef.current = ws;
+
+    ws.onopen = () => {
+      console.log('WebSocket connection established.');
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        console.log('WS update received:', data);
+        
+        // WebSocket payload format:
+        // { "status": "Analyzing email...", "progress": 40, "run_id": "...", "email_id": "...", "type": "alert" }
+        const status = data.status || '';
+        const progress = typeof data.progress === 'number' ? data.progress : 100;
+        const runId = data.run_id;
+        const emailId = data.email_id;
+        const type = data.type;
+
+        // If it's a popup alert
+        if (type === 'alert') {
+          const newAlert: AlertToast = {
+            id: Math.random().toString(),
+            message: status,
+            emailId: emailId,
+          };
+          setAlerts((prev) => [newAlert, ...prev]);
+          
+          // Clear alert after 8 seconds
+          setTimeout(() => {
+            setAlerts((prev) => prev.filter((a) => a.id !== newAlert.id));
+          }, 8000);
+
+          // Force refetch email list
+          fetchEmails();
+          return;
+        }
+
+        // Update progress bar
+        setAgentStatus({
+          status,
+          progress,
+          active: progress < 100,
+          runId,
+        });
+
+        if (runId) {
+          setActiveAuditRunId(runId);
+        }
+
+        // Refetch emails if analysis completed or status sync completes
+        if (progress === 100) {
+          fetchEmails();
+          // If the email currently opened is the one that finished sync, reload it
+          if (emailId && selectedEmailId === emailId) {
+            fetchEmailDetails(emailId);
+          }
+        }
+      } catch (err) {
+        console.error('Failed to parse WS packet:', err);
+      }
+    };
+
+    ws.onclose = () => {
+      console.log('WebSocket disconnected. Reconnecting in 5 seconds...');
+      setTimeout(() => {
+        // Reconnect if tab is still active
+        if (localStorage.getItem('token')) {
+          setToken(localStorage.getItem('token'));
+        }
+      }, 5000);
+    };
+
+    return () => {
+      if (wsRef.current) {
+        wsRef.current.close();
+      }
+    };
+  }, [token, selectedEmailId]);
+
+  const fetchEmails = async () => {
+    if (!token) return;
+    const url = activeCategory
+      ? `${API_BASE_URL}/api/emails?category=${activeCategory}`
+      : `${API_BASE_URL}/api/emails`;
+
+    try {
+      const response = await fetch(url, {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+        },
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setEmails(data);
+      }
+    } catch (err) {
+      console.error('Error fetching emails:', err);
+    }
+  };
+
+  const fetchEmailDetails = async (id: string) => {
+    if (!token) return;
+    setEmailLoading(true);
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/emails/${id}`, {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+        },
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setSelectedEmail(data);
+        
+        // Mark as read in local list
+        setEmails((prev) =>
+          prev.map((e) => (e.id === id ? { ...e, is_read: true } : e))
+        );
+      }
+    } catch (err) {
+      console.error('Error fetching email details:', err);
+    } finally {
+      setEmailLoading(false);
+    }
+  };
+
+  const handleSelectEmail = (id: string) => {
+    setSelectedEmailId(id);
+    fetchEmailDetails(id);
+  };
+
+  const handleToggleStar = async (id: string, isStarred: boolean, e: React.MouseEvent) => {
+    e.stopPropagation(); // Avoid selecting row
+    if (!token) return;
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/emails/${id}/toggle-star?is_starred=${isStarred}`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+        },
+      });
+      if (response.ok) {
+        setEmails((prev) =>
+          prev.map((item) => (item.id === id ? { ...item, is_starred: isStarred } : item))
+        );
+        if (selectedEmail && selectedEmail.id === id) {
+          setSelectedEmail((prev: any) => ({ ...prev, is_starred: isStarred }));
+        }
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const handleTriggerSync = async () => {
+    if (!token) return;
+    setIsSyncing(true);
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/agent/trigger-sync`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+        },
+      });
+      if (!response.ok) {
+        throw new Error('Failed to trigger inbox sync');
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setIsSyncing(false);
+    }
+  };
+
+  const handleSendEmail = async (to: string, subject: string, body: string): Promise<boolean> => {
+    if (!token) return false;
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/emails/send`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`,
+        },
+        body: JSON.stringify({ to, subject, body }),
+      });
+      return response.ok;
+    } catch (err) {
+      console.error(err);
+      return false;
+    }
+  };
+
+  const handleLogout = () => {
+    localStorage.clear();
+    router.push('/login');
+  };
+
+  const toggleAuditPanel = (runId: string) => {
+    setActiveAuditRunId(runId);
+    setShowAuditPanel(true);
+  };
+
+  return (
+    <div className="min-h-screen bg-[#06060c] flex relative overflow-hidden text-slate-200">
+      {/* Decorative background glows */}
+      <div className="absolute top-0 right-1/4 w-[500px] h-[500px] bg-purple-950/10 rounded-full blur-[140px] pointer-events-none" />
+      <div className="absolute bottom-0 left-1/4 w-[500px] h-[500px] bg-cyan-950/5 rounded-full blur-[140px] pointer-events-none" />
+
+      {/* Floating Alerts Container */}
+      <div className="fixed bottom-6 right-6 z-50 flex flex-col gap-3 max-w-sm">
+        {alerts.map((alert) => (
+          <div
+            key={alert.id}
+            onClick={() => alert.emailId && handleSelectEmail(alert.emailId)}
+            className="glass-panel border-cyan-500/30 p-4 rounded-xl flex gap-3 shadow-xl cursor-pointer hover:border-cyan-400 hover:shadow-[0_0_15px_rgba(6,182,212,0.15)] transition-all animate-fade-in-up items-center"
+          >
+            <div className="h-8 w-8 rounded-full bg-cyan-950/50 flex items-center justify-center text-cyan-400 shrink-0">
+              <Activity size={16} />
+            </div>
+            <div>
+              <p className="text-xs font-semibold text-slate-200">{alert.message}</p>
+              {alert.emailId && <p className="text-[10px] text-cyan-400 mt-0.5">Click to view details</p>}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Navigation Rail */}
+      <aside className="w-16 bg-slate-950/60 border-r border-slate-900/60 flex flex-col items-center py-6 justify-between relative z-10 shrink-0">
+        <div className="flex flex-col items-center gap-8">
+          <div className="h-10 w-10 bg-purple-950/50 border border-purple-500/25 text-purple-400 rounded-xl flex items-center justify-center font-bold text-lg shadow-[0_0_10px_rgba(147,51,234,0.1)]">
+            A
+          </div>
+          <nav className="flex flex-col gap-6">
+            <button className="h-10 w-10 bg-purple-600/15 border border-purple-500/30 text-purple-300 rounded-xl flex items-center justify-center cursor-pointer transition">
+              <Inbox size={18} />
+            </button>
+            <button 
+              onClick={() => router.push('/agent')}
+              className="h-10 w-10 hover:bg-slate-900/60 border border-transparent text-slate-500 hover:text-slate-300 rounded-xl flex items-center justify-center cursor-pointer transition"
+            >
+              <Terminal size={18} />
+            </button>
+            <button 
+              onClick={() => router.push('/settings')}
+              className="h-10 w-10 hover:bg-slate-900/60 border border-transparent text-slate-500 hover:text-slate-300 rounded-xl flex items-center justify-center cursor-pointer transition"
+            >
+              <Settings size={18} />
+            </button>
+          </nav>
+        </div>
+        <button
+          onClick={handleLogout}
+          className="h-10 w-10 hover:bg-red-950/20 border border-transparent hover:border-red-950 text-slate-500 hover:text-red-400 rounded-xl flex items-center justify-center cursor-pointer transition"
+        >
+          <LogOut size={18} />
+        </button>
+      </aside>
+
+      {/* Main App Workspace */}
+      <main className="flex-1 flex overflow-hidden relative z-10">
+        <div className="flex-1 flex flex-col min-w-0">
+          <header className="h-16 border-b border-slate-900/80 px-6 flex items-center justify-between shrink-0 bg-slate-950/20">
+            <h1 className="text-base font-bold text-white tracking-wide flex items-center gap-2">
+              <span>Inbox Workspace</span>
+            </h1>
+            <div className="flex items-center gap-3">
+              <span className="text-xs text-slate-500">Logged in:</span>
+              <span className="text-xs bg-slate-900 border border-slate-800 px-3 py-1 rounded-full text-slate-300 font-medium font-mono">
+                {userEmail}
+              </span>
+            </div>
+          </header>
+
+          {/* Grid Layout of the Content */}
+          <div className="flex-1 flex overflow-hidden p-6 gap-6">
+            {/* Column 1: EmailList */}
+            <div className="w-80 shrink-0">
+              <EmailList
+                emails={emails}
+                selectedId={selectedEmailId}
+                onSelectEmail={handleSelectEmail}
+                onToggleStar={handleToggleStar}
+                activeCategory={activeCategory}
+                setActiveCategory={setActiveCategory}
+              />
+            </div>
+
+            {/* Column 2: Detailed View & AI Assistant Panel */}
+            <div className="flex-1 flex flex-col gap-6 min-w-0">
+              {selectedEmail ? (
+                <>
+                  <div className="flex-1 min-h-0">
+                    <EmailDetail email={selectedEmail} isLoading={emailLoading} />
+                  </div>
+                  <div className="shrink-0">
+                    <StreamingDraft
+                      emailId={selectedEmail.id}
+                      emailSubject={selectedEmail.subject}
+                      emailSender={selectedEmail.sender}
+                      onSendEmail={handleSendEmail}
+                    />
+                  </div>
+                </>
+              ) : (
+                <div className="flex-1 glass-panel border-dashed border-slate-800 rounded-2xl flex flex-col items-center justify-center text-slate-500 gap-3">
+                  <Inbox size={32} className="stroke-[1.2]" />
+                  <div className="text-center">
+                    <p className="text-sm font-semibold text-slate-300">Select an email to view</p>
+                    <p className="text-xs text-slate-500 mt-1 max-w-[240px]">
+                      Open messages from the list to display details and access the AI draft composer.
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Column 3: Status & Auditing Bar */}
+            <div className="w-80 shrink-0 flex flex-col gap-6 overflow-y-auto">
+              <AgentStatusBar
+                statusData={agentStatus}
+                isSyncing={isSyncing}
+                onTriggerSync={handleTriggerSync}
+                onViewLogs={toggleAuditPanel}
+              />
+
+              {/* Audit Timeline */}
+              {showAuditPanel && activeAuditRunId ? (
+                <div className="glass-panel border-purple-500/10 rounded-2xl p-5 relative">
+                  <button 
+                    onClick={() => setShowAuditPanel(false)}
+                    className="absolute top-4 right-4 text-[10px] uppercase font-bold text-slate-500 hover:text-slate-300"
+                  >
+                    Close
+                  </button>
+                  <AgentRunTimeline runId={activeAuditRunId} />
+                </div>
+              ) : (
+                <div className="glass-panel border-slate-900 rounded-2xl p-6 flex flex-col items-center justify-center text-slate-500 gap-3 text-center h-[280px]">
+                  <Activity size={24} className="stroke-[1.5]" />
+                  <div>
+                    <h4 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1">Audit Trail</h4>
+                    <p className="text-[11px] leading-relaxed">
+                      Start syncing or analyze an email to inspect the AI agent thinking logs here.
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

frontend/app/(app)/settings/page.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { Settings, Shield, Sliders, ArrowLeft, Key, User, FileText, CheckCircle2 } from 'lucide-react';
+
+export default function SettingsPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState('Unknown user');
+  const [userId, setUserId] = useState('Unknown');
+
+  useEffect(() => {
+    const savedEmail = localStorage.getItem('email');
+    const savedUserId = localStorage.getItem('userId');
+    if (savedEmail) setEmail(savedEmail);
+    if (savedUserId) setUserId(savedUserId);
+  }, []);
+
+  const handleLogout = () => {
+    localStorage.clear();
+    router.push('/login');
+  };
+
+  return (
+    <div className="min-h-screen bg-[#06060c] px-8 py-10 relative overflow-hidden text-slate-200">
+      <div className="absolute top-1/4 left-1/4 w-[350px] h-[350px] bg-cyan-950/5 rounded-full blur-[120px] pointer-events-none" />
+
+      <div className="max-w-3xl mx-auto flex flex-col gap-8 relative z-10 animate-fade-in-up">
+        {/* Header */}
+        <div className="flex items-center gap-4">
+          <button
+            onClick={() => router.push('/inbox')}
+            className="p-2 hover:bg-slate-900 border border-slate-900 hover:border-slate-800 rounded-xl transition text-slate-400 hover:text-white cursor-pointer"
+          >
+            <ArrowLeft size={16} />
+          </button>
+          <div>
+            <h1 className="text-2xl font-bold text-white tracking-wide">System Settings</h1>
+            <p className="text-xs text-slate-500 mt-1">Configure credentials and review application connections</p>
+          </div>
+        </div>
+
+        {/* Content Box */}
+        <div className="flex flex-col gap-6">
+          {/* Section 1: User Profile */}
+          <div className="glass-panel border-slate-900 rounded-2xl p-6 flex flex-col gap-4">
+            <div className="flex items-center gap-2 text-purple-400 font-semibold text-xs uppercase tracking-wider">
+              <User size={14} />
+              <span>User Profile</span>
+            </div>
+            <div className="grid grid-cols-2 gap-4 text-xs">
+              <div>
+                <span className="text-slate-500 block mb-1">Authenticated Account</span>
+                <span className="font-semibold text-slate-200 font-mono">
+                  {email}
+                </span>
+              </div>
+              <div>
+                <span className="text-slate-500 block mb-1">Local User ID</span>
+                <span className="font-semibold text-slate-300 font-mono truncate block">
+                  {userId}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Section 2: Integration status */}
+          <div className="glass-panel border-slate-900 rounded-2xl p-6 flex flex-col gap-4">
+            <div className="flex items-center gap-2 text-cyan-400 font-semibold text-xs uppercase tracking-wider">
+              <Sliders size={14} />
+              <span>Integration Settings</span>
+            </div>
+            <div className="flex flex-col gap-3.5">
+              <div className="flex justify-between items-center bg-slate-950/40 p-4 border border-slate-900 rounded-xl text-xs">
+                <div>
+                  <span className="font-semibold text-slate-200 block">Email Mock Mode</span>
+                  <span className="text-slate-500 block mt-0.5">Offline mock sync handles mail simulations</span>
+                </div>
+                <span className="px-3 py-1 bg-cyan-950/40 text-cyan-400 border border-cyan-800/30 rounded-full font-bold">
+                  ENABLED (Fallback)
+                </span>
+              </div>
+
+              <div className="flex justify-between items-center bg-slate-950/40 p-4 border border-slate-900 rounded-xl text-xs">
+                <div>
+                  <span className="font-semibold text-slate-200 block">Google API Authorization Scope</span>
+                  <span className="text-slate-500 block mt-0.5">OAuth scopes to read and send messages</span>
+                </div>
+                <span className="text-slate-400 bg-slate-900 px-3 py-1 border border-slate-800 rounded-full font-mono">
+                  gmail.readonly, gmail.compose
+                </span>
+              </div>
+
+              <div className="flex justify-between items-center bg-slate-950/40 p-4 border border-slate-900 rounded-xl text-xs">
+                <div>
+                  <span className="font-semibold text-slate-200 block">OpenAI GPT-4o-Mini Engine</span>
+                  <span className="text-slate-500 block mt-0.5">Drives triage, TL;DR and streaming reply composer</span>
+                </div>
+                <span className="px-3 py-1 bg-emerald-950/40 text-emerald-400 border border-emerald-800/30 rounded-full font-bold">
+                  ACTIVE
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Section 3: Connection Instructions */}
+          <div className="glass-panel border-slate-900 rounded-2xl p-6 flex flex-col gap-4">
+            <div className="flex items-center gap-2 text-slate-400 font-semibold text-xs uppercase tracking-wider">
+              <Shield size={14} />
+              <span>Production Setup Checklist</span>
+            </div>
+            <div className="flex flex-col gap-3 text-xs leading-relaxed text-slate-300">
+              <div className="flex gap-2.5 items-start">
+                <CheckCircle2 size={15} className="text-purple-400 mt-0.5 shrink-0" />
+                <p>Register a Google Developer project, enable Gmail API and OAuth client credentials.</p>
+              </div>
+              <div className="flex gap-2.5 items-start">
+                <CheckCircle2 size={15} className="text-purple-400 mt-0.5 shrink-0" />
+                <p>Set <code>MOCK_EMAIL_PROVIDER=false</code> inside the <code>.env</code> file.</p>
+              </div>
+              <div className="flex gap-2.5 items-start">
+                <CheckCircle2 size={15} className="text-purple-400 mt-0.5 shrink-0" />
+                <p>Ensure a valid <code>OPENAI_API_KEY</code> is specified to enable AI models.</p>
+              </div>
+            </div>
+          </div>
+
+          <button
+            onClick={handleLogout}
+            className="w-full bg-red-950/20 hover:bg-red-950/30 border border-red-950 text-red-400 hover:text-red-300 font-medium py-3 rounded-xl text-xs transition cursor-pointer"
+          >
+            Log Out Account
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/(auth)/login/page.tsx

@@ -0,0 +1,241 @@
+'use client';
+
+import React, { useState, useEffect, Suspense } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Mail, Lock, Shield, Sparkles, UserPlus, LogIn, Globe } from 'lucide-react';
+import { API_BASE_URL } from '@/app/config';
+
+function LoginContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  
+  const [isRegisterMode, setIsRegisterMode] = useState(false);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [name, setName] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState({ text: '', type: 'idle' });
+
+  // Handle redirect from OAuth callback with query parameters
+  useEffect(() => {
+    const token = searchParams.get('token');
+    const userEmail = searchParams.get('email');
+    const userId = searchParams.get('userId');
+    const error = searchParams.get('error');
+
+    if (token && userEmail && userId) {
+      localStorage.setItem('token', token);
+      localStorage.setItem('email', userEmail);
+      localStorage.setItem('userId', userId);
+      
+      setMessage({ text: 'OAuth login successful! Redirecting...', type: 'success' });
+      setTimeout(() => {
+        router.push('/inbox');
+      }, 1000);
+    } else if (error) {
+      setMessage({ text: 'Google OAuth authentication failed. Please try again.', type: 'error' });
+    }
+  }, [searchParams, router]);
+
+  const handleOAuthLogin = async () => {
+    setLoading(true);
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/auth/google-login`);
+      const data = await response.json();
+      if (data.url) {
+        window.location.href = data.url;
+      } else {
+        throw new Error('Authentication endpoint failed to return redirect URL');
+      }
+    } catch (err: any) {
+      console.error(err);
+      setMessage({ text: err.message || 'OAuth initialization failed', type: 'error' });
+      setLoading(false);
+    }
+  };
+
+  const handleCredentialsSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email || !password) return;
+    
+    setLoading(true);
+    setMessage({ text: '', type: 'idle' });
+    
+    const endpoint = isRegisterMode 
+      ? `${API_BASE_URL}/api/auth/register` 
+      : `${API_BASE_URL}/api/auth/login`;
+      
+    const payload = isRegisterMode 
+      ? JSON.stringify({ email, password, name })
+      : new URLSearchParams({ username: email, password: password });
+
+    try {
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: isRegisterMode 
+          ? { 'Content-Type': 'application/json' }
+          : { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: payload,
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.detail || 'Authentication failed');
+      }
+
+      // Store in localStorage
+      localStorage.setItem('token', data.access_token);
+      localStorage.setItem('email', data.email);
+      localStorage.setItem('userId', data.user_id);
+      
+      setMessage({ text: isRegisterMode ? 'Account registered successfully!' : 'Login successful!', type: 'success' });
+      setTimeout(() => {
+        router.push('/inbox');
+      }, 800);
+    } catch (err: any) {
+      console.error(err);
+      setMessage({ text: err.message || 'Server connection error', type: 'error' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#06060c] flex items-center justify-center relative px-4 overflow-hidden">
+      {/* Decorative background glows */}
+      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-purple-900/15 rounded-full blur-[120px] pointer-events-none" />
+      <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-cyan-900/10 rounded-full blur-[120px] pointer-events-none" />
+
+      {/* Main Glass Card Container */}
+      <div className="w-full max-w-md glass-panel rounded-2xl border border-purple-500/10 p-8 flex flex-col gap-6 animate-fade-in-up relative z-10">
+        {/* Brand Header */}
+        <div className="text-center">
+          <div className="inline-flex h-11 w-11 items-center justify-center bg-purple-950/60 border border-purple-500/20 text-purple-400 rounded-xl mb-3 shadow-[0_0_15px_rgba(147,51,234,0.15)]">
+            <Shield size={20} className="fill-purple-400/10" />
+          </div>
+          <h1 className="text-2xl font-bold tracking-tight text-white flex items-center justify-center gap-1.5 leading-snug">
+            <span>Antigravity Mail</span>
+            <Sparkles size={18} className="text-purple-400" />
+          </h1>
+          <p className="text-xs text-slate-500 mt-1 font-medium">Agentic AI Email & Triage Assistant</p>
+        </div>
+
+        {/* Status Message */}
+        {message.type !== 'idle' && (
+          <div className={`p-3.5 rounded-xl border text-xs font-medium text-center ${
+            message.type === 'success' 
+              ? 'bg-emerald-950/20 border-emerald-500/25 text-emerald-400' 
+              : 'bg-red-950/20 border-red-500/25 text-red-400'
+          }`}>
+            {message.text}
+          </div>
+        )}
+
+        {/* Credentials Form */}
+        <form onSubmit={handleCredentialsSubmit} className="flex flex-col gap-4">
+          {isRegisterMode && (
+            <div className="flex flex-col gap-1.5">
+              <label className="text-[10px] uppercase font-bold tracking-wider text-slate-400">Full Name</label>
+              <div className="relative">
+                <input
+                  type="text"
+                  required
+                  placeholder="John Doe"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="w-full px-4 py-2.5 rounded-xl text-sm glass-input"
+                />
+              </div>
+            </div>
+          )}
+
+          <div className="flex flex-col gap-1.5">
+            <label className="text-[10px] uppercase font-bold tracking-wider text-slate-400">Email Address</label>
+            <div className="relative">
+              <Mail className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500" size={16} />
+              <input
+                type="email"
+                required
+                placeholder="developer@example.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full pl-10 pr-4 py-2.5 rounded-xl text-sm glass-input"
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <label className="text-[10px] uppercase font-bold tracking-wider text-slate-400">Password</label>
+            <div className="relative">
+              <Lock className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500" size={16} />
+              <input
+                type="password"
+                required
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full pl-10 pr-4 py-2.5 rounded-xl text-sm glass-input"
+              />
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="glow-btn text-white w-full py-2.5 rounded-xl font-medium text-sm flex items-center justify-center gap-2 mt-2 cursor-pointer disabled:opacity-50"
+          >
+            {isRegisterMode ? <UserPlus size={16} /> : <LogIn size={16} />}
+            <span>{loading ? 'Processing...' : isRegisterMode ? 'Register Account' : 'Sign In'}</span>
+          </button>
+        </form>
+
+        {/* Separator */}
+        <div className="flex items-center gap-3 text-[10px] text-slate-600 uppercase font-bold tracking-widest my-1">
+          <div className="flex-1 h-px bg-slate-900" />
+          <span>or</span>
+          <div className="flex-1 h-px bg-slate-900" />
+        </div>
+
+        {/* Google OAuth Access */}
+        <button
+          onClick={handleOAuthLogin}
+          disabled={loading}
+          className="w-full bg-slate-950/50 hover:bg-slate-900 text-slate-200 border border-slate-800/80 hover:border-slate-700 py-2.5 rounded-xl text-sm font-medium flex items-center justify-center gap-2.5 transition cursor-pointer disabled:opacity-50"
+        >
+          <Globe size={16} className="text-purple-400" />
+          <span>Continue with Google Gmail</span>
+        </button>
+
+        {/* Registration Toggle */}
+        <div className="text-center text-xs text-slate-500 mt-2">
+          {isRegisterMode ? 'Already have an account?' : "Don't have an account?"}{' '}
+          <button
+            onClick={() => {
+              setIsRegisterMode(!isRegisterMode);
+              setMessage({ text: '', type: 'idle' });
+            }}
+            className="text-purple-400 hover:text-purple-300 font-semibold cursor-pointer outline-none bg-transparent border-none ml-0.5"
+          >
+            {isRegisterMode ? 'Sign In' : 'Create an Account'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function LoginPage() {
+  return (
+    <Suspense fallback={
+      <div className="min-h-screen bg-[#06060c] flex items-center justify-center text-slate-500">
+        <div className="flex flex-col items-center gap-2">
+          <div className="h-6 w-6 animate-spin rounded-full border border-purple-500 border-t-transparent" />
+          <p className="text-xs">Loading page dependencies...</p>
+        </div>
+      </div>
+    }>
+      <LoginContent />
+    </Suspense>
+  );
+}

frontend/app/config.ts

@@ -0,0 +1,2 @@
+export const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+export const WS_BASE_URL = process.env.NEXT_PUBLIC_WS_URL || 'ws://localhost:8000';

frontend/app/globals.css

@@ -0,0 +1,120 @@
+@import "tailwindcss";
+
+@theme inline {
+  --color-brand-primary: hsl(263, 90%, 55%);
+  --color-brand-secondary: hsl(190, 95%, 45%);
+  --color-brand-glow: hsl(263, 90%, 75%);
+  --color-glass-bg: rgba(13, 13, 24, 0.45);
+  --color-glass-border: rgba(255, 255, 255, 0.08);
+  --color-glass-border-glow: rgba(147, 51, 234, 0.35);
+  --color-inbox-bg: #09090e;
+  --color-card-dark: #12121e;
+}
+
+:root {
+  --background: #06060c;
+  --foreground: #f3f4f6;
+}
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: 'Inter', system-ui, sans-serif;
+  overflow-x: hidden;
+}
+
+/* Glassmorphism utility classes */
+.glass-panel {
+  background: rgba(15, 15, 27, 0.65);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+}
+
+.glass-panel-hover:hover {
+  border-color: rgba(147, 51, 234, 0.25);
+  box-shadow: 0 8px 32px 0 rgba(147, 51, 234, 0.1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glass-input {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: #fff;
+  transition: all 0.2s ease;
+}
+
+.glass-input:focus {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: #9333ea;
+  box-shadow: 0 0 10px rgba(147, 51, 234, 0.2);
+  outline: none;
+}
+
+/* Glowing text and states */
+.glow-text {
+  text-shadow: 0 0 15px rgba(147, 51, 234, 0.6);
+}
+
+.glow-btn {
+  background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
+  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
+  transition: all 0.3s ease;
+}
+
+.glow-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 24px rgba(124, 58, 237, 0.5), 0 0 10px rgba(6, 182, 212, 0.3);
+}
+
+/* Custom Scrollbars */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(15, 15, 27, 0.4);
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(147, 51, 234, 0.4);
+}
+
+/* Pulse animation for active agents */
+@keyframes agent-glow {
+  0%, 100% {
+    box-shadow: 0 0 8px rgba(147, 51, 234, 0.4);
+    border-color: rgba(147, 51, 234, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(147, 51, 234, 0.8), 0 0 10px rgba(6, 182, 212, 0.4);
+    border-color: rgba(6, 182, 212, 0.6);
+  }
+}
+
+.animate-agent-glow {
+  animation: agent-glow 3s infinite ease-in-out;
+}
+
+/* Custom animations */
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}

frontend/app/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Antigravity Mail - AI Email Agent",
+  description: "Agentic AI Email and Inbox Triage Assistant",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col">{children}</body>
+    </html>
+  );
+}

frontend/app/page.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function Home() {
+  const router = useRouter();
+
+  useEffect(() => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      router.push('/inbox');
+    } else {
+      router.push('/login');
+    }
+  }, [router]);
+
+  return (
+    <div className="min-h-screen bg-[#06060c] flex items-center justify-center text-slate-500">
+      <div className="flex flex-col items-center gap-2">
+        <div className="h-6 w-6 animate-spin rounded-full border border-purple-500 border-t-transparent" />
+        <p className="text-xs">Redirecting to workspace...</p>
+      </div>
+    </div>
+  );
+}

frontend/components/AgentRunTimeline.tsx

@@ -0,0 +1,146 @@
+import React, { useState, useEffect } from 'react';
+import { Mail, Search, Sparkles, Database, ShieldCheck, Terminal, AlertCircle } from 'lucide-react';
+import { API_BASE_URL } from '@/app/config';
+
+interface AgentLogItem {
+  step: number;
+  thought: string;
+  action: string;
+  result: string;
+  timestamp: string;
+}
+
+interface AgentRunTimelineProps {
+  runId: string;
+}
+
+export default function AgentRunTimeline({ runId }: AgentRunTimelineProps) {
+  const [logs, setLogs] = useState<AgentLogItem[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    const fetchLogs = async () => {
+      setIsLoading(true);
+      setError(false);
+      
+      const token = localStorage.getItem('token') || '';
+      try {
+        const response = await fetch(`${API_BASE_URL}/api/agent/runs/${runId}/logs`, {
+          headers: {
+            'Authorization': `Bearer ${token}`,
+          },
+        });
+        
+        if (!response.ok) {
+          throw new Error('Failed to fetch run logs');
+        }
+        
+        const data = await response.json();
+        setLogs(data);
+      } catch (err) {
+        console.error(err);
+        setError(true);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (runId) {
+      fetchLogs();
+      // Poll every 3 seconds while active
+      const interval = setInterval(fetchLogs, 3000);
+      return () => clearInterval(interval);
+    }
+  }, [runId]);
+
+  const getActionIcon = (action: string) => {
+    switch (action.toUpperCase()) {
+      case 'READ_EMAIL':
+        return <Mail size={14} className="text-cyan-400" />;
+      case 'RETRIEVE_CONTEXT':
+        return <Database size={14} className="text-indigo-400" />;
+      case 'LLM_TRIAGE':
+        return <Sparkles size={14} className="text-purple-400" />;
+      case 'COMMIT_CHANGES':
+        return <ShieldCheck size={14} className="text-emerald-400" />;
+      default:
+        return <Terminal size={14} className="text-slate-400" />;
+    }
+  };
+
+  const getActionColor = (action: string) => {
+    switch (action.toUpperCase()) {
+      case 'READ_EMAIL':
+        return 'border-cyan-500/30 bg-cyan-950/20';
+      case 'RETRIEVE_CONTEXT':
+        return 'border-indigo-500/30 bg-indigo-950/20';
+      case 'LLM_TRIAGE':
+        return 'border-purple-500/30 bg-purple-950/20';
+      case 'COMMIT_CHANGES':
+        return 'border-emerald-500/30 bg-emerald-950/20';
+      default:
+        return 'border-slate-800 bg-slate-950/40';
+    }
+  };
+
+  if (isLoading && logs.length === 0) {
+    return (
+      <div className="flex items-center justify-center p-8 text-slate-500">
+        <div className="flex items-center gap-2">
+          <div className="h-4 w-4 animate-spin rounded-full border border-purple-500 border-t-transparent" />
+          <span className="text-xs">Loading audit trail...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error && logs.length === 0) {
+    return (
+      <div className="flex items-center justify-center p-6 text-red-400 gap-2 border border-red-950/30 bg-red-950/10 rounded-xl">
+        <AlertCircle size={16} />
+        <span className="text-xs">Could not fetch logs for this agent execution.</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <h4 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-1.5">
+        <Terminal size={14} />
+        <span>Agent Thinking Audit Trail</span>
+      </h4>
+      
+      {logs.length === 0 ? (
+        <p className="text-xs text-slate-500 italic">No agent log steps found for this execution run.</p>
+      ) : (
+        <div className="relative border-l border-slate-800 ml-3.5 pl-6 flex flex-col gap-6.5">
+          {logs.map((log) => (
+            <div key={log.step} className="relative group">
+              {/* Vertical line connector bullet */}
+              <div className={`absolute -left-[35px] top-0 h-7 w-7 rounded-full border flex items-center justify-center transition-transform group-hover:scale-110 ${getActionColor(log.action)}`}>
+                {getActionIcon(log.action)}
+              </div>
+
+              {/* Node Contents */}
+              <div>
+                <div className="flex items-center gap-2.5 mb-1">
+                  <span className="text-xs font-semibold text-slate-200">
+                    Step {log.step}: {log.thought}
+                  </span>
+                  <span className="text-[10px] text-slate-500 font-mono">
+                    {new Date(log.timestamp).toLocaleTimeString()}
+                  </span>
+                </div>
+                <div className="bg-slate-950/35 border border-slate-900/60 p-3 rounded-xl text-[11px] text-slate-400 font-mono leading-relaxed max-w-full overflow-x-auto">
+                  <span className="text-slate-500 block mb-1">Action: {log.action}</span>
+                  <span className="text-slate-300 block">{log.result}</span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/components/AgentStatusBar.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Cpu, RefreshCw, Terminal, Zap } from 'lucide-react';
+
+interface AgentStatus {
+  status: string;
+  progress: number;
+  active: boolean;
+  runId?: string;
+}
+
+interface AgentStatusBarProps {
+  statusData: AgentStatus;
+  isSyncing: boolean;
+  onTriggerSync: () => Promise<void>;
+  onViewLogs: (runId: string) => void;
+}
+
+export default function AgentStatusBar({
+  statusData,
+  isSyncing,
+  onTriggerSync,
+  onViewLogs,
+}: AgentStatusBarProps) {
+  return (
+    <div className="glass-panel rounded-2xl p-6 flex flex-col gap-5 border border-purple-500/10">
+      {/* Header / Active Indicator */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="relative flex h-3 w-3">
+            {statusData.active ? (
+              <>
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-3 w-3 bg-purple-500"></span>
+              </>
+            ) : (
+              <span className="relative inline-flex rounded-full h-3 w-3 bg-slate-600"></span>
+            )}
+          </div>
+          <div>
+            <h3 className="font-semibold text-sm tracking-wide text-slate-200">AGENT STATUS</h3>
+            <p className="text-xs text-slate-400">GPT-4o-Mini Engine</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-1 bg-purple-950/40 px-2.5 py-1 rounded-full border border-purple-800/30 text-purple-300 text-xs">
+          <Zap size={12} className="fill-purple-300/20" />
+          <span>Active</span>
+        </div>
+      </div>
+
+      {/* Status Bar Indicator */}
+      <div className={`p-4 rounded-xl border ${statusData.active ? 'bg-purple-950/20 border-purple-500/25 animate-agent-glow' : 'bg-slate-950/40 border-slate-800/40'}`}>
+        <p className="text-sm font-medium text-slate-100 truncate mb-2">
+          {statusData.status || "Agent is sleeping. Waiting for mail..."}
+        </p>
+        
+        {/* Progress Bar */}
+        <div className="w-full bg-slate-900 rounded-full h-2 overflow-hidden">
+          <div 
+            className="h-full bg-gradient-to-r from-purple-500 to-cyan-500 transition-all duration-500 ease-out" 
+            style={{ width: `${statusData.progress}%` }}
+          />
+        </div>
+        
+        <div className="flex justify-between items-center mt-2 text-xs text-slate-400">
+          <span>Progress</span>
+          <span className="font-mono">{statusData.progress}%</span>
+        </div>
+      </div>
+
+      {/* System Metrics */}
+      <div className="grid grid-cols-2 gap-3 text-xs">
+        <div className="bg-slate-950/30 border border-slate-900 p-3 rounded-lg">
+          <span className="text-slate-500 block mb-1">Worker Threads</span>
+          <span className="font-mono text-slate-300 font-medium">Celery: Active</span>
+        </div>
+        <div className="bg-slate-950/30 border border-slate-900 p-3 rounded-lg">
+          <span className="text-slate-500 block mb-1">RAG Context</span>
+          <span className="font-mono text-slate-300 font-medium">MongoDB: Live</span>
+        </div>
+      </div>
+
+      {/* Quick Action Trigger */}
+      <div className="flex flex-col gap-2.5 mt-2">
+        <button
+          onClick={onTriggerSync}
+          disabled={isSyncing || statusData.active}
+          className="glow-btn text-white w-full font-medium py-2.5 px-4 rounded-xl flex items-center justify-center gap-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+        >
+          <RefreshCw size={15} className={`transition-transform ${isSyncing ? 'animate-spin' : ''}`} />
+          <span>{isSyncing ? 'Syncing Mailbox...' : 'Sync Mailbox Now'}</span>
+        </button>
+
+        {statusData.runId && (
+          <button
+            onClick={() => onViewLogs(statusData.runId!)}
+            className="w-full bg-slate-950/50 hover:bg-slate-900 border border-slate-800 text-slate-300 hover:text-slate-100 transition py-2 px-4 rounded-xl flex items-center justify-center gap-2 text-sm cursor-pointer"
+          >
+            <Terminal size={14} />
+            <span>Audit Agent Logs</span>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/components/EmailDetail.tsx

@@ -0,0 +1,219 @@
+import React, { useState, useEffect } from 'react';
+import { Eye, FileText, CheckSquare, Sparkles, User, Calendar, Paperclip } from 'lucide-react';
+
+interface EmailDetailData {
+  id: string;
+  subject?: string;
+  sender: string;
+  received_at: string;
+  category: string;
+  is_read: boolean;
+  is_starred: boolean;
+  thread_id?: string;
+  has_attachment: boolean;
+  body_html: string;
+  body_text: string;
+  summary?: string;
+  action_items: string[];
+}
+
+interface EmailDetailProps {
+  email: EmailDetailData;
+  isLoading: boolean;
+}
+
+export default function EmailDetail({ email, isLoading }: EmailDetailProps) {
+  const [activeTab, setActiveTab] = useState<'html' | 'text'>('html');
+  const [checkedItems, setCheckedItems] = useState<Record<number, boolean>>({});
+
+  // Reset checked items when selected email changes
+  useEffect(() => {
+    setCheckedItems({});
+    if (email.body_html) {
+      setActiveTab('html');
+    } else {
+      setActiveTab('text');
+    }
+  }, [email.id, email.body_html]);
+
+  const toggleCheck = (idx: number) => {
+    setCheckedItems((prev) => ({
+      ...prev,
+      [idx]: !prev[idx],
+    }));
+  };
+
+  const getCategoryStyle = (cat: string) => {
+    switch (cat.toLowerCase()) {
+      case 'urgent':
+        return 'bg-red-950/40 border border-red-500/30 text-red-400';
+      case 'invoice':
+        return 'bg-cyan-950/40 border border-cyan-500/30 text-cyan-400';
+      case 'newsletter':
+        return 'bg-slate-900 border border-slate-700/60 text-slate-400';
+      default:
+        return 'bg-emerald-950/40 border border-emerald-500/30 text-emerald-400';
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full text-slate-500">
+        <div className="flex flex-col items-center gap-3">
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-purple-500 border-t-transparent" />
+          <p className="text-xs">Loading email content...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-slate-950/30 border border-slate-900 rounded-2xl overflow-hidden animate-fade-in-up">
+      {/* Subject Header */}
+      <div className="p-6 border-b border-slate-900 bg-slate-950/20">
+        <div className="flex items-center gap-3 mb-2.5">
+          <span className={`px-2.5 py-0.5 rounded text-[10px] uppercase font-bold tracking-wider ${getCategoryStyle(email.category)}`}>
+            {email.category}
+          </span>
+          <span className="text-xs text-slate-500 flex items-center gap-1">
+            <Calendar size={12} />
+            {new Date(email.received_at).toLocaleString()}
+          </span>
+        </div>
+        <h2 className="text-xl font-bold text-white tracking-tight leading-snug">
+          {email.subject || '(No Subject)'}
+        </h2>
+      </div>
+
+      {/* Sender Header */}
+      <div className="px-6 py-4 border-b border-slate-900/60 flex items-center gap-3 bg-slate-950/10">
+        <div className="h-9 w-9 rounded-full bg-purple-950/50 border border-purple-800/40 flex items-center justify-center text-purple-400 font-bold text-sm">
+          <User size={16} />
+        </div>
+        <div className="min-w-0">
+          <span className="text-sm font-semibold text-slate-200 block truncate">
+            {email.sender}
+          </span>
+          <span className="text-[11px] text-slate-500 block">
+            to me
+          </span>
+        </div>
+      </div>
+
+      {/* Main Grid: Body on Left, AI Panel on Right */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Left Side: Email Body Content */}
+        <div className="flex-1 flex flex-col border-r border-slate-900 overflow-hidden">
+          {/* Content Format Toggle Tabs */}
+          <div className="flex px-4 py-2 gap-2 border-b border-slate-900/60 bg-slate-950/15 text-xs justify-end">
+            <button
+              onClick={() => setActiveTab('html')}
+              disabled={!email.body_html}
+              className={`px-2.5 py-1 rounded flex items-center gap-1 cursor-pointer transition ${
+                activeTab === 'html' ? 'bg-slate-800 text-white' : 'text-slate-500 hover:text-slate-300'
+              }`}
+            >
+              <Eye size={12} />
+              <span>HTML View</span>
+            </button>
+            <button
+              onClick={() => setActiveTab('text')}
+              className={`px-2.5 py-1 rounded flex items-center gap-1 cursor-pointer transition ${
+                activeTab === 'text' ? 'bg-slate-800 text-white' : 'text-slate-500 hover:text-slate-300'
+              }`}
+            >
+              <FileText size={12} />
+              <span>Plain Text</span>
+            </button>
+          </div>
+
+          {/* Body Viewer */}
+          <div className="flex-1 p-6 overflow-y-auto bg-slate-950/10">
+            {activeTab === 'html' && email.body_html ? (
+              <div 
+                className="prose prose-invert max-w-none text-slate-300 text-sm leading-relaxed"
+                dangerouslySetInnerHTML={{ __html: email.body_html }}
+              />
+            ) : (
+              <pre className="whitespace-pre-wrap font-sans text-sm text-slate-300 leading-relaxed">
+                {email.body_text || "No email body text content found."}
+              </pre>
+            )}
+
+            {/* Attachments Section */}
+            {email.has_attachment && (
+              <div className="mt-8 pt-6 border-t border-slate-900">
+                <h5 className="text-xs font-semibold text-slate-400 mb-3 flex items-center gap-1.5">
+                  <Paperclip size={12} />
+                  <span>Attachments (1)</span>
+                </h5>
+                <div className="inline-flex items-center gap-3 bg-slate-950/40 hover:bg-slate-900 border border-slate-800 p-2.5 rounded-xl transition cursor-pointer">
+                  <div className="p-2 bg-purple-950/50 text-purple-400 rounded-lg">
+                    <FileText size={16} />
+                  </div>
+                  <div>
+                    <span className="text-xs font-medium text-slate-300 block">document.pdf</span>
+                    <span className="text-[10px] text-slate-500 block">100 KB • PDF File</span>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Right Side: AI Panel (TL;DR & Action Items) */}
+        <div className="w-80 flex flex-col bg-slate-950/20 overflow-y-auto p-5 gap-5">
+          {/* Summary Box */}
+          <div className="glass-panel border-purple-500/10 rounded-xl p-4 flex flex-col gap-2.5">
+            <div className="flex items-center gap-2 text-purple-400 font-semibold text-xs uppercase tracking-wider">
+              <Sparkles size={14} className="fill-purple-400/20" />
+              <span>AI TL;DR Summary</span>
+            </div>
+            <p className="text-xs text-slate-300 leading-relaxed">
+              {email.summary || "Agent hasn't generated a summary yet. Wait for triage logs to update."}
+            </p>
+          </div>
+
+          {/* Action Items Checklist */}
+          <div className="glass-panel border-purple-500/10 rounded-xl p-4 flex flex-col gap-3">
+            <div className="flex items-center gap-2 text-cyan-400 font-semibold text-xs uppercase tracking-wider">
+              <CheckSquare size={14} />
+              <span>Task Checklist ({email.action_items.length})</span>
+            </div>
+            {email.action_items.length === 0 ? (
+              <p className="text-xs text-slate-500 italic">No tasks extracted.</p>
+            ) : (
+              <div className="flex flex-col gap-2.5">
+                {email.action_items.map((item, idx) => {
+                  const isChecked = checkedItems[idx] || false;
+                  return (
+                    <div 
+                      key={idx} 
+                      onClick={() => toggleCheck(idx)}
+                      className="flex items-start gap-2.5 cursor-pointer group"
+                    >
+                      <div className={`mt-0.5 h-4 w-4 rounded border flex items-center justify-center transition shrink-0 ${
+                        isChecked 
+                          ? 'bg-cyan-500 border-cyan-500 text-slate-950' 
+                          : 'border-slate-700 bg-transparent group-hover:border-slate-500'
+                      }`}>
+                        {isChecked && (
+                          <svg className="w-3 h-3 fill-current stroke-[3px]" viewBox="0 0 20 20">
+                            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
+                          </svg>
+                        )}
+                      </div>
+                      <span className={`text-xs select-none transition ${isChecked ? 'line-through text-slate-500' : 'text-slate-300'}`}>
+                        {item}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/components/EmailList.tsx

@@ -0,0 +1,183 @@
+import React, { useState } from 'react';
+import { Mail, Star, Search, Paperclip } from 'lucide-react';
+
+interface EmailListItem {
+  id: str;
+  subject?: str;
+  sender: str;
+  received_at: str;
+  category: str;
+  is_read: bool;
+  is_starred: bool;
+  thread_id?: str;
+  has_attachment: bool;
+}
+
+interface EmailListProps {
+  emails: EmailListItem[];
+  selectedId: string | null;
+  onSelectEmail: (id: string) => void;
+  onToggleStar: (id: string, isStarred: boolean, e: React.MouseEvent) => void;
+  activeCategory: string | null;
+  setActiveCategory: (category: string | null) => void;
+}
+
+export default function EmailList({
+  emails,
+  selectedId,
+  onSelectEmail,
+  onToggleStar,
+  activeCategory,
+  setActiveCategory,
+}: EmailListProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Filter categories
+  const categories = [
+    { label: 'All Mail', value: null },
+    { label: 'Urgent', value: 'urgent', color: 'border-red-500/30 text-red-400 bg-red-950/20' },
+    { label: 'Personal', value: 'personal', color: 'border-emerald-500/30 text-emerald-400 bg-emerald-950/20' },
+    { label: 'Invoices', value: 'invoice', color: 'border-cyan-500/30 text-cyan-400 bg-cyan-950/20' },
+    { label: 'Newsletters', value: 'newsletter', color: 'border-slate-500/30 text-slate-400 bg-slate-950/10' },
+  ];
+
+  // Apply local text search filter
+  const filteredEmails = emails.filter((email) => {
+    const matchesSearch =
+      (email.subject || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+      email.sender.toLowerCase().includes(searchQuery.toLowerCase());
+    return matchesSearch;
+  });
+
+  const getCategoryStyle = (cat: string) => {
+    switch (cat.toLowerCase()) {
+      case 'urgent':
+        return 'bg-red-950/30 border border-red-500/25 text-red-400';
+      case 'invoice':
+        return 'bg-cyan-950/30 border border-cyan-500/25 text-cyan-400';
+      case 'newsletter':
+        return 'bg-slate-900 border border-slate-700/50 text-slate-400';
+      default:
+        return 'bg-emerald-950/30 border border-emerald-500/25 text-emerald-400';
+    }
+  };
+
+  const formatSender = (senderStr: string) => {
+    // Return display name or clean email
+    const match = senderStr.match(/^([^<]+)/);
+    return match ? match[1].trim() : senderStr;
+  };
+
+  const formatTime = (isoString: string) => {
+    try {
+      const date = new Date(isoString);
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    } catch {
+      return '';
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-slate-950/30 border border-slate-900 rounded-2xl overflow-hidden">
+      {/* Search Header */}
+      <div className="p-4 border-b border-slate-900 flex gap-3 items-center bg-slate-950/20">
+        <div className="relative flex-1">
+          <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500" size={16} />
+          <input
+            type="text"
+            placeholder="Search email subject or sender..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 text-sm rounded-xl glass-input placeholder-slate-500"
+          />
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex px-4 py-3 gap-2 overflow-x-auto border-b border-slate-900/60 bg-slate-950/10">
+        {categories.map((cat) => {
+          const isActive = activeCategory === cat.value;
+          return (
+            <button
+              key={cat.label}
+              onClick={() => setActiveCategory(cat.value)}
+              className={`px-3 py-1.5 rounded-lg text-xs font-medium border whitespace-nowrap cursor-pointer transition-all ${
+                isActive
+                  ? 'bg-purple-600/20 border-purple-500/60 text-purple-200'
+                  : 'bg-transparent border-slate-900 text-slate-400 hover:text-slate-200 hover:border-slate-800'
+              }`}
+            >
+              {cat.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Email Scrollable List */}
+      <div className="flex-1 overflow-y-auto divide-y divide-slate-900/60">
+        {filteredEmails.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-48 text-slate-500 gap-2">
+            <Mail size={24} className="stroke-[1.5]" />
+            <p className="text-xs">No emails found in this category.</p>
+          </div>
+        ) : (
+          filteredEmails.map((email) => {
+            const isSelected = selectedId === email.id;
+            return (
+              <div
+                key={email.id}
+                onClick={() => onSelectEmail(email.id)}
+                className={`p-4 flex gap-3 transition-all relative cursor-pointer group ${
+                  isSelected 
+                    ? 'bg-purple-950/10 border-l-2 border-purple-500' 
+                    : 'hover:bg-slate-900/40 border-l-2 border-transparent'
+                }`}
+              >
+                {/* Unread indicator */}
+                {!email.is_read && (
+                  <span className="absolute top-5 left-1 h-2 w-2 rounded-full bg-purple-500 shadow-[0_0_8px_#a855f7]" />
+                )}
+
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between gap-2 mb-1.5">
+                    <span className={`font-semibold text-xs ${!email.is_read ? 'text-white' : 'text-slate-300'}`}>
+                      {formatSender(email.sender)}
+                    </span>
+                    <span className="text-[10px] text-slate-500 font-medium">
+                      {formatTime(email.received_at)}
+                    </span>
+                  </div>
+
+                  <h4 className={`text-sm mb-1.5 truncate ${!email.is_read ? 'font-semibold text-white' : 'text-slate-300'}`}>
+                    {email.subject || '(No Subject)'}
+                  </h4>
+
+                  <div className="flex items-center justify-between mt-2.5">
+                    {/* Category Label */}
+                    <span className={`px-2 py-0.5 rounded text-[10px] uppercase font-bold tracking-wider ${getCategoryStyle(email.category)}`}>
+                      {email.category}
+                    </span>
+
+                    {/* Star & Attachment indicator */}
+                    <div className="flex items-center gap-2 text-slate-500 group-hover:text-slate-400">
+                      {email.has_attachment && <Paperclip size={12} className="stroke-[1.5]" />}
+                      <button
+                        onClick={(e) => onToggleStar(email.id, !email.is_starred, e)}
+                        className="hover:scale-115 transition"
+                      >
+                        <Star
+                          size={14}
+                          className={email.is_starred ? 'fill-amber-400 stroke-amber-400' : 'stroke-[1.5]'}
+                        />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}

frontend/components/StreamingDraft.tsx

@@ -0,0 +1,217 @@
+import React, { useState, useEffect } from 'react';
+import { Send, Sparkles, AlertCircle, CheckCircle } from 'lucide-react';
+import { API_BASE_URL } from '@/app/config';
+
+interface StreamingDraftProps {
+  emailId: string;
+  emailSubject?: string;
+  emailSender: string;
+  onSendEmail: (to: string, subject: string, body: string) => Promise<boolean>;
+}
+
+export default function StreamingDraft({
+  emailId,
+  emailSubject,
+  emailSender,
+  onSendEmail,
+}: StreamingDraftProps) {
+  const [tone, setTone] = useState<'professional' | 'casual' | 'short'>('professional');
+  const [draftContent, setDraftContent] = useState('');
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [isSending, setIsSending] = useState(false);
+  const [sendStatus, setSendStatus] = useState<'idle' | 'success' | 'error'>('idle');
+  const [errorMsg, setErrorMsg] = useState('');
+
+  // Clear draft when email selection changes
+  useEffect(() => {
+    setDraftContent('');
+    setSendStatus('idle');
+  }, [emailId]);
+
+  const generateDraft = async () => {
+    setIsGenerating(true);
+    setDraftContent('');
+    setSendStatus('idle');
+    
+    // Connect to FastAPI SSE endpoint
+    const url = `${API_BASE_URL}/api/emails/${emailId}/draft?tone=${tone}`;
+    
+    // Access token from localStorage
+    const token = localStorage.getItem('token') || '';
+    
+    try {
+      const response = await fetch(url, {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to generate draft stream.');
+      }
+
+      const reader = response.body?.getReader();
+      const decoder = new TextDecoder();
+      if (!reader) {
+        throw new Error('No readable stream body.');
+      }
+
+      let done = false;
+      let fullText = '';
+      
+      while (!done) {
+        const { value, done: doneReading } = await reader.read();
+        done = doneReading;
+        if (value) {
+          const chunkStr = decoder.decode(value);
+          // Parse Server Sent Events format "data: text\n\n"
+          const lines = chunkStr.split('\n');
+          for (const line of lines) {
+            if (line.startsWith('data: ')) {
+              const content = line.substring(6);
+              fullText += content;
+              setDraftContent(fullText);
+            }
+          }
+        }
+      }
+    } catch (err: any) {
+      console.error(err);
+      setErrorMsg(err.message || 'Connection lost during drafting.');
+      setSendStatus('error');
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleSend = async () => {
+    if (!draftContent.trim()) return;
+    
+    setIsSending(true);
+    setSendStatus('idle');
+    
+    // Extract target email address
+    let toEmail = emailSender;
+    const match = emailSender.match(/<([^>]+)>/);
+    if (match) {
+      toEmail = match[1];
+    }
+
+    const subject = emailSubject ? `Re: ${emailSubject}` : 'Re: Email';
+    const success = await onSendEmail(toEmail, subject, draftContent);
+    
+    setIsSending(false);
+    if (success) {
+      setSendStatus('success');
+    } else {
+      setErrorMsg('Failed to deliver reply.');
+      setSendStatus('error');
+    }
+  };
+
+  const tones = [
+    { label: '💼 Professional', value: 'professional' },
+    { label: '☕ Casual', value: 'casual' },
+    { label: '⚡ Short / Quick', value: 'short' },
+  ];
+
+  return (
+    <div className="glass-panel border-purple-500/10 rounded-2xl p-6 flex flex-col gap-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 text-purple-400 font-semibold text-sm">
+          <Sparkles size={16} className="fill-purple-400/20" />
+          <span>AI Streaming Reply Composer</span>
+        </div>
+        <div className="text-xs text-slate-500">
+          Powered by GPT-4o-Mini
+        </div>
+      </div>
+
+      {/* Tone Selection */}
+      <div className="flex gap-2.5 bg-slate-950/40 border border-slate-900/60 p-1 rounded-xl">
+        {tones.map((t) => (
+          <button
+            key={t.value}
+            disabled={isGenerating || isSending}
+            onClick={() => setTone(t.value as any)}
+            className={`flex-1 text-center py-2 text-xs font-medium rounded-lg cursor-pointer transition ${
+              tone === t.value
+                ? 'bg-purple-600/20 text-purple-300 border border-purple-500/20'
+                : 'text-slate-500 hover:text-slate-300 border border-transparent'
+            }`}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Generator trigger button */}
+      {draftContent === '' && !isGenerating && (
+        <button
+          onClick={generateDraft}
+          className="glow-btn text-white py-3 rounded-xl font-medium flex items-center justify-center gap-2 text-sm cursor-pointer"
+        >
+          <Sparkles size={14} />
+          <span>Draft Response in {tone.toUpperCase()} Tone</span>
+        </button>
+      )}
+
+      {/* Draft text editor */}
+      {(draftContent !== '' || isGenerating) && (
+        <div className="flex flex-col gap-3">
+          <textarea
+            value={draftContent}
+            onChange={(e) => setDraftContent(e.target.value)}
+            disabled={isGenerating || isSending}
+            rows={8}
+            className="w-full text-sm font-sans leading-relaxed bg-slate-950/50 p-4 border border-slate-900 rounded-xl focus:outline-none focus:border-purple-600 resize-y text-slate-300"
+            placeholder={isGenerating ? "AI is typing reply word-by-word..." : "Edit response..."}
+          />
+
+          <div className="flex items-center justify-between mt-1">
+            {/* Status indicators */}
+            <div>
+              {isGenerating && (
+                <div className="flex items-center gap-2 text-purple-400 text-xs font-medium">
+                  <div className="h-3 w-3 animate-spin rounded-full border border-purple-400 border-t-transparent" />
+                  <span>Streaming draft...</span>
+                </div>
+              )}
+              {sendStatus === 'success' && (
+                <div className="flex items-center gap-1.5 text-emerald-400 text-xs font-medium">
+                  <CheckCircle size={14} />
+                  <span>Reply sent successfully!</span>
+                </div>
+              )}
+              {sendStatus === 'error' && (
+                <div className="flex items-center gap-1.5 text-red-400 text-xs font-medium">
+                  <AlertCircle size={14} />
+                  <span>{errorMsg}</span>
+                </div>
+              )}
+            </div>
+
+            <div className="flex gap-2">
+              <button
+                onClick={generateDraft}
+                disabled={isGenerating || isSending}
+                className="bg-slate-950 border border-slate-800 text-slate-300 hover:text-white px-4 py-2 rounded-xl text-xs font-semibold cursor-pointer transition disabled:opacity-50"
+              >
+                Regenerate
+              </button>
+              
+              <button
+                onClick={handleSend}
+                disabled={isGenerating || isSending || !draftContent.trim()}
+                className="glow-btn text-white px-4.5 py-2 rounded-xl text-xs font-semibold flex items-center gap-1.5 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <Send size={12} />
+                <span>{isSending ? 'Sending...' : 'Send Reply'}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

frontend/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

frontend/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "lucide-react": "^1.21.0",
+    "next": "16.2.9",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.9",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

frontend/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

frontend/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

grafana_dashboard.json

@@ -0,0 +1,185 @@
+{
+  "annotations": {
+    "list": [
+      {
+        "builtIn": 1,
+        "datasource": {
+          "type": "datasource",
+          "uid": "grafana"
+        },
+        "enable": true,
+        "hide": true,
+        "name": "Annotations & Alerts",
+        "type": "dashboard"
+      }
+    ]
+  },
+  "editable": true,
+  "fiscalYearStartMonth": 0,
+  "graphTooltip": 0,
+  "id": null,
+  "links": [],
+  "liveNow": false,
+  "panels": [
+    {
+      "collapsed": false,
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 0,
+        "y": 0
+      },
+      "id": 1,
+      "title": "API Request Rate (QPS)",
+      "type": "timeseries",
+      "datasource": {
+        "type": "prometheus",
+        "uid": "prometheus"
+      },
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "prometheus"
+          },
+          "editorMode": "code",
+          "expr": "sum(rate(http_requests_total[1m]))",
+          "legendFormat": "Requests per Second",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "fieldConfig": {
+        "defaults": {
+          "custom": {
+            "drawStyle": "line",
+            "lineInterpolation": "smooth",
+            "fillOpacity": 15
+          },
+          "unit": "req/sec"
+        }
+      }
+    },
+    {
+      "collapsed": false,
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 12,
+        "y": 0
+      },
+      "id": 2,
+      "title": "Average Request Latency",
+      "type": "timeseries",
+      "datasource": {
+        "type": "prometheus",
+        "uid": "prometheus"
+      },
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "prometheus"
+          },
+          "editorMode": "code",
+          "expr": "sum(rate(http_request_duration_seconds_sum[5m])) / sum(rate(http_request_duration_seconds_count[5m]))",
+          "legendFormat": "Latency (s)",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "fieldConfig": {
+        "defaults": {
+          "custom": {
+            "drawStyle": "line",
+            "lineInterpolation": "smooth"
+          },
+          "unit": "s"
+        }
+      }
+    },
+    {
+      "collapsed": false,
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 0,
+        "y": 8
+      },
+      "id": 3,
+      "title": "Celery Task Execution Rate",
+      "type": "timeseries",
+      "datasource": {
+        "type": "prometheus",
+        "uid": "prometheus"
+      },
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "prometheus"
+          },
+          "editorMode": "code",
+          "expr": "sum(rate(celery_task_status_count_total[5m])) by (status)",
+          "legendFormat": "{{status}} Tasks",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "fieldConfig": {
+        "defaults": {
+          "custom": {
+            "drawStyle": "line"
+          }
+        }
+      }
+    },
+    {
+      "collapsed": false,
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 12,
+        "y": 8
+      },
+      "id": 4,
+      "title": "AI Agent Runs (Success / Failure)",
+      "type": "timeseries",
+      "datasource": {
+        "type": "prometheus",
+        "uid": "prometheus"
+      },
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "prometheus"
+          },
+          "editorMode": "code",
+          "expr": "sum(rate(agent_run_duration_seconds_count[5m])) by (status)",
+          "legendFormat": "Agent Status: {{status}}",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "fieldConfig": {
+        "defaults": {
+          "custom": {
+            "drawStyle": "line"
+          }
+        }
+      }
+    }
+  ],
+  "schemaVersion": 38,
+  "style": "dark",
+  "tags": ["fastapi", "email-agent"],
+  "time": {
+    "from": "now-1h",
+    "to": "now"
+  },
+  "timepicker": {},
+  "timezone": "browser",
+  "title": "Agentic AI Email Observability Dashboard",
+  "version": 1
+}

prometheus.yml

@@ -0,0 +1,9 @@
+global:
+  scrape_interval: 5s
+  evaluation_interval: 5s
+
+scrape_configs:
+  - job_name: "fastapi-backend"
+    metrics_path: "/metrics"
+    static_configs:
+      - targets: ["host.docker.internal:8000"]