feat: add CSV export for company analysis results

Add GET /export/{company_name} backend endpoint that returns analysis records as a downloadable CSV file. Add Export CSV button to the Analysis page that triggers the download via the API. Closes leeworks-agents/SPARC#20 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-26 10:20:51 +00:00
12 changed files with 100 additions and 109 deletions
@@ -9,7 +9,7 @@ from typing import Annotated, List

 from fastapi import BackgroundTasks, Depends, FastAPI, HTTPException, Query, Request
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import JSONResponse
+from fastapi.responses import JSONResponse, StreamingResponse
 from pydantic import BaseModel, EmailStr, Field
 from slowapi import Limiter
 from slowapi.errors import RateLimitExceeded
@@ -389,6 +389,61 @@ async def get_analytics(
    )


+# ============== Export Endpoints ==============
+
+
+@app.get("/export/{company_name}", tags=["Export"])
+async def export_company_csv(
+    company_name: str,
+    _: UserResponse = Depends(get_current_user),
+):
+    """Export analysis results for a company as a CSV file.
+
+    Returns all stored analysis records for the given company, including
+    analysis type, model used, response text, and timestamp.
+
+    Args:
+        company_name: Company name to export results for
+
+    Returns:
+        CSV file download
+    """
+    import csv
+    import io
+
+    db = get_db_client()
+    # Query all non-cached analysis results for this company
+    with db.get_conn() as conn:
+        with conn.cursor() as cur:
+            cur.execute(
+                """
+                SELECT company_name, analysis_type, model, response, timestamp
+                FROM llm_messages
+                WHERE LOWER(company_name) = LOWER(%s) AND is_cached = FALSE
+                ORDER BY timestamp DESC
+                """,
+                (company_name,),
+            )
+            rows = cur.fetchall()
+
+    if not rows:
+        raise HTTPException(status_code=404, detail=f"No analysis results found for '{company_name}'")
+
+    output = io.StringIO()
+    writer = csv.writer(output)
+    writer.writerow(["company_name", "analysis_type", "model", "analysis", "timestamp"])
+    for row in rows:
+        writer.writerow(row)
+
+    output.seek(0)
+    safe_name = company_name.replace(" ", "_").lower()
+    return StreamingResponse(
+        iter([output.getvalue()]),
+        media_type="text/csv",
+        headers={"Content-Disposition": f'attachment; filename="sparc_{safe_name}_export.csv"'},
+    )
+
+
 # ============== System Endpoints ==============


@@ -7,15 +7,6 @@
    <title>SPARC Dashboard</title>
  </head>
  <body>
-    <script>
-      // Prevent FOUC: apply saved theme before first render
-      (function() {
-        var theme = localStorage.getItem('theme');
-        if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-          document.documentElement.classList.add('dark');
-        }
-      })();
-    </script>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
@@ -1,7 +1,6 @@
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { AuthProvider } from './context/AuthContext';
-import { ThemeProvider } from './context/ThemeContext';
 import { Layout } from './components/Layout';
 import { ProtectedRoute } from './components/ProtectedRoute';
 import { Login } from './pages/Login';
@@ -23,7 +22,6 @@ const queryClient = new QueryClient({

 function App() {
  return (
-    <ThemeProvider>
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <BrowserRouter>
@@ -63,7 +61,6 @@ function App() {
        </BrowserRouter>
      </AuthProvider>
    </QueryClientProvider>
-    </ThemeProvider>
  );
 }

@@ -126,6 +126,23 @@ export const analysisApi = {
  },
 };

+// Export API
+export const exportApi = {
+  exportCsv: async (companyName: string): Promise<void> => {
+    const response = await api.get(`/export/${encodeURIComponent(companyName)}`, {
+      responseType: 'blob',
+    });
+    const url = window.URL.createObjectURL(new Blob([response.data]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', `sparc_${companyName.toLowerCase().replace(/\s+/g, '_')}_export.csv`);
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    window.URL.revokeObjectURL(url);
+  },
+};
+
 // Analytics API
 export const analyticsApi = {
  getAnalytics: async (days = 30): Promise<Analytics> => {
@@ -1,11 +1,9 @@
 import { Outlet, NavLink, useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
-import { useTheme } from '../context/ThemeContext';
-import { Search, Layers, BarChart3, Info, Users, LogOut, Sun, Moon } from 'lucide-react';
+import { Search, Layers, BarChart3, Info, Users, LogOut } from 'lucide-react';

 export function Layout() {
  const { user, isAdmin, logout } = useAuth();
-  const { theme, toggleTheme } = useTheme();
  const navigate = useNavigate();

  const handleLogout = () => {
@@ -25,7 +23,7 @@ export function Layout() {
  }

  return (
-    <div className="min-h-screen bg-gradient-to-br from-bg-dark to-slate-100 dark:to-indigo-950">
+    <div className="min-h-screen bg-gradient-to-br from-bg-dark to-indigo-950">
      {/* Header */}
      <header className="bg-bg-card/80 backdrop-blur-lg border-b border-primary/20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -65,13 +63,6 @@ export function Layout() {

            {/* User menu */}
            <div className="flex items-center gap-4">
-              <button
-                onClick={toggleTheme}
-                className="p-2 rounded-lg text-text-secondary hover:text-text-primary hover:bg-bg-card-hover transition-all"
-                aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
-              >
-                {theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
-              </button>
              <div className="text-right hidden sm:block">
                <div className="text-sm font-medium text-text-primary">{user?.email}</div>
                <div className="text-xs text-text-secondary capitalize">{user?.role}</div>
@@ -12,7 +12,7 @@ export function ProtectedRoute({ children, requireAdmin = false }: ProtectedRout

  if (isLoading) {
    return (
-      <div className="min-h-screen bg-gradient-to-br from-bg-dark to-slate-100 dark:to-indigo-950 flex items-center justify-center">
+      <div className="min-h-screen bg-gradient-to-br from-bg-dark to-indigo-950 flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
      </div>
    );
@@ -1,48 +0,0 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-
-type Theme = 'light' | 'dark';
-
-interface ThemeContextType {
-  theme: Theme;
-  toggleTheme: () => void;
-}
-
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
-
-function getInitialTheme(): Theme {
-  const stored = localStorage.getItem('theme');
-  if (stored === 'light' || stored === 'dark') return stored;
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-}
-
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [theme, setTheme] = useState<Theme>(getInitialTheme);
-
-  useEffect(() => {
-    const root = document.documentElement;
-    if (theme === 'dark') {
-      root.classList.add('dark');
-    } else {
-      root.classList.remove('dark');
-    }
-    localStorage.setItem('theme', theme);
-  }, [theme]);
-
-  const toggleTheme = () => {
-    setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
-  };
-
-  return (
-    <ThemeContext.Provider value={{ theme, toggleTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export function useTheme() {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return context;
-}
@@ -2,26 +2,6 @@
@tailwind components;
@tailwind utilities;

-/* Light mode (default) */
-:root {
-  --color-bg-dark: #f1f5f9;
-  --color-bg-card: #ffffff;
-  --color-bg-card-hover: #e2e8f0;
-  --color-text-primary: #0f172a;
-  --color-text-secondary: #475569;
-  --color-border: #cbd5e1;
-}
-
-/* Dark mode */
-.dark {
-  --color-bg-dark: #0f172a;
-  --color-bg-card: #1e293b;
-  --color-bg-card-hover: #334155;
-  --color-text-primary: #f8fafc;
-  --color-text-secondary: #94a3b8;
-  --color-border: #334155;
-}
-
 body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
@@ -35,7 +15,7 @@ body {
 }

 ::-webkit-scrollbar-track {
-  background: var(--color-bg-card);
+  background: #1e293b;
 }

 ::-webkit-scrollbar-thumb {
@@ -50,5 +30,5 @@ body {
 /* Selection */
 ::selection {
  background: rgba(99, 102, 241, 0.3);
-  color: var(--color-text-primary);
+  color: #f8fafc;
 }
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
-import { analysisApi } from '../api/client';
-import { Search, CheckCircle, AlertCircle, Clock, FileText } from 'lucide-react';
+import { analysisApi, exportApi } from '../api/client';
+import { Search, CheckCircle, AlertCircle, Clock, FileText, Download } from 'lucide-react';
 import type { CompanyAnalysis } from '../types';

 export function Analysis() {
@@ -106,9 +106,18 @@ export function Analysis() {
          {/* Analysis Content */}
          {result.success && result.analysis && (
            <div className="bg-bg-card/60 backdrop-blur-lg border border-primary/15 rounded-2xl p-6">
-              <h3 className="text-lg font-semibold text-text-primary border-b-2 border-primary/30 pb-2 mb-4">
-                AI Analysis Results
-              </h3>
+              <div className="flex items-center justify-between border-b-2 border-primary/30 pb-2 mb-4">
+                <h3 className="text-lg font-semibold text-text-primary">
+                  AI Analysis Results
+                </h3>
+                <button
+                  onClick={() => exportApi.exportCsv(result.company_name)}
+                  className="flex items-center gap-2 text-sm bg-primary/20 hover:bg-primary/30 text-primary font-medium px-3 py-1.5 rounded-lg transition-colors"
+                >
+                  <Download size={14} />
+                  Export CSV
+                </button>
+              </div>
              <div className="prose prose-invert max-w-none">
                <div className="text-text-primary whitespace-pre-wrap leading-relaxed">
                  {result.analysis}
@@ -31,7 +31,7 @@ export function Login() {
  };

  return (
-    <div className="min-h-screen bg-gradient-to-br from-bg-dark to-slate-100 dark:to-indigo-950 flex items-center justify-center px-4">
+    <div className="min-h-screen bg-gradient-to-br from-bg-dark to-indigo-950 flex items-center justify-center px-4">
      <div className="w-full max-w-md">
        {/* Brand */}
        <div className="text-center mb-8">
@@ -40,7 +40,7 @@ export function Register() {
  };

  return (
-    <div className="min-h-screen bg-gradient-to-br from-bg-dark to-slate-100 dark:to-indigo-950 flex items-center justify-center px-4">
+    <div className="min-h-screen bg-gradient-to-br from-bg-dark to-indigo-950 flex items-center justify-center px-4">
      <div className="w-full max-w-md">
        {/* Brand */}
        <div className="text-center mb-8">
@@ -4,7 +4,6 @@ export default {
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
-  darkMode: 'class',
  theme: {
    extend: {
      colors: {
@@ -17,15 +16,15 @@ export default {
        warning: '#f59e0b',
        error: '#ef4444',
        bg: {
-          dark: 'var(--color-bg-dark)',
-          card: 'var(--color-bg-card)',
-          'card-hover': 'var(--color-bg-card-hover)',
+          dark: '#0f172a',
+          card: '#1e293b',
+          'card-hover': '#334155',
        },
        text: {
-          primary: 'var(--color-text-primary)',
-          secondary: 'var(--color-text-secondary)',
+          primary: '#f8fafc',
+          secondary: '#94a3b8',
        },
-        border: 'var(--color-border)',
+        border: '#334155',
      },
    },
  },