Agent Zero
384 lines
13 KiB
TypeScript
384 lines
13 KiB
TypeScript
import { asError } from '@/utils/errorTypes';
|
|
import React, { useState } from 'react';
|
|
import {
|
|
useWorkflowInstance,
|
|
useAdvanceWorkflowInstance,
|
|
useCancelWorkflowInstance,
|
|
} from '@/api/workflows';
|
|
import { Modal } from '@/components/ui/Modal';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Badge } from '@/components/ui/Badge';
|
|
import { Input } from '@/components/ui/Input';
|
|
import { Skeleton } from '@/components/ui/Skeleton';
|
|
import { useToast } from '@/components/ui/Toast';
|
|
import {
|
|
CheckCircle2,
|
|
XCircle,
|
|
Ban,
|
|
Clock,
|
|
AlertCircle,
|
|
} from 'lucide-react';
|
|
|
|
function statusBadgeVariant(
|
|
status: string
|
|
): 'success' | 'warning' | 'danger' | 'info' | 'secondary' {
|
|
switch (status) {
|
|
case 'completed':
|
|
return 'success';
|
|
case 'in_progress':
|
|
return 'info';
|
|
case 'pending':
|
|
return 'warning';
|
|
case 'rejected':
|
|
return 'danger';
|
|
case 'cancelled':
|
|
return 'secondary';
|
|
default:
|
|
return 'secondary';
|
|
}
|
|
}
|
|
|
|
function statusLabel(status: string): string {
|
|
const map: Record<string, string> = {
|
|
pending: 'Wartend',
|
|
in_progress: 'In Bearbeitung',
|
|
completed: 'Abgeschlossen',
|
|
rejected: 'Abgelehnt',
|
|
cancelled: 'Abgebrochen',
|
|
};
|
|
return map[status] ?? status;
|
|
}
|
|
|
|
function stepTypeLabel(type: string): string {
|
|
const map: Record<string, string> = {
|
|
action: 'Action',
|
|
approval: 'Approval',
|
|
notification: 'Notification',
|
|
condition: 'Condition',
|
|
};
|
|
return map[type] ?? type;
|
|
}
|
|
|
|
export interface WorkflowInstanceDetailProps {
|
|
instanceId: string;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function WorkflowInstanceDetail({
|
|
instanceId,
|
|
onClose,
|
|
}: WorkflowInstanceDetailProps) {
|
|
const toast = useToast();
|
|
const { data: instance, isLoading, isError, refetch } =
|
|
useWorkflowInstance(instanceId);
|
|
const advanceMutation = useAdvanceWorkflowInstance();
|
|
const cancelMutation = useCancelWorkflowInstance();
|
|
|
|
const [comment, setComment] = useState('');
|
|
const [showCommentField, setShowCommentField] = useState<
|
|
'approve' | 'reject' | null
|
|
>(null);
|
|
|
|
const handleAdvance = async (decision: 'approve' | 'reject') => {
|
|
if (!instance) return;
|
|
try {
|
|
await advanceMutation.mutateAsync({
|
|
instanceId: instance.id,
|
|
data: {
|
|
decision,
|
|
comment: comment || null,
|
|
},
|
|
});
|
|
toast.success(
|
|
decision === 'approve'
|
|
? 'Schritt genehmigt'
|
|
: 'Schritt abgelehnt'
|
|
);
|
|
setComment('');
|
|
setShowCommentField(null);
|
|
} catch (err: unknown) { const errObj = asError(err);
|
|
toast.error(errObj.message || 'Fehler bei der Aktion');
|
|
}
|
|
};
|
|
|
|
const handleCancel = async () => {
|
|
if (!instance) return;
|
|
try {
|
|
await cancelMutation.mutateAsync(instance.id);
|
|
toast.success('Instanz abgebrochen');
|
|
} catch (err: unknown) { const errObj = asError(err);
|
|
toast.error(errObj.message || 'Fehler beim Abbrechen');
|
|
}
|
|
};
|
|
|
|
const canAct =
|
|
instance?.status === 'in_progress' || instance?.status === 'pending';
|
|
const canCancel =
|
|
instance?.status === 'in_progress' || instance?.status === 'pending';
|
|
|
|
return (
|
|
<Modal
|
|
open={!!instanceId}
|
|
onClose={onClose}
|
|
title="Workflow-Instanz Details"
|
|
size="lg"
|
|
>
|
|
{isLoading && (
|
|
<div className="space-y-3">
|
|
<Skeleton className="h-8 w-full" />
|
|
<Skeleton className="h-32 w-full" />
|
|
<Skeleton className="h-48 w-full" />
|
|
</div>
|
|
)}
|
|
|
|
{isError && (
|
|
<div className="flex items-center gap-3 text-danger-600 p-4">
|
|
<AlertCircle className="h-5 w-5" />
|
|
<span>Fehler beim Laden der Instanz</span>
|
|
<button
|
|
onClick={() => refetch()}
|
|
className="text-sm text-primary-600 hover:underline"
|
|
>
|
|
Erneut versuchen
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{!isLoading && !isError && instance && (
|
|
<div className="space-y-6">
|
|
{/* Header info */}
|
|
<div className="flex items-center gap-3 flex-wrap">
|
|
<Badge variant={statusBadgeVariant(instance.status)}>
|
|
{statusLabel(instance.status)}
|
|
</Badge>
|
|
{instance.workflow_name && (
|
|
<span className="text-lg font-semibold text-secondary-900">
|
|
{instance.workflow_name}
|
|
</span>
|
|
)}
|
|
{!instance.workflow_name && (
|
|
<span className="text-lg font-semibold text-secondary-900">
|
|
Workflow {instance.workflow_id.slice(0, 8)}
|
|
</span>
|
|
)}
|
|
<span className="text-xs text-secondary-400">
|
|
ID: {instance.id}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Key info grid */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 bg-secondary-50 rounded-lg">
|
|
<div>
|
|
<p className="text-xs text-secondary-400 mb-1">Aktueller Schritt</p>
|
|
<p className="text-sm font-medium text-secondary-900">
|
|
{instance.current_step_index + 1}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-secondary-400 mb-1">Initiiert von</p>
|
|
<p className="text-sm font-medium text-secondary-900">
|
|
{instance.initiated_by || '—'}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-secondary-400 mb-1">Erstellt am</p>
|
|
<p className="text-sm font-medium text-secondary-900">
|
|
{instance.created_at
|
|
? new Date(instance.created_at).toLocaleString()
|
|
: '—'}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-secondary-400 mb-1">Timeout</p>
|
|
<p className="text-sm font-medium text-secondary-900 flex items-center gap-1">
|
|
<Clock className="h-3 w-3" />
|
|
{instance.timeout_at
|
|
? new Date(instance.timeout_at).toLocaleString()
|
|
: '—'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Context JSON */}
|
|
<div>
|
|
<h4 className="text-sm font-medium text-secondary-700 mb-2">
|
|
Kontext
|
|
</h4>
|
|
<pre className="text-xs font-mono bg-secondary-900 text-secondary-100 rounded-lg p-3 overflow-x-auto max-h-40">
|
|
{JSON.stringify(instance.context ?? {}, null, 2)}
|
|
</pre>
|
|
</div>
|
|
|
|
{/* Step history timeline */}
|
|
<div>
|
|
<h4 className="text-sm font-medium text-secondary-700 mb-3">
|
|
Schritt-Historie
|
|
</h4>
|
|
{instance.history && instance.history.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{instance.history.map((entry, idx) => (
|
|
<div
|
|
key={entry.id || idx}
|
|
className="flex items-start gap-3 pb-3 border-b border-secondary-100 last:border-0"
|
|
>
|
|
<div className="flex flex-col items-center flex-shrink-0">
|
|
<div className="w-6 h-6 rounded-full bg-primary-100 text-primary-700 flex items-center justify-center text-xs font-medium">
|
|
{entry.step_index + 1}
|
|
</div>
|
|
{idx < instance.history.length - 1 && (
|
|
<div className="w-px h-full bg-secondary-200 mt-1" />
|
|
)}
|
|
</div>
|
|
<div className="flex-1 min-w-0 pb-1">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<Badge variant="secondary">
|
|
{stepTypeLabel(entry.step_type)}
|
|
</Badge>
|
|
<span className="text-sm font-medium text-secondary-900">
|
|
{entry.action}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-3 mt-1 text-xs text-secondary-400">
|
|
{entry.actor_id && (
|
|
<span>Aktor: {entry.actor_id}</span>
|
|
)}
|
|
{entry.created_at && (
|
|
<span>
|
|
{new Date(entry.created_at).toLocaleString()}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{entry.details && (
|
|
<pre className="text-xs font-mono bg-secondary-50 rounded p-2 mt-2 overflow-x-auto max-h-24">
|
|
{JSON.stringify(entry.details, null, 2)}
|
|
</pre>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-secondary-400 italic">
|
|
Keine Historie vorhanden
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Action buttons */}
|
|
{canAct && (
|
|
<div className="space-y-3 pt-4 border-t border-secondary-200">
|
|
{showCommentField && (
|
|
<Input
|
|
label="Kommentar (optional)"
|
|
value={comment}
|
|
onChange={(e) => setComment(e.target.value)}
|
|
placeholder="Kommentar hinzufuegen..."
|
|
/>
|
|
)}
|
|
<div className="flex items-center gap-3 flex-wrap">
|
|
{!showCommentField && (
|
|
<>
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => setShowCommentField('approve')}
|
|
icon={<CheckCircle2 className="h-4 w-4" />}
|
|
>
|
|
Genehmigen
|
|
</Button>
|
|
<Button
|
|
variant="danger"
|
|
onClick={() => setShowCommentField('reject')}
|
|
icon={<XCircle className="h-4 w-4" />}
|
|
>
|
|
Ablehnen
|
|
</Button>
|
|
</>
|
|
)}
|
|
{showCommentField === 'approve' && (
|
|
<>
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => handleAdvance('approve')}
|
|
isLoading={advanceMutation.isPending}
|
|
icon={<CheckCircle2 className="h-4 w-4" />}
|
|
>
|
|
Bestaetigen
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => {
|
|
setShowCommentField(null);
|
|
setComment('');
|
|
}}
|
|
>
|
|
Abbrechen
|
|
</Button>
|
|
</>
|
|
)}
|
|
{showCommentField === 'reject' && (
|
|
<>
|
|
<Button
|
|
variant="danger"
|
|
onClick={() => handleAdvance('reject')}
|
|
isLoading={advanceMutation.isPending}
|
|
icon={<XCircle className="h-4 w-4" />}
|
|
>
|
|
Ablehnen bestaetigen
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => {
|
|
setShowCommentField(null);
|
|
setComment('');
|
|
}}
|
|
>
|
|
Zurueck
|
|
</Button>
|
|
</>
|
|
)}
|
|
{canCancel && !showCommentField && (
|
|
<Button
|
|
variant="secondary"
|
|
onClick={handleCancel}
|
|
isLoading={cancelMutation.isPending}
|
|
icon={<Ban className="h-4 w-4" />}
|
|
>
|
|
Abbrechen
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{instance.status === 'completed' && (
|
|
<div className="flex items-center gap-2 text-success-700 p-3 bg-success-50 rounded-lg">
|
|
<CheckCircle2 className="h-5 w-5" />
|
|
<span className="text-sm font-medium">
|
|
Dieser Workflow ist abgeschlossen
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{instance.status === 'rejected' && (
|
|
<div className="flex items-center gap-2 text-danger-700 p-3 bg-danger-50 rounded-lg">
|
|
<XCircle className="h-5 w-5" />
|
|
<span className="text-sm font-medium">
|
|
Dieser Workflow wurde abgelehnt
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{instance.status === 'cancelled' && (
|
|
<div className="flex items-center gap-2 text-secondary-700 p-3 bg-secondary-100 rounded-lg">
|
|
<Ban className="h-5 w-5" />
|
|
<span className="text-sm font-medium">
|
|
Dieser Workflow wurde abgebrochen
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
);
|
|
}
|