fix: use toolcard as links at list page

web/src/lib/components/chain/ChainToolBlock.svelte

@@ -6,6 +6,7 @@
 	import EmptyState from '../ui/EmptyState.svelte';
 	import ParamsCard from '../tool/ParamsCard.svelte';
 	import Preview from '../Preview.svelte';
+	import { TOOL_ICONS } from '$lib/tools/tool-icons';
 
 	interface Props {
 		index: number;
@@ -37,11 +38,15 @@
 
 	const format = $derived(outputOf(tool));
 	const safeParams = $derived(sanitizeParams(tool, values));
+	const StepIcon = $derived(TOOL_ICONS[tool.id]);
 </script>
 
 <div class="block">
 	<div class="panel tool-stage">
 		<span class="edge-legend step-legend">
+			{#if StepIcon}
+				<span class="step-icon" aria-hidden="true"><StepIcon size={14} strokeWidth={2} /></span>
+			{/if}
 			Шаг {index + 1}: {tool.title}
 			<button
 				type="button"
@@ -118,6 +123,17 @@
 		font-weight: 600;
 	}
 
+	.step-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.4rem;
+		height: 1.4rem;
+		border-radius: var(--radius-s);
+		background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+		color: var(--accent);
+	}
+
 	.remove {
 		width: 1.4rem;
 		height: 1.4rem;

web/src/lib/components/search/ToolCard.svelte

@@ -6,27 +6,25 @@
 		title: string;
 		description: string;
 		selected?: boolean;
+		href?: string;
 		onActivate?: () => void;
 		onHover?: () => void;
 	}
 
-	let { toolId, title, description, selected = false, onActivate, onHover }: Props = $props();
+	let {
+		toolId,
+		title,
+		description,
+		selected = false,
+		href,
+		onActivate,
+		onHover
+	}: Props = $props();
 
 	const Icon = $derived(TOOL_ICONS[toolId]);
 </script>
 
-<div
-	class="card"
-	class:selected
-	role="option"
-	aria-selected={selected}
-	tabindex="-1"
-	onclick={onActivate}
-	onmousemove={onHover}
-	onkeydown={(e) => {
-		if (e.key === 'Enter') onActivate?.();
-	}}
->
+{#snippet content()}
 	<span class="icon-box" aria-hidden="true">
 		{#if Icon}<Icon size={24} strokeWidth={1.75} />{/if}
 	</span>
@@ -34,7 +32,33 @@
 		<span class="title">{title}</span>
 		<span class="hint text-caption text-muted">{description}</span>
 	</span>
-</div>
+{/snippet}
+
+{#if href}
+	<a
+		{href}
+		class="card"
+		class:selected
+		onmousemove={onHover}
+	>
+		{@render content()}
+	</a>
+{:else}
+	<div
+		class="card"
+		class:selected
+		role="option"
+		aria-selected={selected}
+		tabindex="-1"
+		onclick={onActivate}
+		onmousemove={onHover}
+		onkeydown={(e) => {
+			if (e.key === 'Enter') onActivate?.();
+		}}
+	>
+		{@render content()}
+	</div>
+{/if}
 
 <style>
 	.card {
@@ -46,6 +70,8 @@
 		border: 1px solid transparent;
 		border-radius: var(--radius-s);
 		cursor: pointer;
+		color: inherit;
+		text-decoration: none;
 	}
 
 	.card:hover,