feat: collapse\expand steps in pipeline

web/src/lib/components/display/StepCard.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { GripVertical, X } from "@lucide/svelte";
+	import { ChevronDown, ChevronRight, GripVertical, X } from "@lucide/svelte";
 	import IconButton from "$lib/components/ui/IconButton.svelte";
 	import { t } from "$lib/i18n/t";
 	import type { Snippet } from "svelte";
@@ -9,9 +9,11 @@
 		title?: string;
 		type?: string;
 		draggable?: boolean;
+		collapsed?: boolean;
 		tools?: Snippet;
 		children?: Snippet;
 		onremove?: () => void;
+		ontoggle?: () => void;
 		ondragstart?: (e: DragEvent) => void;
 		ondragover?: (e: DragEvent) => void;
 		ondrop?: (e: DragEvent) => void;
@@ -23,9 +25,11 @@
 		title,
 		type,
 		draggable = false,
+		collapsed = false,
 		tools,
 		children,
 		onremove,
+		ontoggle,
 		ondragstart,
 		ondragover,
 		ondrop,
@@ -54,6 +58,15 @@
 		</div>
 		<div class="step-tools">
 			{#if tools}{@render tools()}{/if}
+			{#if ontoggle}
+				<IconButton
+					icon={collapsed ? ChevronRight : ChevronDown}
+					label={collapsed ? t("chain.expandStep") : t("chain.collapseStep")}
+					variant="clear"
+					size="s"
+					onclick={() => ontoggle()}
+				/>
+			{/if}
 			{#if onremove}
 				<IconButton
 					icon={X}
@@ -65,7 +78,7 @@
 			{/if}
 		</div>
 	</header>
-	{#if children}
+	{#if children && !collapsed}
 		<div class="step-body">
 			{@render children()}
 		</div>

web/src/lib/components/schema/SchemaToolView.svelte

@@ -240,6 +240,12 @@
 		steps = removeStep(steps, key);
 	}
 
+	function toggleStep(index: number) {
+		const step = steps[index];
+		if (!step) return;
+		steps = steps.with(index, { ...step, collapsed: !step.collapsed });
+	}
+
 	function onStepDrop(e: DragEvent, to: number) {
 		e.preventDefault();
 		if (dragFrom !== null) steps = moveStep(steps, dragFrom, to);
@@ -458,6 +464,8 @@
 						index={i + 1}
 						title={stepTitle(step.id)}
 						draggable
+						collapsed={step.collapsed ?? false}
+						ontoggle={() => toggleStep(i)}
 						onremove={steps.length > 1
 							? () => removeStepAt(step.key)
 							: undefined}