Progress page working

web/app/[runId]/strategy/page.tsx → web/app/strategy/[id]/page.tsx

@@ -7,7 +7,6 @@ export default async function StrategyPage({
 }: {
   params: { id: string };
 }) {
-  const workerId = params.id;
   const supabase = createSupabaseServerClient();
 
   // // Fetch the runs for this worker
@@ -25,13 +24,13 @@ export default async function StrategyPage({
       )
     `
     )
-    .eq("worker_id", workerId)
+    .eq("id", params.id)
     .order("created_at", { ascending: false })
     .single();
 
   if (runs.error || !runs.data) {
     console.error(runs.error);
-    throw Error(`Runs with worker_id ${workerId} not found.`);
+    throw Error(`Runs with id ${params.id} not found.`);
   }
 
   const data = runs.data.strategy_entries as unknown as StrategyWithProjects;

web/app/[runId]/progress/page.tsx → web/app/strategy/[id]/progress/page.tsx

@@ -2,12 +2,12 @@ import Logs from "@/components/Logs";
 
 export default function ProgressPage(props: {
   params: {
-    runId: string
+    id: string
   }
 }) {
   return (
     <div className="w-full flex justify-center h-full p-16">
-      <Logs runId={props.params.runId} />
+      <Logs runId={props.params.id} />
     </div>
   )
 }

web/components/Logs.tsx

@@ -19,7 +19,6 @@ export default async function Logs(props: { runId: string }) {
       step_name
     )
   `).eq("id", props.runId).single()
-
 
   if (!run) {
     throw new Error(`Run with ID '${props.runId}' not found`)

web/components/RealtimeLogs.tsx

@@ -6,6 +6,8 @@ import clsx from "clsx";
 import { useRouter } from "next/navigation";
 import { useState, useEffect } from "react";
 import LoadingCircle from "./LoadingCircle";
+import TextField from "./TextField";
+import Button from "./Button";
 
 const UNSTARTED_TEXTS: Record<Tables<"logs">["step_name"], string> = {
   FETCH_PROJECTS: "Search for relevant projects",
@@ -37,6 +39,16 @@ const getLogMessage = (log: Tables<"logs">) => {
   }
 }
 
+const checkIfFinished = (logs: Tables<"logs">[]) => {
+  const sortedLogs = logs.sort((a, b) => {
+    return STEPS_ORDER[a.step_name] - STEPS_ORDER[b.step_name]
+  })
+  const lastStep = sortedLogs.slice(-1)[0];
+  const isFinished = lastStep.status === "COMPLETED" && lastStep.step_name === "SYNTHESIZE_RESULTS"
+
+  return isFinished
+}
+
 export default function RealtimeLogs(props: {
   logs: Tables<"logs">[]
   run: {
@@ -52,6 +64,12 @@ export default function RealtimeLogs(props: {
     return STEPS_ORDER[a.step_name] - STEPS_ORDER[b.step_name]
   })
 
+  const isFinished = checkIfFinished(sortedLogsWithSteps)
+
+  const navigateToStrategy = () => {
+    router.push(`../${props.run.id}`)
+  }
+
   useEffect(() => {
     const channel = supabase
       .channel("logs-added")
@@ -63,18 +81,26 @@ export default function RealtimeLogs(props: {
           schema: "public",
           filter: `run_id=eq.${props.run.id}`,
         },
-        (payload: { new: Tables<"logs"> }) => {
-          const updatedLogs = logs.map(log => {
-            if (log.id === payload.new.id) {
-              log = payload.new
-            }
-
-            return log
-          })
+        async () => {
+          const response = await supabase.from("logs").select(`
+            id,
+            run_id,
+            created_at,
+            value,
+            ended_at,
+            status,
+            step_name
+          `).eq("run_id", props.run.id)
+          const updatedLogs = response.data
+
+          if (!updatedLogs) {
+            throw new Error(`Logs for Run with ID '${props.run.id}' not found`)
+          }
+
           setLogs([...updatedLogs])
 
-          if (payload.new.step_name === "SYNTHESIZE_RESULTS" && payload.new.status === "COMPLETED") {
-            router.push(`/${props.run.id}/strategy`)
+          if (checkIfFinished(updatedLogs)) {
+            navigateToStrategy()
             return;
           }
         }
@@ -89,18 +115,19 @@ export default function RealtimeLogs(props: {
   return (
     <div className="w-full max-w-3xl flex flex-col gap-8">
       <div className="flex flex-col gap-2">
-        <p>Results for:</p>
-        <div className="p-4 flex flex-nowrap items-center gap-1 border border-indigo-500 rounded-lg bg-indigo-500/50">
-          <span className="flex-1">{props.run.prompt}</span>
-        </div>
+        <TextField
+          label='Results for'
+          value={props.run.prompt}
+          readOnly={true}
+        />
       </div>
       <div className="w-full h-[1px] bg-indigo-500" />
       <div className="flex flex-col gap-4">
         <p>Results:</p>
         <div className="flex flex-col gap-2">
           { sortedLogsWithSteps.map(log => (
             <div className={clsx(
-              "p-4 flex flex-nowrap items-center gap-2 border border-indigo-500 rounded-lg bg-indigo-500/50",
+              "p-4 flex flex-nowrap items-center gap-2 border border-indigo-500 rounded-lg bg-indigo-500/50 cursor-pointer",
               log.status === "IN_PROGRESS" ? "text-indigo-50" : ""
             )}>
               { log.status === "IN_PROGRESS" ? <LoadingCircle hideText={true} className="!stroke-indigo-500 text-indigo-200" /> : <></>}
@@ -116,6 +143,9 @@ export default function RealtimeLogs(props: {
           )) }
         </div>
       </div>
+      <Button disabled={!isFinished} onClick={() => navigateToStrategy()}>
+        View Results
+      </Button>
     </div>
   )
 }