soconnor/hristudio
1
0
Fork 0
mirror of https://github.com/soconnor0919/hristudio.git synced 2026-03-24 03:37:51 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Pre-conf work 2025

Browse Source
This commit is contained in:
Sean O'Connor
2025-09-02 08:25:41 -04:00
parent 550021a18e
commit 4acbec6288
75 changed files with 8047 additions and 5228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/components/trials/wizard/StepDisplay.tsx
View File

@@ -1,9 +1,23 @@
"use client";
import {
Activity, ArrowRight, Bot, CheckCircle, GitBranch, MessageSquare, Play, Settings, Timer,
User, Users
Activity,
ArrowRight,
Bot,
CheckCircle,
GitBranch,
MessageSquare,
Play,
Settings,
Timer,
User,
Users,
} from "lucide-react";
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/no-unsafe-argument */
/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
import { useState } from "react";
import { Alert, AlertDescription } from "~/components/ui/alert";
import { Badge } from "~/components/ui/badge";
@@ -16,7 +30,11 @@ interface StepDisplayProps {
step: {
id: string;
name: string;
type: "wizard_action" | "robot_action" | "parallel_steps" | "conditional_branch";
type:
| "wizard_action"
| "robot_action"
| "parallel_steps"
| "conditional_branch";
description?: string;
parameters?: any;
duration?: number;
@@ -63,10 +81,12 @@ export function StepDisplay({
stepIndex,
totalSteps,
isActive,
onExecuteAction
onExecuteAction,
}: StepDisplayProps) {
const [isExecuting, setIsExecuting] = useState(false);
const [completedActions, setCompletedActions] = useState<Set<string>>(new Set());
const [completedActions, setCompletedActions] = useState<Set<string>>(
new Set(),
);
const stepConfig = stepTypeConfig[step.type];
const StepIcon = stepConfig.icon;
@@ -75,7 +95,7 @@ export function StepDisplay({
setIsExecuting(true);
try {
await onExecuteAction(actionId, actionData);
setCompletedActions(prev => new Set([...prev, actionId]));
setCompletedActions((prev) => new Set([...prev, actionId]));
} catch (_error) {
console.error("Failed to execute action:", _error);
} finally {
@@ -97,17 +117,19 @@ export function StepDisplay({
{step.actions && step.actions.length > 0 && (
<div className="space-y-3">
<h4 className="font-medium text-slate-900">Available Actions:</h4>
<h4 className="font-medium text-slate-900">
Available Actions:
</h4>
<div className="grid gap-2">
{step.actions.map((action: any, index: number) => {
const isCompleted = completedActions.has(action.id);
return (
<div
key={action.id || index}
className={`flex items-center justify-between p-3 rounded-lg border ${
className={`flex items-center justify-between rounded-lg border p-3 ${
isCompleted
? "bg-green-50 border-green-200"
: "bg-slate-50 border-slate-200"
? "border-green-200 bg-green-50"
: "border-slate-200 bg-slate-50"
}`}
>
<div className="flex items-center space-x-3">
@@ -117,16 +139,20 @@ export function StepDisplay({
<Play className="h-4 w-4 text-slate-400" />
)}
<div>
<p className="font-medium text-sm">{action.name}</p>
<p className="text-sm font-medium">{action.name}</p>
{action.description && (
<p className="text-xs text-slate-600">{action.description}</p>
<p className="text-xs text-slate-600">
{action.description}
</p>
)}
</div>
</div>
{isActive && !isCompleted && (
<Button
size="sm"
onClick={() => handleActionExecution(action.id, action)}
onClick={() =>
handleActionExecution(action.id, action)
}
disabled={isExecuting}
>
Execute
@@ -153,8 +179,10 @@ export function StepDisplay({
{step.parameters && (
<div className="space-y-2">
<h4 className="font-medium text-slate-900">Robot Parameters:</h4>
<div className="bg-slate-50 rounded-lg p-3 text-sm font-mono">
<h4 className="font-medium text-slate-900">
Robot Parameters:
</h4>
<div className="rounded-lg bg-slate-50 p-3 font-mono text-sm">
<pre>{JSON.stringify(step.parameters, null, 2)}</pre>
</div>
</div>
@@ -181,22 +209,26 @@ export function StepDisplay({
{step.substeps && step.substeps.length > 0 && (
<div className="space-y-3">
<h4 className="font-medium text-slate-900">Parallel Actions:</h4>
<h4 className="font-medium text-slate-900">
Parallel Actions:
</h4>
<div className="grid gap-3">
{step.substeps.map((substep: any, index: number) => (
<div
key={substep.id || index}
className="flex items-center space-x-3 p-3 bg-slate-50 rounded-lg border"
className="flex items-center space-x-3 rounded-lg border bg-slate-50 p-3"
>
<div className="flex-shrink-0">
<div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center text-xs font-medium text-purple-600">
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-purple-100 text-xs font-medium text-purple-600">
{index + 1}
</div>
</div>
<div className="flex-1">
<p className="font-medium text-sm">{substep.name}</p>
<p className="text-sm font-medium">{substep.name}</p>
{substep.description && (
<p className="text-xs text-slate-600">{substep.description}</p>
<p className="text-xs text-slate-600">
{substep.description}
</p>
)}
</div>
<div className="flex-shrink-0">
@@ -225,7 +257,7 @@ export function StepDisplay({
{step.conditions && (
<div className="space-y-2">
<h4 className="font-medium text-slate-900">Conditions:</h4>
<div className="bg-slate-50 rounded-lg p-3 text-sm">
<div className="rounded-lg bg-slate-50 p-3 text-sm">
<pre>{JSON.stringify(step.conditions, null, 2)}</pre>
</div>
</div>
@@ -233,19 +265,23 @@ export function StepDisplay({
{step.branches && step.branches.length > 0 && (
<div className="space-y-3">
<h4 className="font-medium text-slate-900">Possible Branches:</h4>
<h4 className="font-medium text-slate-900">
Possible Branches:
</h4>
<div className="grid gap-2">
{step.branches.map((branch: any, index: number) => (
<div
key={branch.id || index}
className="flex items-center justify-between p-3 bg-slate-50 rounded-lg border"
className="flex items-center justify-between rounded-lg border bg-slate-50 p-3"
>
<div className="flex items-center space-x-3">
<ArrowRight className="h-4 w-4 text-orange-500" />
<div>
<p className="font-medium text-sm">{branch.name}</p>
<p className="text-sm font-medium">{branch.name}</p>
{branch.condition && (
<p className="text-xs text-slate-600">If: {branch.condition}</p>
<p className="text-xs text-slate-600">
If: {branch.condition}
</p>
)}
</div>
</div>
@@ -253,7 +289,9 @@ export function StepDisplay({
<Button
size="sm"
variant="outline"
onClick={() => handleActionExecution(`branch_${branch.id}`, branch)}
onClick={() =>
handleActionExecution(`branch_${branch.id}`, branch)
}
disabled={isExecuting}
>
Select
@@ -269,8 +307,8 @@ export function StepDisplay({
default:
return (
<div className="text-center py-8 text-slate-500">
<Settings className="h-8 w-8 mx-auto mb-2" />
<div className="py-8 text-center text-slate-500">
<Settings className="mx-auto mb-2 h-8 w-8" />
<p>Unknown step type: {step.type}</p>
</div>
);
@@ -278,32 +316,46 @@ export function StepDisplay({
};
return (
<Card className={`transition-all duration-200 ${
isActive ? "ring-2 ring-blue-500 shadow-lg" : "border-slate-200"
}`}>
<Card
className={`transition-all duration-200 ${
isActive ? "shadow-lg ring-2 ring-blue-500" : "border-slate-200"
}`}
>
<CardHeader>
<div className="flex items-start justify-between">
<div className="flex items-start space-x-3">
<div className={`flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center ${
stepConfig.color === "blue" ? "bg-blue-100" :
stepConfig.color === "green" ? "bg-green-100" :
stepConfig.color === "purple" ? "bg-purple-100" :
stepConfig.color === "orange" ? "bg-orange-100" :
"bg-slate-100"
}`}>
<StepIcon className={`h-5 w-5 ${
stepConfig.color === "blue" ? "text-blue-600" :
stepConfig.color === "green" ? "text-green-600" :
stepConfig.color === "purple" ? "text-purple-600" :
stepConfig.color === "orange" ? "text-orange-600" :
"text-slate-600"
}`} />
<div
className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg ${
stepConfig.color === "blue"
? "bg-blue-100"
: stepConfig.color === "green"
? "bg-green-100"
: stepConfig.color === "purple"
? "bg-purple-100"
: stepConfig.color === "orange"
? "bg-orange-100"
: "bg-slate-100"
}`}
>
<StepIcon
className={`h-5 w-5 ${
stepConfig.color === "blue"
? "text-blue-600"
: stepConfig.color === "green"
? "text-green-600"
: stepConfig.color === "purple"
? "text-purple-600"
: stepConfig.color === "orange"
? "text-orange-600"
: "text-slate-600"
}`}
/>
</div>
<div className="flex-1 min-w-0">
<div className="min-w-0 flex-1">
<CardTitle className="text-lg font-semibold text-slate-900">
{step.name}
</CardTitle>
<div className="flex items-center space-x-2 mt-1">
<div className="mt-1 flex items-center space-x-2">
<Badge variant="outline" className="text-xs">
{stepConfig.label}
</Badge>
@@ -311,7 +363,7 @@ export function StepDisplay({
Step {stepIndex + 1} of {totalSteps}
</span>
</div>
<p className="text-sm text-slate-600 mt-1">
<p className="mt-1 text-sm text-slate-600">
{stepConfig.description}
</p>
</div>
@@ -341,9 +393,14 @@ export function StepDisplay({
<Separator className="my-4" />
<div className="flex items-center justify-between text-xs text-slate-500">
<span>Step Progress</span>
<span>{stepIndex + 1}/{totalSteps}</span>
<span>
{stepIndex + 1}/{totalSteps}
</span>
</div>
<Progress value={((stepIndex + 1) / totalSteps) * 100} className="h-1 mt-2" />
<Progress
value={((stepIndex + 1) / totalSteps) * 100}
className="mt-2 h-1"
/>
</CardContent>
</Card>
);