feat: add descriptive help text to graph designer properties

Add inline descriptions to workflow settings, orchestration mode,
edge inspector, node inspectors, and condition editor properties
so users understand what each option does at a glance.

- Execution Mode: explains off-thread vs lockstep behavior
- Max Iterations: clarifies it prevents runaway loops
- State Scopes: describes shared state containers
- Edge Kind: explains direct, fan-out, fan-in semantics
- Loop Edge: describes iterative cycle behavior
- Reasoning: explains effort vs answer quality tradeoff
- Triage Agent, Tool-Call Filtering, Max Rounds, etc.
- Result Variable, Require Approval, Port ID, Condition

Also enhances FormField component with optional description prop.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
2026-04-07 09:02:15 +02:00
co-authored by Copilot
parent ad2eab73d7
commit d265db42e5
7 changed files with 101 additions and 54 deletions
@@ -155,12 +155,17 @@ function AgentNodeInspector({
}}
value={config.model}
/>
<ReasoningEffortSelect
label="Reasoning"
onChange={(value) => patchConfig({ reasoningEffort: value })}
supportedEfforts={getSupportedReasoningEfforts(model)}
value={config.reasoningEffort}
/>
<div className="space-y-1.5">
<ReasoningEffortSelect
label="Reasoning"
onChange={(value) => patchConfig({ reasoningEffort: value })}
supportedEfforts={getSupportedReasoningEfforts(model)}
value={config.reasoningEffort}
/>
<p className="text-[11px] leading-relaxed text-[var(--color-text-muted)]">
Controls how much the model reasons before responding. Higher values produce more careful, thorough answers.
</p>
</div>
</div>
</div>
);
@@ -290,27 +295,35 @@ function EdgeInspector({
<option value="fan-out">Fan-out</option>
<option value="fan-in">Fan-in</option>
</select>
<p className="text-[11px] leading-relaxed text-[var(--color-text-muted)]">
Direct connects nodes sequentially. Fan-out splits into parallel branches. Fan-in waits for all branches to complete.
</p>
</label>
{/* Loop controls */}
<div className="space-y-2.5">
<label className="flex items-center justify-between">
<span className="text-[12px] font-medium text-[var(--color-text-secondary)]">
Loop Edge
</span>
<input
checked={edge.isLoop === true}
className="size-4 accent-[var(--color-accent)]"
onChange={(e) => {
if (e.target.checked) {
onEdgeChange(edge.id, { isLoop: true, maxIterations: edge.maxIterations ?? 10 });
} else {
onEdgeChange(edge.id, { isLoop: undefined, maxIterations: undefined });
}
}}
type="checkbox"
/>
</label>
<div className="space-y-1">
<label className="flex items-center justify-between">
<span className="text-[12px] font-medium text-[var(--color-text-secondary)]">
Loop Edge
</span>
<input
checked={edge.isLoop === true}
className="size-4 accent-[var(--color-accent)]"
onChange={(e) => {
if (e.target.checked) {
onEdgeChange(edge.id, { isLoop: true, maxIterations: edge.maxIterations ?? 10 });
} else {
onEdgeChange(edge.id, { isLoop: undefined, maxIterations: undefined });
}
}}
type="checkbox"
/>
</label>
<p className="text-[11px] leading-relaxed text-[var(--color-text-muted)]">
Creates an iterative cycle, re-executing the path between these nodes up to a set limit.
</p>
</div>
{edge.isLoop && (
<label className="block space-y-1.5">
<span className="text-[11px] text-[var(--color-text-muted)]">Max Iterations</span>