Show all branch evaluations in conditional block timeline (#SKY-7495) (#4577)
This commit is contained in:
@@ -167,3 +167,33 @@ export function hasNavigationGoal(
|
||||
): item is { navigation_goal: unknown } {
|
||||
return item !== null && typeof item === "object" && "navigation_goal" in item;
|
||||
}
|
||||
|
||||
// Branch evaluation types for conditional blocks
|
||||
export type BranchEvaluation = {
|
||||
branch_id: string;
|
||||
branch_index: number;
|
||||
criteria_type: "jinja2_template" | "prompt" | null;
|
||||
original_expression: string | null;
|
||||
rendered_expression: string | null;
|
||||
result: boolean | null;
|
||||
is_matched: boolean;
|
||||
is_default: boolean;
|
||||
next_block_label: string | null;
|
||||
error: string | null;
|
||||
};
|
||||
|
||||
export type ConditionalBlockOutput = {
|
||||
evaluations?: Array<BranchEvaluation>;
|
||||
matched_branch_index?: number | null;
|
||||
};
|
||||
|
||||
export function hasEvaluations(
|
||||
output: unknown,
|
||||
): output is ConditionalBlockOutput {
|
||||
return (
|
||||
output !== null &&
|
||||
typeof output === "object" &&
|
||||
"evaluations" in output &&
|
||||
Array.isArray((output as ConditionalBlockOutput).evaluations)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@ import {
|
||||
isObserverThought,
|
||||
isThoughtItem,
|
||||
isWorkflowRunBlock,
|
||||
hasEvaluations,
|
||||
WorkflowRunBlock,
|
||||
WorkflowRunTimelineItem,
|
||||
} from "../types/workflowRunTypes";
|
||||
@@ -180,29 +181,100 @@ function WorkflowRunTimelineBlockItem({
|
||||
<div className="text-xs text-slate-400">{block.description}</div>
|
||||
) : null}
|
||||
{block.block_type === "conditional" && block.executed_branch_id && (
|
||||
<div className="space-y-1 rounded bg-slate-elevation5 px-3 py-2 text-xs">
|
||||
{block.executed_branch_expression !== null &&
|
||||
block.executed_branch_expression !== undefined ? (
|
||||
<div className="text-slate-300">
|
||||
Condition{" "}
|
||||
<code className="rounded bg-slate-elevation3 px-1.5 py-0.5 font-mono text-slate-200">
|
||||
{block.executed_branch_expression}
|
||||
</code>{" "}
|
||||
evaluated to{" "}
|
||||
<span className="font-medium text-success">True</span>
|
||||
<div className="space-y-2 rounded bg-slate-elevation5 px-3 py-2 text-xs">
|
||||
{hasEvaluations(block.output) && block.output.evaluations ? (
|
||||
// New format: show all branch evaluations
|
||||
<div className="space-y-2">
|
||||
{block.output.evaluations.map((evaluation, index) => (
|
||||
<div
|
||||
key={evaluation.branch_id || index}
|
||||
className={cn(
|
||||
"rounded border px-2 py-1.5",
|
||||
evaluation.is_matched
|
||||
? "border-success/50 bg-success/10"
|
||||
: "border-slate-600 bg-slate-elevation3",
|
||||
)}
|
||||
>
|
||||
{evaluation.is_default ? (
|
||||
<div className="text-slate-300">
|
||||
<span className="font-medium">Default branch</span>
|
||||
{evaluation.is_matched && (
|
||||
<span className="ml-2 text-success">✓ Matched</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
<div className="text-slate-400">
|
||||
<code className="rounded bg-slate-elevation1 px-1 py-0.5 font-mono text-slate-300">
|
||||
{evaluation.original_expression}
|
||||
</code>
|
||||
</div>
|
||||
{evaluation.rendered_expression &&
|
||||
evaluation.rendered_expression !==
|
||||
evaluation.original_expression && (
|
||||
<div className="text-slate-400">
|
||||
→ rendered to{" "}
|
||||
<code className="rounded bg-slate-elevation1 px-1 py-0.5 font-mono text-slate-200">
|
||||
{evaluation.rendered_expression}
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-slate-400">evaluated to</span>
|
||||
<span
|
||||
className={cn(
|
||||
"font-medium",
|
||||
evaluation.result
|
||||
? "text-success"
|
||||
: "text-red-400",
|
||||
)}
|
||||
>
|
||||
{evaluation.result ? "True" : "False"}
|
||||
</span>
|
||||
{evaluation.is_matched && (
|
||||
<span className="text-success">✓ Matched</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{evaluation.is_matched && evaluation.next_block_label && (
|
||||
<div className="mt-1 text-slate-400">
|
||||
→ Executing next block:{" "}
|
||||
<span className="font-medium text-slate-300">
|
||||
{evaluation.next_block_label}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-slate-300">
|
||||
No conditions matched, executing default branch
|
||||
</div>
|
||||
)}
|
||||
{block.executed_branch_next_block && (
|
||||
<div className="text-slate-400">
|
||||
→ Executing next block:{" "}
|
||||
<span className="font-medium text-slate-300">
|
||||
{block.executed_branch_next_block}
|
||||
</span>
|
||||
</div>
|
||||
// Fallback: old format without evaluations array
|
||||
<>
|
||||
{block.executed_branch_expression !== null &&
|
||||
block.executed_branch_expression !== undefined ? (
|
||||
<div className="text-slate-300">
|
||||
Condition{" "}
|
||||
<code className="rounded bg-slate-elevation3 px-1.5 py-0.5 font-mono text-slate-200">
|
||||
{block.executed_branch_expression}
|
||||
</code>{" "}
|
||||
evaluated to{" "}
|
||||
<span className="font-medium text-success">True</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-slate-300">
|
||||
No conditions matched, executing default branch
|
||||
</div>
|
||||
)}
|
||||
{block.executed_branch_next_block && (
|
||||
<div className="text-slate-400">
|
||||
→ Executing next block:{" "}
|
||||
<span className="font-medium text-slate-300">
|
||||
{block.executed_branch_next_block}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user