feat: breadcrumbs, related tools

web/src/lib/catalog.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { PREVIEW_GROUPS, PREVIEW_TOTAL, relatedPages } from "./catalog";
+import { PAGES } from "./registry";
+
+describe("preview catalog", () => {
+	it("groups every page exactly once", () => {
+		expect(PREVIEW_GROUPS.flatMap((group) => group.pages)).toHaveLength(
+			PAGES.length,
+		);
+		expect(PREVIEW_TOTAL).toBe(PAGES.length);
+	});
+});
+
+describe("relatedPages", () => {
+	it("returns same-category pages first, without the page itself", () => {
+		for (const page of PAGES) {
+			const related = relatedPages(page, 4);
+			expect(related.every((r) => r.slug !== page.slug)).toBe(true);
+			const firstOtherCategory = related.findIndex(
+				(r) => r.category !== page.category,
+			);
+			expect(
+				related
+					.slice(0, firstOtherCategory < 0 ? undefined : firstOtherCategory)
+					.every((r) => r.category === page.category),
+				`${page.slug}: category neighbors must come first`,
+			).toBe(true);
+		}
+	});
+
+	it("respects the requested count", () => {
+		for (const page of PAGES) {
+			expect(relatedPages(page, 3).length).toBeLessThanOrEqual(3);
+		}
+	});
+
+	it("is deterministic (same input, same neighbors)", () => {
+		for (const page of PAGES) {
+			expect(relatedPages(page, 4)).toEqual(relatedPages(page, 4));
+		}
+	});
+
+	it("gives enough neighbors for the related block", () => {
+		const short = PAGES.filter((page) => relatedPages(page, 6).length < 3);
+		expect(
+			short.map((page) => page.slug),
+			"pages with fewer than 3 related tools",
+		).toEqual([]);
+	});
+});

web/src/lib/catalog.ts

@@ -15,3 +15,21 @@ export const PREVIEW_GROUPS: PreviewGroup[] = CATEGORY_IDS.map((category) => ({
 })).filter((group) => group.pages.length > 0);
 
 export const PREVIEW_TOTAL = PAGES.length;
+
+/**
+ * Neighbors for the related block: same category in catalog order, topped up
+ * from the whole catalog because the `text` category alone holds too few.
+ * Derived, never a hand-maintained list, so a new tool joins its neighbors.
+ */
+export function relatedPages(page: Page, count: number): Page[] {
+	const same = (
+		PREVIEW_GROUPS.find((g) => g.id === page.category)?.pages ?? []
+	).filter((candidate) => candidate.slug !== page.slug);
+	if (same.length >= count) return same.slice(0, count);
+
+	const others = PAGES.filter(
+		(candidate) =>
+			candidate.slug !== page.slug && candidate.category !== page.category,
+	);
+	return [...same, ...others].slice(0, count);
+}

web/src/lib/components/Breadcrumbs.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import { pageTitle } from "$lib/i18n/schema-tool-strings";
+	import { t } from "$lib/i18n/t";
+	import type { Page } from "$lib/registry";
+	import { ChevronRight } from "@lucide/svelte";
+
+	interface Props {
+		page: Page;
+	}
+	let { page }: Props = $props();
+
+	const categoryLabel = $derived(t(`categories.${page.category}`));
+	const title = $derived(pageTitle(page));
+</script>
+
+<!-- Middle crumb is plain text: a category has no address of its own until the
+     category hubs land (docs/plan-seo.md S3c), then it becomes a link here. -->
+<nav class="crumbs" aria-label={t("toolPage.breadcrumbAria")}>
+	<a href={resolve("/list-tools")}>{t("toolPage.breadcrumbCatalog")}</a>
+	<ChevronRight size={13} aria-hidden="true" />
+	<span>{categoryLabel}</span>
+	<ChevronRight size={13} aria-hidden="true" />
+	<span class="current" aria-current="page">{title}</span>
+</nav>
+
+<style>
+	.crumbs {
+		display: flex;
+		align-items: center;
+		gap: var(--space-s);
+		flex-wrap: wrap;
+		max-width: var(--size-content-max-wide);
+		padding: var(--space-xxxl) clamp(var(--space-m), 4vw, var(--space-xxxl)) 0;
+		font: var(--font-size-s) var(--font-mono);
+		color: var(--color-text-muted);
+	}
+	a {
+		color: var(--color-text-muted);
+		text-decoration: none;
+	}
+	a:hover {
+		color: var(--color-main);
+	}
+	.current {
+		color: var(--color-text);
+	}
+</style>

web/src/lib/components/PageContent.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
-	import { pageSeo } from "$lib/i18n/schema-tool-strings";
+	import { relatedPages } from "$lib/catalog";
+	import ToolCard from "$lib/components/catalog/ToolCard.svelte";
+	import {
+		pageDescription,
+		pageSeo,
+		pageTitle,
+	} from "$lib/i18n/schema-tool-strings";
 	import { t } from "$lib/i18n/t";
 	import type { Page } from "$lib/registry";
+	import { toolIcon } from "$lib/tool-icons";
 
 	interface Props {
 		page: Page;
@@ -9,6 +16,7 @@
 	let { page }: Props = $props();
 
 	const seo = $derived(pageSeo(page));
+	const related = $derived(relatedPages(page, 6));
 </script>
 
 <!-- Below the tool, not above it: the workspace is what the visitor came for,
@@ -33,6 +41,21 @@
 				</details>
 			{/each}
 		</div>
+
+		<!-- Internal links: the only way a crawler reaches the neighbours of
+		     this page, so the block stays derived from the category, never a
+		     hand-picked list. -->
+		<h2>{t("toolPage.relatedHeading")}</h2>
+		<div class="related">
+			{#each related as item (item.slug)}
+				<ToolCard
+					title={pageTitle(item)}
+					slug={item.slug}
+					description={pageDescription(item)}
+					icon={toolIcon(item.slug)}
+				/>
+			{/each}
+		</div>
 	</section>
 {/if}
 
@@ -91,9 +114,17 @@
 		font-size: var(--font-size-m);
 		line-height: 1.6;
 	}
+	.related {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: var(--space-l);
+	}
 	@media (--bp-tablet) {
 		.long {
 			font-size: var(--font-size-m);
 		}
+		.related {
+			grid-template-columns: 1fr;
+		}
 	}
 </style>

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

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import Button from "$lib/components/ui/Button.svelte";
+	import ChipButton from "$lib/components/ui/ChipButton.svelte";
+	import Toggle from "$lib/components/ui/Toggle.svelte";
 	import { ButtonVariantDefine } from "$lib/components/ui/define";
-	import { isFav, toggleFav } from "$lib/favorites.svelte";
-	import { Star } from "@lucide/svelte";
-	import { DragDropProvider } from "@dnd-kit/svelte";
 	import { debounce } from "$lib/core/debounce";
 	import { cachedDataUrl } from "$lib/core/io";
 	import type { PixelImage } from "$lib/core/types";
+	import { isFav, toggleFav } from "$lib/favorites.svelte";
 	import {
 		chainStepTitle,
 		chainWarningNotice,
@@ -17,8 +17,8 @@
 	import { t } from "$lib/i18n/t";
 	import { moveStep, type ChainStep } from "$lib/pipeline.svelte";
 	import { getTool, type Page, type Tool } from "$lib/registry";
-	import ChipButton from "$lib/components/ui/ChipButton.svelte";
-	import Toggle from "$lib/components/ui/Toggle.svelte";
+	import { DragDropProvider } from "@dnd-kit/svelte";
+	import { Star } from "@lucide/svelte";
 	import AddStepButton from "./AddStepButton.svelte";
 	import PartsGrid from "./PartsGrid.svelte";
 	import PreviewTile from "./PreviewTile.svelte";
@@ -32,8 +32,8 @@
 	import { createChainHost } from "./chain-host.svelte";
 	import { createOutputControls } from "./output-controls.svelte";
 	import { hasPreviewResult } from "./schema-preview-model";
-	import { createSchemaToolRunner } from "./schema-tool-runner.svelte";
 	import type { DisplayError } from "./schema-tool-runner.svelte";
+	import { createSchemaToolRunner } from "./schema-tool-runner.svelte";
 	import {
 		createSchemaToolState,
 		toolSchemaOf,
@@ -483,8 +483,8 @@
 
 <style>
 	.schema-tool {
-		padding: calc(var(--space-xxxl) + var(--space-l))
-			clamp(var(--space-m), 4vw, var(--space-xxxl));
+		padding: var(--space-l) clamp(var(--space-m), 4vw, var(--space-xxxl))
+			calc(var(--space-xxxl) + var(--space-l));
 		flex: 1;
 	}
 	.header {

web/src/lib/i18n/en.ts

@@ -52,6 +52,9 @@ export const en: Dict = {
 		stepError: "Step {n} ({title}): {msg}",
 		howToHeading: "How to use it",
 		faqHeading: "Questions",
+		relatedHeading: "Related tools",
+		breadcrumbAria: "Breadcrumb",
+		breadcrumbCatalog: "All tools",
 	},
 	chain: {
 		addStep: "Add step",

web/src/lib/i18n/ru.ts

@@ -53,6 +53,9 @@ export const ru: Dict = {
 		stepError: "Шаг {n} ({title}): {msg}",
 		howToHeading: "Как пользоваться",
 		faqHeading: "Вопросы",
+		relatedHeading: "Похожие инструменты",
+		breadcrumbAria: "Хлебные крошки",
+		breadcrumbCatalog: "Все инструменты",
 	},
 	chain: {
 		addStep: "Добавить шаг",

web/src/routes/tools/[slug]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Breadcrumbs from "$lib/components/Breadcrumbs.svelte";
 	import EmptyState from "$lib/components/feedback/EmptyState.svelte";
 	import PageContent from "$lib/components/PageContent.svelte";
 	import SchemaToolView from "$lib/components/schema/SchemaToolView.svelte";
@@ -51,6 +52,7 @@
 		/>
 	</div>
 {:else}
+	<Breadcrumbs {page} />
 	<SchemaToolView {page} {tool} />
 	<PageContent {page} />
 {/if}