Skip to content

Commit dedd5bb

Browse files
ouiliameclaude
ouiliame
and
claude
committed
docs(components): branch handle ids match the app's workflow representation
Verified against the source after the branch-handles work: the canvas emits condition-${cond.id} handles per condition row (workflow-block.tsx) and Router V2 uses router-${routeId} port handles, and edges carry those ids as sourceHandle — the docs' invented branch- prefix was a gratuitous divergence that the planned fromWorkflowState() adapter would have had to translate. The node now uses the authored branch id as the handle id directly, and every example authors ids in the app's own scheme (condition-if/condition-else, router-<route>), so example edges now match real workflow edges verbatim. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 55056de commit dedd5bb

3 files changed

Lines changed: 53 additions & 48 deletions

File tree

‎apps/docs/components/workflow-preview/examples.ts‎

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -253,8 +253,8 @@ export const CONDITION_ROUTE_WORKFLOW: PreviewWorkflow = {
253253
position: { x: 330, y: 60 },
254254
rows: [],
255255
branches: [
256-
{ id: 'if', label: 'If', value: "<start.priority> === 'high'" },
257-
{ id: 'else', label: 'else' },
256+
{ id: 'condition-if', label: 'If', value: "<start.priority> === 'high'" },
257+
{ id: 'condition-else', label: 'else' },
258258
],
259259
},
260260
{
@@ -282,9 +282,9 @@ export const CONDITION_ROUTE_WORKFLOW: PreviewWorkflow = {
282282
id: 'condition-escalate',
283283
source: 'condition',
284284
target: 'escalate',
285-
sourceHandle: 'branch-if',
285+
sourceHandle: 'condition-if',
286286
},
287-
{ id: 'condition-reply', source: 'condition', target: 'reply', sourceHandle: 'branch-else' },
287+
{ id: 'condition-reply', source: 'condition', target: 'reply', sourceHandle: 'condition-else' },
288288
],
289289
}
290290

@@ -310,8 +310,8 @@ export const CONDITION_MODERATE_WORKFLOW: PreviewWorkflow = {
310310
position: { x: 330, y: 60 },
311311
rows: [],
312312
branches: [
313-
{ id: 'if', label: 'If', value: '<moderate.toxicity> > 0.7' },
314-
{ id: 'else', label: 'else' },
313+
{ id: 'condition-if', label: 'If', value: '<moderate.toxicity> > 0.7' },
314+
{ id: 'condition-else', label: 'else' },
315315
],
316316
},
317317
{
@@ -335,12 +335,12 @@ export const CONDITION_MODERATE_WORKFLOW: PreviewWorkflow = {
335335
],
336336
edges: [
337337
{ id: 'moderate-condition', source: 'moderate', target: 'condition' },
338-
{ id: 'condition-block', source: 'condition', target: 'block', sourceHandle: 'branch-if' },
338+
{ id: 'condition-block', source: 'condition', target: 'block', sourceHandle: 'condition-if' },
339339
{
340340
id: 'condition-publish',
341341
source: 'condition',
342342
target: 'publish',
343-
sourceHandle: 'branch-else',
343+
sourceHandle: 'condition-else',
344344
},
345345
],
346346
}
@@ -367,8 +367,8 @@ export const CONDITION_ONBOARD_WORKFLOW: PreviewWorkflow = {
367367
position: { x: 330, y: 60 },
368368
rows: [],
369369
branches: [
370-
{ id: 'if', label: 'If', value: "<plan.result.tier> === 'enterprise'" },
371-
{ id: 'else', label: 'else' },
370+
{ id: 'condition-if', label: 'If', value: "<plan.result.tier> === 'enterprise'" },
371+
{ id: 'condition-else', label: 'else' },
372372
],
373373
},
374374
{
@@ -392,12 +392,12 @@ export const CONDITION_ONBOARD_WORKFLOW: PreviewWorkflow = {
392392
],
393393
edges: [
394394
{ id: 'plan-condition', source: 'plan', target: 'condition' },
395-
{ id: 'condition-guided', source: 'condition', target: 'guided', sourceHandle: 'branch-if' },
395+
{ id: 'condition-guided', source: 'condition', target: 'guided', sourceHandle: 'condition-if' },
396396
{
397397
id: 'condition-quickstart',
398398
source: 'condition',
399399
target: 'quickstart',
400-
sourceHandle: 'branch-else',
400+
sourceHandle: 'condition-else',
401401
},
402402
],
403403
}
@@ -515,9 +515,9 @@ export const ROUTER_TRIAGE_WORKFLOW: PreviewWorkflow = {
515515
{ title: 'Model', value: 'claude-sonnet-4-6' },
516516
],
517517
branches: [
518-
{ id: 'sales', label: 'Sales' },
519-
{ id: 'support', label: 'Support' },
520-
{ id: 'billing', label: 'Billing' },
518+
{ id: 'router-sales', label: 'Sales' },
519+
{ id: 'router-support', label: 'Support' },
520+
{ id: 'router-billing', label: 'Billing' },
521521
],
522522
},
523523
{
@@ -550,9 +550,9 @@ export const ROUTER_TRIAGE_WORKFLOW: PreviewWorkflow = {
550550
],
551551
edges: [
552552
{ id: 'start-router', source: 'start', target: 'router' },
553-
{ id: 'router-sales', source: 'router', target: 'sales', sourceHandle: 'branch-sales' },
554-
{ id: 'router-support', source: 'router', target: 'support', sourceHandle: 'branch-support' },
555-
{ id: 'router-billing', source: 'router', target: 'billing', sourceHandle: 'branch-billing' },
553+
{ id: 'router-sales', source: 'router', target: 'sales', sourceHandle: 'router-sales' },
554+
{ id: 'router-support', source: 'router', target: 'support', sourceHandle: 'router-support' },
555+
{ id: 'router-billing', source: 'router', target: 'billing', sourceHandle: 'router-billing' },
556556
],
557557
}
558558

@@ -619,8 +619,8 @@ export const ROUTER_CLASSIFY_WORKFLOW: PreviewWorkflow = {
619619
position: { x: 320, y: 50 },
620620
rows: [{ title: 'Context', value: '<start.input>' }],
621621
branches: [
622-
{ id: 'product', label: 'Product' },
623-
{ id: 'bug', label: 'Bug report' },
622+
{ id: 'router-product', label: 'Product' },
623+
{ id: 'router-bug', label: 'Bug report' },
624624
],
625625
},
626626
{
@@ -644,8 +644,8 @@ export const ROUTER_CLASSIFY_WORKFLOW: PreviewWorkflow = {
644644
],
645645
edges: [
646646
{ id: 'start-router', source: 'start', target: 'router' },
647-
{ id: 'router-product', source: 'router', target: 'product', sourceHandle: 'branch-product' },
648-
{ id: 'router-bug', source: 'router', target: 'bug', sourceHandle: 'branch-bug' },
647+
{ id: 'router-product', source: 'router', target: 'product', sourceHandle: 'router-product' },
648+
{ id: 'router-bug', source: 'router', target: 'bug', sourceHandle: 'router-bug' },
649649
],
650650
}
651651

@@ -671,8 +671,8 @@ export const ROUTER_LEAD_WORKFLOW: PreviewWorkflow = {
671671
position: { x: 320, y: 50 },
672672
rows: [{ title: 'Context', value: '<start.input>' }],
673673
branches: [
674-
{ id: 'enterprise', label: 'Enterprise' },
675-
{ id: 'selfserve', label: 'Self-serve' },
674+
{ id: 'router-enterprise', label: 'Enterprise' },
675+
{ id: 'router-selfserve', label: 'Self-serve' },
676676
],
677677
},
678678
{
@@ -700,13 +700,13 @@ export const ROUTER_LEAD_WORKFLOW: PreviewWorkflow = {
700700
id: 'router-enterprise',
701701
source: 'router',
702702
target: 'enterprise',
703-
sourceHandle: 'branch-enterprise',
703+
sourceHandle: 'router-enterprise',
704704
},
705705
{
706706
id: 'router-selfserve',
707707
source: 'router',
708708
target: 'selfserve',
709-
sourceHandle: 'branch-selfserve',
709+
sourceHandle: 'router-selfserve',
710710
},
711711
],
712712
}
@@ -774,8 +774,8 @@ export const RESPONSE_ERROR_WORKFLOW: PreviewWorkflow = {
774774
position: { x: 320, y: 60 },
775775
rows: [],
776776
branches: [
777-
{ id: 'if', label: 'If', value: '<start.valid>' },
778-
{ id: 'else', label: 'else' },
777+
{ id: 'condition-if', label: 'If', value: '<start.valid>' },
778+
{ id: 'condition-else', label: 'else' },
779779
],
780780
},
781781
{
@@ -799,8 +799,8 @@ export const RESPONSE_ERROR_WORKFLOW: PreviewWorkflow = {
799799
],
800800
edges: [
801801
{ id: 'start-condition', source: 'start', target: 'condition' },
802-
{ id: 'condition-ok', source: 'condition', target: 'ok', sourceHandle: 'branch-if' },
803-
{ id: 'condition-bad', source: 'condition', target: 'bad', sourceHandle: 'branch-else' },
802+
{ id: 'condition-ok', source: 'condition', target: 'ok', sourceHandle: 'condition-if' },
803+
{ id: 'condition-bad', source: 'condition', target: 'bad', sourceHandle: 'condition-else' },
804804
],
805805
}
806806

@@ -835,8 +835,8 @@ export const VARIABLES_RETRY_WORKFLOW: PreviewWorkflow = {
835835
hideSourceHandle: true,
836836
rows: [],
837837
branches: [
838-
{ id: 'if', label: 'If', value: '<variable.retryCount> < 3' },
839-
{ id: 'else', label: 'else' },
838+
{ id: 'condition-if', label: 'If', value: '<variable.retryCount> < 3' },
839+
{ id: 'condition-else', label: 'else' },
840840
],
841841
},
842842
],
@@ -1000,8 +1000,8 @@ export const EVALUATOR_GATE_WORKFLOW: PreviewWorkflow = {
10001000
hideSourceHandle: true,
10011001
rows: [],
10021002
branches: [
1003-
{ id: 'if', label: 'If', value: '<evaluator.accuracy> >= 4' },
1004-
{ id: 'else', label: 'else' },
1003+
{ id: 'condition-if', label: 'If', value: '<evaluator.accuracy> >= 4' },
1004+
{ id: 'condition-else', label: 'else' },
10051005
],
10061006
},
10071007
],
@@ -1085,8 +1085,8 @@ export const CREDENTIAL_ROUTE_WORKFLOW: PreviewWorkflow = {
10851085
position: { x: 330, y: 60 },
10861086
rows: [],
10871087
branches: [
1088-
{ id: 'if', label: 'If', value: "<variable.env> === 'prod'" },
1089-
{ id: 'else', label: 'else' },
1088+
{ id: 'condition-if', label: 'If', value: "<variable.env> === 'prod'" },
1089+
{ id: 'condition-else', label: 'else' },
10901090
],
10911091
},
10921092
{
@@ -1110,12 +1110,12 @@ export const CREDENTIAL_ROUTE_WORKFLOW: PreviewWorkflow = {
11101110
],
11111111
edges: [
11121112
{ id: 'pick-condition', source: 'pick', target: 'condition' },
1113-
{ id: 'condition-prod', source: 'condition', target: 'prod', sourceHandle: 'branch-if' },
1113+
{ id: 'condition-prod', source: 'condition', target: 'prod', sourceHandle: 'condition-if' },
11141114
{
11151115
id: 'condition-staging',
11161116
source: 'condition',
11171117
target: 'staging',
1118-
sourceHandle: 'branch-else',
1118+
sourceHandle: 'condition-else',
11191119
},
11201120
],
11211121
}
@@ -1156,8 +1156,8 @@ export const GUARDRAILS_JSON_WORKFLOW: PreviewWorkflow = {
11561156
...GUARDRAILS_GATE,
11571157
rows: [],
11581158
branches: [
1159-
{ id: 'if', label: 'If', value: '<guardrails.passed>' },
1160-
{ id: 'else', label: 'else' },
1159+
{ id: 'condition-if', label: 'If', value: '<guardrails.passed>' },
1160+
{ id: 'condition-else', label: 'else' },
11611161
],
11621162
},
11631163
],
@@ -1188,8 +1188,8 @@ export const GUARDRAILS_HALLUCINATION_WORKFLOW: PreviewWorkflow = {
11881188
...GUARDRAILS_GATE,
11891189
rows: [],
11901190
branches: [
1191-
{ id: 'if', label: 'If', value: '<guardrails.score> >= 3' },
1192-
{ id: 'else', label: 'else' },
1191+
{ id: 'condition-if', label: 'If', value: '<guardrails.score> >= 3' },
1192+
{ id: 'condition-else', label: 'else' },
11931193
],
11941194
},
11951195
],
@@ -1228,8 +1228,8 @@ export const GUARDRAILS_PII_WORKFLOW: PreviewWorkflow = {
12281228
...GUARDRAILS_GATE,
12291229
rows: [],
12301230
branches: [
1231-
{ id: 'if', label: 'If', value: '<guardrails.passed>' },
1232-
{ id: 'else', label: 'else' },
1231+
{ id: 'condition-if', label: 'If', value: '<guardrails.passed>' },
1232+
{ id: 'condition-else', label: 'else' },
12331233
],
12341234
},
12351235
],
@@ -1425,8 +1425,8 @@ export const WEBHOOK_TRIGGER_WORKFLOW: PreviewWorkflow = {
14251425
position: { x: 320, y: 0 },
14261426
rows: [],
14271427
branches: [
1428-
{ id: 'if', label: 'If', value: "<start.status> === 'done'" },
1429-
{ id: 'else', label: 'else' },
1428+
{ id: 'condition-if', label: 'If', value: "<start.status> === 'done'" },
1429+
{ id: 'condition-else', label: 'else' },
14301430
],
14311431
},
14321432
{

‎apps/docs/components/workflow-preview/preview-block-node.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ export const PreviewBlockNode = memo(function PreviewBlockNode({
142142
<Handle
143143
type='source'
144144
position={Position.Right}
145-
id={`branch-${branch.id}`}
145+
id={branch.id}
146146
className={HANDLE_BRANCH}
147147
isConnectableStart={false}
148148
isConnectableEnd={false}

‎apps/docs/components/workflow-preview/workflow-data.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,12 @@ export interface PreviewBlock {
1919
type: string
2020
bgColor: string
2121
rows: Array<{ title: string; value: string }>
22-
/** Branch rows, each with its own right-edge source handle (id `branch-<id>`). */
22+
/**
23+
* Branch rows, each with its own right-edge source handle whose id is the
24+
* branch id. Author ids in the app's own handle scheme so edges match the
25+
* real workflow representation verbatim: `condition-<id>` on Condition
26+
* blocks, `router-<routeId>` on Routers.
27+
*/
2328
branches?: Array<{ id: string; label: string; value?: string }>
2429
/** Render an error row with a red source handle (id `error`). */
2530
showError?: boolean

0 commit comments

Comments
 (0)