feat: collapse\expand steps in pipeline

docs/backlog.md

@@ -20,9 +20,6 @@
       (любой шаг, не только первый), остальные шаги и их параметры сохраняются,
       вход перечитывается. Открытый вопрос: что делать с несовместимыми входами
       (text-source ↔ file).
-- [ ] **Идея 2. Сворачивать инструменты в chain** — оценка S. Тоггл сворачивания
-      звена до заголовка «Шаг n: название» (превью скрываются). Состояние
-      свёрнутости помнить в workspace-pipeline.
 - [ ] **Идея 3. Несколько цепочек: сохранение и загрузка** — оценка M.
       Именованные цепочки в localStorage (список, создать/переименовать/
       удалить), быстрое переключение. Формат экспортного JSON расширить

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}

web/src/lib/i18n/en.ts

@@ -49,6 +49,8 @@ export const en: Dict = {
 	},
 	chain: {
 		addStep: "Add step",
+		collapseStep: "Collapse step",
+		expandStep: "Expand step",
 		inputLegend: "Input",
 		resultLegend: "Result",
 		paramsLegend: "Parameters",

web/src/lib/i18n/ru.ts

@@ -50,6 +50,8 @@ export const ru: Dict = {
 	},
 	chain: {
 		addStep: "Добавить шаг",
+		collapseStep: "Свернуть шаг",
+		expandStep: "Развернуть шаг",
 		inputLegend: "Вход",
 		resultLegend: "Результат",
 		paramsLegend: "Параметры",

web/src/lib/pipeline.svelte.ts

@@ -2,10 +2,10 @@ import { getTool, PAGES, type Page } from "./registry";
 import { defaultSchemaParams, sanitizeSchemaParams } from "./registry-schema";
 
 export interface ChainStep {
-	/** Стабильный ключ для keyed each и drag-n-drop (переживает reorder). */
 	key: string;
 	id: string;
 	params: Record<string, unknown>;
+	collapsed?: boolean;
 }
 
 export const CHAIN_VERSION = 1;
@@ -77,6 +77,8 @@ export function parseChain(data: unknown): ChainStep[] | null {
 		out.push({
 			key: uid(),
 			id,
+			collapsed:
+				(raw as { collapsed?: unknown }).collapsed === true ? true : undefined,
 			params: sanitizeSchemaParams(
 				tool.schema,
 				(params ?? {}) as Record<string, unknown>,
@@ -101,7 +103,11 @@ export function saveChain(slug: string, steps: ChainStep[]): void {
 		storageKey(slug),
 		JSON.stringify({
 			version: CHAIN_VERSION,
-			steps: steps.map((s) => ({ id: s.id, params: s.params })),
+			steps: steps.map((s) => ({
+				id: s.id,
+				params: s.params,
+				...(s.collapsed ? { collapsed: true } : {}),
+			})),
 		}),
 	);
 }

web/src/lib/pipeline.test.ts

@@ -79,6 +79,18 @@ describe("pipeline: parseChain (localStorage/импорт)", () => {
 		expect(chain[0].params).toMatchObject({ x: 5, y: 0 });
 	});
 
+	it("parseChain сохраняет collapsed, по умолчанию шаг развёрнут", () => {
+		const chain = parseChain({
+			version: CHAIN_VERSION,
+			steps: [
+				{ id: "crop", params: {}, collapsed: true },
+				{ id: "resize", params: {} },
+			],
+		})!;
+		expect(chain[0].collapsed).toBe(true);
+		expect(chain[1].collapsed).toBeUndefined();
+	});
+
 	it.each([
 		["нет версии", { steps: [{ id: "crop" }] }],
 		["другая версия", { version: 99, steps: [{ id: "crop" }] }],