From 5c58451f2f5a0dde167d7b2bebcc8f3190f20212 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Tue, 6 Oct 2026 19:08:47 +0500
Subject: [PATCH] feat: collapse\expand steps in pipeline

---
 docs/backlog.md                                 |  3 ---
 web/src/lib/components/display/StepCard.svelte  | 17 +++++++++++++++--
 .../lib/components/schema/SchemaToolView.svelte |  8 ++++++++
 web/src/lib/i18n/en.ts                          |  2 ++
 web/src/lib/i18n/ru.ts                          |  2 ++
 web/src/lib/pipeline.svelte.ts                  | 10 ++++++++--
 web/src/lib/pipeline.test.ts                    | 12 ++++++++++++
 7 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/docs/backlog.md b/docs/backlog.md
index 8a9012e..6add163 100644
--- a/docs/backlog.md
+++ b/docs/backlog.md
@@ -20,9 +20,6 @@
       (любой шаг, не только первый), остальные шаги и их параметры сохраняются,
       вход перечитывается. Открытый вопрос: что делать с несовместимыми входами
       (text-source ↔ file).
-- [ ] **Идея 2. Сворачивать инструменты в chain** — оценка S. Тоггл сворачивания
-      звена до заголовка «Шаг n: название» (превью скрываются). Состояние
-      свёрнутости помнить в workspace-pipeline.
 - [ ] **Идея 3. Несколько цепочек: сохранение и загрузка** — оценка M.
       Именованные цепочки в localStorage (список, создать/переименовать/
       удалить), быстрое переключение. Формат экспортного JSON расширить
diff --git a/web/src/lib/components/display/StepCard.svelte b/web/src/lib/components/display/StepCard.svelte
index c7940e4..d449452 100644
--- a/web/src/lib/components/display/StepCard.svelte
+++ b/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>
diff --git a/web/src/lib/components/schema/SchemaToolView.svelte b/web/src/lib/components/schema/SchemaToolView.svelte
index eb18030..4e584fd 100644
--- a/web/src/lib/components/schema/SchemaToolView.svelte
+++ b/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}
diff --git a/web/src/lib/i18n/en.ts b/web/src/lib/i18n/en.ts
index 94e4651..0ec7d21 100644
--- a/web/src/lib/i18n/en.ts
+++ b/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",
diff --git a/web/src/lib/i18n/ru.ts b/web/src/lib/i18n/ru.ts
index 420432e..cf22467 100644
--- a/web/src/lib/i18n/ru.ts
+++ b/web/src/lib/i18n/ru.ts
@@ -50,6 +50,8 @@ export const ru: Dict = {
 	},
 	chain: {
 		addStep: "Добавить шаг",
+		collapseStep: "Свернуть шаг",
+		expandStep: "Развернуть шаг",
 		inputLegend: "Вход",
 		resultLegend: "Результат",
 		paramsLegend: "Параметры",
diff --git a/web/src/lib/pipeline.svelte.ts b/web/src/lib/pipeline.svelte.ts
index e705771..11c2ca8 100644
--- a/web/src/lib/pipeline.svelte.ts
+++ b/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 } : {}),
+			})),
 		}),
 	);
 }
diff --git a/web/src/lib/pipeline.test.ts b/web/src/lib/pipeline.test.ts
index 6c99f90..cd3a809 100644
--- a/web/src/lib/pipeline.test.ts
+++ b/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" }] }],