fix: show success criteria on first render

Author: Marfuen

apps/app/package.json

@@ -49,8 +49,8 @@
     "@tiptap/extension-table-cell": "^3.4.4",
     "@tiptap/extension-table-header": "^3.4.4",
     "@tiptap/extension-table-row": "^3.4.4",
-    "@trigger.dev/react-hooks": "4.0.0",
-    "@trigger.dev/sdk": "4.0.0",
+    "@trigger.dev/react-hooks": "4.0.6",
+    "@trigger.dev/sdk": "4.0.6",
     "@trycompai/db": "^1.3.7",
     "@trycompai/email": "workspace:*",
     "@types/canvas-confetti": "^1.9.0",
@@ -117,7 +117,7 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
-    "@trigger.dev/build": "4.0.0",
+    "@trigger.dev/build": "4.0.6",
     "@types/d3": "^7.4.3",
     "@types/jspdf": "^2.0.0",
     "@types/node": "^24.0.3",
@@ -157,7 +157,7 @@
     "db:getschema": "node ../../packages/db/scripts/combine-schemas.js && cp ../../packages/db/dist/schema.prisma prisma/schema.prisma",
     "db:migrate": "cd ../../packages/db && bunx prisma migrate dev && cd ../../apps/app",
     "deploy:trigger-prod": "npx [email protected] deploy",
-    "dev": "bun i && bunx concurrently --kill-others --names \"next,trigger\" --prefix-colors \"yellow,blue\" \"next dev --turbo -p 3000\" \"bun run trigger:dev\"",
+    "dev": "bun i && bunx concurrently --kill-others --names \"next,trigger\" --prefix-colors \"yellow,blue\" \"next dev --turbo -p 3000\" \"bunx trigger[email protected] dev\"",
     "lint": "next lint && prettier --check .",
     "prebuild": "bun run db:generate",
     "start": "next start",
@@ -173,7 +173,6 @@
     "test:e2e:ui": "playwright test --ui",
     "test:ui": "vitest --ui",
     "test:watch": "vitest --watch",
-    "trigger:dev": "npx [email protected] dev",
     "typecheck": "tsc --noEmit"
   }
 }

apps/app/src/app/(app)/[orgId]/tasks/[taskId]/automation/[automationId]/components/evaluation/EvaluationCriteriaCard.tsx

@@ -3,9 +3,10 @@
 import { Button } from '@comp/ui/button';
 import { Textarea } from '@comp/ui/textarea';
 import { Save } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import { updateEvaluationCriteria } from '../../actions/task-automation-actions';
+import { useTaskAutomation } from '../../hooks/use-task-automation';
 
 interface EvaluationCriteriaCardProps {
   automationId: string;
@@ -17,17 +18,27 @@ export function EvaluationCriteriaCard({
   automationId,
   initialCriteria,
 }: EvaluationCriteriaCardProps) {
+  const { automation } = useTaskAutomation();
   const [isEditing, setIsEditing] = useState(false);
   const [criteria, setCriteria] = useState(initialCriteria || '');
   const [isSaving, setIsSaving] = useState(false);
 
+  // Update local state when automation data changes
+  useEffect(() => {
+    if (automation?.evaluationCriteria) {
+      setCriteria(automation.evaluationCriteria);
+    }
+  }, [automation?.evaluationCriteria]);
+
   const handleSave = async () => {
     setIsSaving(true);
     try {
       const result = await updateEvaluationCriteria(automationId, criteria);
       if (result.success) {
         toast.success('Success criteria updated');
         setIsEditing(false);
+        // Emit event to trigger refresh across the app
+        window.dispatchEvent(new CustomEvent('task-automation:criteria-updated'));
       } else {
         toast.error(result.error || 'Failed to update criteria');
       }

apps/app/src/app/(app)/[orgId]/tasks/[taskId]/automation/[automationId]/components/workflow/components/UnifiedWorkflowCard.tsx

@@ -4,6 +4,8 @@ import { Card, CardContent, CardHeader, CardTitle } from '@comp/ui/card';
 import { Loader2, Play, Zap } from 'lucide-react';
 import Image from 'next/image';
 import { useEffect, useState } from 'react';
+import { useTaskAutomation } from '../../../hooks/use-task-automation';
+import { useSharedChatContext } from '../../../lib/chat-context';
 import { EvaluationCriteriaCard } from '../../evaluation/EvaluationCriteriaCard';
 
 interface WorkflowStep {
@@ -42,8 +44,19 @@ export function UnifiedWorkflowCard({
   evaluationCriteria,
   automationId,
 }: Props) {
+  const { automationIdRef } = useSharedChatContext();
   const [isAnimationComplete, setIsAnimationComplete] = useState(false);
 
+  // Use the real automation ID from ref (not "new")
+  const realAutomationId =
+    automationIdRef.current !== 'new' ? automationIdRef.current : automationId;
+
+  // Fetch automation data with the correct ID
+  const { automation } = useTaskAutomation(realAutomationId);
+
+  // Use live automation data for criteria, fallback to prop
+  const liveCriteria = automation?.evaluationCriteria || evaluationCriteria;
+
   useEffect(() => {
     // Calculate total animation time: card (1s) + expansion (1s) + all steps
     const totalAnimationTime = 2500 + steps.length * 1200;
@@ -140,14 +153,14 @@ export function UnifiedWorkflowCard({
         </Card>
       </CardContent>
 
-      {/* Evaluation Criteria Section */}
-      {evaluationCriteria !== undefined && automationId && isAnimationComplete && (
-        <div className="px-4 pb-4 pt-2">
+      {/* Evaluation Criteria Section - Show after animation */}
+      {realAutomationId && realAutomationId !== 'new' && isAnimationComplete && (
+        <div className="px-4 pb-4 pt-2 animate-in fade-in duration-500">
           <div className="max-w-[650px] mx-auto">
             <EvaluationCriteriaCard
-              automationId={automationId}
-              initialCriteria={evaluationCriteria}
-              isAiGenerated={!!evaluationCriteria}
+              automationId={realAutomationId}
+              initialCriteria={liveCriteria}
+              isAiGenerated={!!liveCriteria}
             />
           </div>
         </div>

apps/app/src/app/(app)/[orgId]/tasks/[taskId]/automation/[automationId]/components/workflow/workflow-visualizer-simple.tsx

@@ -63,7 +63,11 @@ export function WorkflowVisualizerSimple({ className }: Props) {
   const [publishDialogOpen, setPublishDialogOpen] = useState(false);
   const [isRestoring, setIsRestoring] = useState(false);
   const [confirmRestore, setConfirmRestore] = useState<EvidenceAutomationVersion | null>(null);
-  const { automation, mutate: mutateAutomation } = useTaskAutomation();
+  const {
+    automation,
+    mutate: mutateAutomation,
+    isLoading: isLoadingAutomation,
+  } = useTaskAutomation();
   const { versions } = useAutomationVersions();
 
   // Update shared ref when automation is loaded from hook
@@ -110,8 +114,15 @@ export function WorkflowVisualizerSimple({ className }: Props) {
       // Also refresh automation data to get updated evaluationCriteria
       mutateAutomation();
     };
+    const handleCriteriaUpdated = () => {
+      mutateAutomation();
+    };
     window.addEventListener('task-automation:script-saved', handleScriptSaved);
-    return () => window.removeEventListener('task-automation:script-saved', handleScriptSaved);
+    window.addEventListener('task-automation:criteria-updated', handleCriteriaUpdated);
+    return () => {
+      window.removeEventListener('task-automation:script-saved', handleScriptSaved);
+      window.removeEventListener('task-automation:criteria-updated', handleCriteriaUpdated);
+    };
   }, [refresh, mutateAutomation]);
 
   useEffect(() => {
@@ -327,6 +338,7 @@ Please fix the automation script to resolve this error.`;
                     <WorkflowSkeleton />
                   ) : steps.length > 0 ? (
                     <UnifiedWorkflowCard
+                      key={`workflow-${automation?.id}-${automation?.evaluationCriteria ? 'with-criteria' : 'no-criteria'}`}
                       steps={steps}
                       title={title || 'Automation Workflow'}
                       onTest={handleTest}

apps/app/src/app/(app)/[orgId]/tasks/[taskId]/automation/[automationId]/hooks/use-task-automation.ts

@@ -23,29 +23,43 @@ interface UseTaskAutomationReturn {
   mutate: () => Promise<any>;
 }
 
-export function useTaskAutomation(): UseTaskAutomationReturn {
-  const { orgId, taskId, automationId } = useParams<{
+export function useTaskAutomation(overrideAutomationId?: string): UseTaskAutomationReturn {
+  const {
+    orgId,
+    taskId,
+    automationId: paramsAutomationId,
+  } = useParams<{
     orgId: string;
     taskId: string;
     automationId: string;
   }>();
 
+  // Use override ID if provided, otherwise use params
+  const automationId = overrideAutomationId || paramsAutomationId;
+
+  // Skip fetching if automationId is "new"
+  const shouldFetch = automationId && automationId !== 'new';
+
   const { data, error, isLoading, mutate } = useSWR(
-    [`automation-${automationId}`, orgId, taskId, automationId],
+    shouldFetch ? [`automation-${automationId}`, orgId, taskId, automationId] : null,
     async () => {
       const response = await api.get<{
         success: boolean;
         automation: TaskAutomationData;
       }>(`/v1/tasks/${taskId}/automations/${automationId}`, orgId);
 
       if (response.error) {
+        console.log('failed to fetch automation', response.error);
         throw new Error(response.error);
       }
 
       if (!response.data?.success) {
+        console.log('failed to fetch automation', response.data);
         throw new Error('Failed to fetch automation');
       }
 
+      console.log('response.data.automation', response.data.automation);
+
       return response.data.automation;
     },
     {

apps/app/src/app/(app)/[orgId]/tasks/[taskId]/automations/[automationId]/overview/components/AutomationOverview.tsx

@@ -16,9 +16,10 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@comp/ui/dropdown-menu';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@comp/ui/select';
 import { Textarea } from '@comp/ui/textarea';
 import { EvidenceAutomation, EvidenceAutomationRun, EvidenceAutomationVersion, Task } from '@db';
-import { ChevronRight, MoreVertical, Trash2 } from 'lucide-react';
+import { ChevronRight, Loader2, MoreVertical, Play, Trash2 } from 'lucide-react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { useMemo, useRef, useState } from 'react';
@@ -58,6 +59,8 @@ export function AutomationOverview({
   const [isTogglingEnabled, setIsTogglingEnabled] = useState(false);
   const [editingDescription, setEditingDescription] = useState(false);
   const [descriptionValue, setDescriptionValue] = useState('');
+  const [selectedVersion, setSelectedVersion] = useState<number | null>(null);
+  const [isTestingVersion, setIsTestingVersion] = useState(false);
   const descriptionInputRef = useRef<HTMLTextAreaElement>(null);
 
   // Use the automation hook to get live data and mutate function
@@ -66,6 +69,12 @@ export function AutomationOverview({
   // Use live data from hook if available, fallback to initial data
   const automation = liveAutomation || initialAutomation;
 
+  // Set initial selected version to latest
+  const latestVersion = initialVersions.length > 0 ? initialVersions[0].version : null;
+  if (selectedVersion === null && latestVersion !== null) {
+    setSelectedVersion(latestVersion);
+  }
+
   const handleToggleEnabled = async (enabled: boolean) => {
     if (!automation?.id) return;
 
@@ -93,6 +102,21 @@ export function AutomationOverview({
     setTimeout(() => descriptionInputRef.current?.focus(), 0);
   };
 
+  const handleTestVersion = async () => {
+    if (!selectedVersion) return;
+
+    setIsTestingVersion(true);
+    try {
+      // TODO: Call API to execute specific version
+      toast.success(`Testing version ${selectedVersion}...`);
+      // The actual test execution would happen here
+    } catch (error) {
+      toast.error('Failed to start test');
+    } finally {
+      setIsTestingVersion(false);
+    }
+  };
+
   const saveDescriptionEdit = async () => {
     if (descriptionValue === (automation.description || '')) {
       setEditingDescription(false);
@@ -245,6 +269,45 @@ export function AutomationOverview({
                     </p>
                   )}
                 </div>
+
+                {/* Version Selector */}
+                {initialVersions.length > 0 && (
+                  <div className="flex flex-col gap-2">
+                    <p className="text-xs font-medium text-muted-foreground">Test Version</p>
+                    <div className="flex items-center gap-2">
+                      <Select
+                        value={selectedVersion?.toString() || ''}
+                        onValueChange={(value) => setSelectedVersion(parseInt(value))}
+                      >
+                        <SelectTrigger className="h-9 text-sm flex-1">
+                          <SelectValue placeholder="Select version" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {initialVersions.map((v) => (
+                            <SelectItem key={v.version} value={v.version.toString()}>
+                              v{v.version}
+                              {v.changelog &&
+                                ` - ${v.changelog.substring(0, 30)}${v.changelog.length > 30 ? '...' : ''}`}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={handleTestVersion}
+                        disabled={!selectedVersion || isTestingVersion}
+                      >
+                        {isTestingVersion ? (
+                          <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                        ) : (
+                          <Play className="w-3.5 h-3.5" />
+                        )}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+
                 <div className="flex flex-col gap-1">
                   <p className="text-xs font-medium text-muted-foreground">Created</p>
                   <p className="text-sm">