();
+ const elements: JSX.Element[] = [];
+
+ for (let i = 0; i < steps.length; i++) {
+ const step = steps[i];
+ if (rendered.has(step.id)) continue;
+ rendered.add(step.id);
+
+ // Check if this is a send with a paired receive following it
+ if (
+ step.type === "action" &&
+ step.direction === "send" &&
+ step.pairId &&
+ i + 1 < steps.length &&
+ steps[i + 1].pairId === step.pairId
+ ) {
+ const recvStep = steps[i + 1];
+ rendered.add(recvStep.id);
+ elements.push(
+ ,
+ );
+ } else {
+ elements.push(
+ ,
+ );
+ }
+ }
+
+ return <>{elements};
+}
+
+// ── Pair Card (!? grouped) ─────────────────────────────────
+
+function PairCard({
+ sendStep,
+ recvStep,
+ tools,
+ receiveOptions,
+ onUpdateStep,
+ onRemoveStep,
+ onConvertToChoice,
+}: {
+ sendStep: ProtocolStep;
+ recvStep: ProtocolStep;
+ tools: Tool[];
+ receiveOptions: string[];
+ onUpdateStep: (
+ stepId: string,
+ updater: (s: ProtocolStep) => ProtocolStep,
+ ) => void;
+ onRemoveStep: (stepId: string) => void;
+ onConvertToChoice: (
+ stepId: string,
+ pairId: string,
+ direction: Direction,
+ branchLabels: string[],
+ ) => void;
+}) {
+ return (
+
+ {/* Send row */}
+
+
+
+ !
+
+ {tools.length > 0 ? (
+
+ ) : (
+ {
+ const newLabel = e.target.value;
+ onUpdateStep(sendStep.id, (s) => ({ ...s, label: newLabel }));
+ onUpdateStep(recvStep.id, (s) => ({
+ ...s,
+ label: `${newLabel}Result`,
+ }));
+ }}
+ className="font-mono text-xs bg-transparent border-none outline-none flex-1 min-w-0"
+ placeholder="label"
+ />
+ )}
+
+
+
+ {/* Receive row */}
+
+
+
+ ?
+
+ {receiveOptions.length > 0 ? (
+
+ ) : (
+
+ onUpdateStep(recvStep.id, (s) => ({
+ ...s,
+ label: e.target.value,
+ }))
+ }
+ className="font-mono text-xs bg-transparent border-none outline-none flex-1 min-w-0"
+ placeholder="response label"
+ />
+ )}
+
+
paired
+
+
+
+
+ ↻ loop → {step.recVar}
+
+
+
+
+
+
+ {isSend ? "!" : "?"}
+
+ {isSend && tools.length > 0 ? (
+
+ ) : !isSend && receiveOptions.length > 0 ? (
+
+ ) : (
+
+ onUpdateStep(step.id, (s) => ({ ...s, label: e.target.value }))
+ }
+ className="font-mono text-xs bg-transparent border-none outline-none flex-1 min-w-0"
+ placeholder="label"
+ />
+ )}
+ {step.toolName && (
+
+ ({step.toolName})
+
+ )}
+
+
+ );
+ }
+
+ if (step.type === "choice") {
+ const isSend = step.direction === "send";
+ const borderClass = isSend
+ ? "border-green-300 dark:border-green-700"
+ : "border-blue-300 dark:border-blue-700";
+ const prefixClass = isSend
+ ? "text-green-600 dark:text-green-400"
+ : "text-blue-600 dark:text-blue-400";
+
+ return (
+
+
+
+
+ {isSend ? "!" : "?"}
+ {"{"}
+
+
+ {isSend ? "Internal" : "External"} Choice
+
+
+
+
+
+
+ {step.branches?.map((branch) => (
+ {
+ if ((step.branches?.length ?? 0) > 2) {
+ onUpdateStep(step.id, (s) => ({
+ ...s,
+ branches: s.branches?.filter((b) => b.id !== branch.id),
+ }));
+ }
+ }}
+ onUpdateBranchLabel={(label) =>
+ onUpdateStep(step.id, (s) => ({
+ ...s,
+ branches: s.branches?.map((b) =>
+ b.id === branch.id ? { ...b, label } : b,
+ ),
+ }))
+ }
+ />
+ ))}
+
+
+
+ {"}"}
+
+
+
+
+
+ rec
+
+
+ {step.recVar}
+
+
.
+
+
+
+ {/* Branch header */}
+
+
+ {(() => {
+ const isExternal = choiceStep.direction === "receive";
+ const allOptions = isExternal
+ ? receiveOptions
+ : tools.map((t) => t.name);
+ // Filter out labels already used by sibling branches
+ const options = allOptions.filter((o) => !siblingLabels.includes(o));
+ if (options.length > 0 || allOptions.length > 0) {
+ return (
+
+ );
+ }
+ return (
+ onUpdateBranchLabel(e.target.value)}
+ className="font-mono text-xs bg-transparent border-none outline-none flex-1 min-w-0"
+ placeholder="branch label"
+ />
+ );
+ })()}
+
+ {branch.steps.length > 0 && `(${branch.steps.length})`}
+
+ {/* Target button — click to make palette add to this branch */}
+
+ {(choiceStep.branches?.length ?? 0) > 2 && (
+
+ )}
+
+
+ {/* Branch steps */}
+ {expanded && (
+
+ {branch.steps.length > 0 && (
+
+
+
+ )}
+
+ {/* Branch status */}
+ {branchTerminated ? (
+
end
+ ) : (
+
+ {isActive ? (
+
+ Use the palette to add steps here
+
+ ) : (
+ <>
+ Click to add steps from
+ palette
+
+ )}
+
+ )}
+
+ )}
+
+ Add steps to see the state machine
+
+ );
+ }
+
+ // Group transitions by source state for visual branching
+ const bySource = new Map();
+ for (const t of transitions) {
+ const arr = bySource.get(t.from) || [];
+ arr.push(t);
+ bySource.set(t.from, arr);
+ }
+
+ // Collect all states referenced in transitions
+ const allStates = Array.from(states).sort((a, b) => a - b);
+
+ return (
+
+ {allStates.map((s) => {
+ const outgoing = bySource.get(s);
+ if (!outgoing || outgoing.length === 0) {
+ // Terminal state
+ if (endStates.has(s)) {
+ return (
+
+
+ S{s}
+
+ end
+
+ );
+ }
+ return null;
+ }
+
+ const isBranching = outgoing.length > 1;
+
+ return (
+
+
+ S{s}
+
+
→
+
+ {outgoing.map((t, idx) => (
+
+
+ {t.dir === "send" ? "!" : t.dir === "receive" ? "?" : "↻"}
+ {t.label}
+
+ →
+
+ S{t.to}
+
+
+ ))}
+
+
+ );
+ })}
+