X-API-Key: your-api-key-here

NEXT_PUBLIC_SILVIA_DEEP_RESEARCH_API_KEY=your-api-key-here

{
  "question": "Analyze my portfolio risks",
  "clerk_id": "user_2q...",
  "session_id": "optional-custom-session-id" 
}

{
  "session_id": "abc123",
  "planner_calls": 3,
  "executor_calls": 45,
  "web_report_calls": 2,
  "report_calls": 5,
  "total_calls": 55,
  "web_report_path": "s3://...",
  "report_path": "s3://...",
  "cache_stats": { ... },
  "estimated_savings": 0.45
}

// hooks/useAnalysis.ts
import { useState, useCallback } from "react";
import { v4 as uuidv4 } from 'uuid';
import { supabase } from "@/lib/supabase"; // Your supabase client

export function useAnalysis() {
  const [sessionId, setSessionId] = useState<string | null>(null);
  const [status, setStatus] = useState("idle");
  const [error, setError] = useState<string | null>(null);

  const startAnalysis = useCallback(async (question: string, clerkId: string) => {
    // 1. Generate ID client-side
    const newSessionId = uuidv4().replace(/-/g, '').slice(0, 8); // 8-char hex
    setSessionId(newSessionId);
    setStatus("starting");
    setError(null);

    try {
      // 2. Start API request (Don't await response if you want to unblock UI)
      // We rely on Supabase for the actual completion state
      fetch("https://research.cfosilvia.com/api/analysis", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-API-Key": process.env.NEXT_PUBLIC_SILVIA_DEEP_RESEARCH_API_KEY!,
        },
        body: JSON.stringify({ 
          question, 
          clerk_id: clerkId,
          session_id: newSessionId 
        }),
      }).catch(err => {
        // Handle network errors (timeouts are expected and okay if using Supabase)
        console.warn("API Request completed or timed out:", err);
      });

      setStatus("running");
      
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to start analysis");
      setStatus("error");
    }
  }, []);

  return { startAnalysis, sessionId, status, error };
}

// app/api/report/content/route.ts
import { NextResponse } from "next/server";
import { S3Client, GetObjectCommand } from "@aws-sdk/client-s3";

const s3 = new S3Client({ 
  region: process.env.AWS_REGION,
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
  }
});

export async function POST(req: Request) {
  const { s3Key } = await req.json();
  
  // s3Key format: "{env}/{clerk_id}/{date}/{session_id}/data/report_web.md"
  // or full path. Adjust logic to extract Key.
  
  // Assuming s3Key is the Key and bucket is in env
  const bucket = process.env.S3_BUCKET_NAME;

  try {
    const command = new GetObjectCommand({
      Bucket: bucket,
      Key: s3Key, 
    });
    
    const response = await s3.send(command);
    const str = await response.Body?.transformToString();
    
    return NextResponse.json({ content: str });
  } catch (e) {
    return NextResponse.json({ error: "Failed to fetch report" }, { status: 500 });
  }
}

// components/ReportView.tsx
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

export function ReportView({ markdown }: { markdown: string }) {
  return (
    <article className="prose prose-slate max-w-none dark:prose-invert">
      <ReactMarkdown 
        remarkPlugins={[remarkGfm]}
        components={{
          img: ({node, ...props}) => (
            <img {...props} className="rounded-lg shadow-lg my-6" loading="lazy" />
          ),
          table: ({children}) => (
             <div className="overflow-x-auto my-4">
               <table className="min-w-full border-collapse">{children}</table>
             </div>
          )
        }}
      >
        {markdown}
      </ReactMarkdown>
    </article>
  );
}