matthias/lemonspace_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(agent): add execution-plan skeleton workflow

Browse Source
This commit is contained in:
Matthias Meister
2026-04-09 21:11:21 +02:00
parent 29c93eeb35
commit 26d008705f
8 changed files with 708 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
components/canvas/nodes/agent-output-node.tsx
View File

@@ -5,6 +5,10 @@ import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
import BaseNodeWrapper from "./base-node-wrapper";
type AgentOutputNodeData = {
isSkeleton?: boolean;
stepId?: string;
stepIndex?: number;
stepTotal?: number;
title?: string;
channel?: string;
outputType?: string;
@@ -17,6 +21,25 @@ type AgentOutputNodeType = Node<AgentOutputNodeData, "agent-output">;
export default function AgentOutputNode({ data, selected }: NodeProps<AgentOutputNodeType>) {
const nodeData = data as AgentOutputNodeData;
const isSkeleton = nodeData.isSkeleton === true;
const hasStepCounter =
typeof nodeData.stepIndex === "number" &&
Number.isFinite(nodeData.stepIndex) &&
typeof nodeData.stepTotal === "number" &&
Number.isFinite(nodeData.stepTotal) &&
nodeData.stepTotal > 0;
const safeStepIndex =
typeof nodeData.stepIndex === "number" && Number.isFinite(nodeData.stepIndex)
? Math.max(0, Math.floor(nodeData.stepIndex))
: 0;
const safeStepTotal =
typeof nodeData.stepTotal === "number" && Number.isFinite(nodeData.stepTotal)
? Math.max(1, Math.floor(nodeData.stepTotal))
: 1;
const stepCounter = hasStepCounter
? `${safeStepIndex + 1}/${safeStepTotal}`
: null;
const resolvedTitle = nodeData.title ?? (isSkeleton ? "Planned output" : "Agent output");
return (
<BaseNodeWrapper
@@ -24,7 +47,7 @@ export default function AgentOutputNode({ data, selected }: NodeProps<AgentOutpu
selected={selected}
status={nodeData._status}
statusMessage={nodeData._statusMessage}
className="min-w-[300px] border-amber-500/30"
className={`min-w-[300px] border-amber-500/30 ${isSkeleton ? "opacity-80" : ""}`}
>
<Handle
type="target"
@@ -35,9 +58,22 @@ export default function AgentOutputNode({ data, selected }: NodeProps<AgentOutpu
<div className="flex h-full flex-col gap-3 p-3">
<header className="space-y-1">
<p className="truncate text-xs font-semibold text-foreground" title={nodeData.title}>
{nodeData.title ?? "Agent output"}
</p>
<div className="flex items-center justify-between gap-2">
<p className="truncate text-xs font-semibold text-foreground" title={resolvedTitle}>
{resolvedTitle}
</p>
{isSkeleton ? (
<span className="shrink-0 rounded-full border border-amber-500/50 bg-amber-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-800 dark:text-amber-200">
Skeleton
</span>
) : null}
</div>
{isSkeleton ? (
<p className="text-[11px] text-amber-700/90 dark:text-amber-300/90">
Planned output{stepCounter ? ` - ${stepCounter}` : ""}
{nodeData.stepId ? ` - ${nodeData.stepId}` : ""}
</p>
) : null}
</header>
<section className="space-y-1">
@@ -62,9 +98,18 @@ export default function AgentOutputNode({ data, selected }: NodeProps<AgentOutpu
<p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
Body
</p>
<p className="line-clamp-6 whitespace-pre-wrap text-xs text-foreground/90">
{nodeData.body ?? ""}
</p>
{isSkeleton ? (
<div
data-testid="agent-output-skeleton-body"
className="animate-pulse rounded-md border border-dashed border-amber-500/40 bg-gradient-to-r from-amber-500/10 via-amber-500/20 to-amber-500/10 p-3"
>
<p className="text-[11px] text-amber-800/90 dark:text-amber-200/90">Planned content</p>
</div>
) : (
<p className="line-clamp-6 whitespace-pre-wrap text-xs text-foreground/90">
{nodeData.body ?? ""}
</p>
)}
</section>
</div>
</BaseNodeWrapper>