Agent Pipeline Status Row
Decorative pipeline / status-strip graphic — nodes and connectors. Restyle via --lk-* CSS variables.
Install
npx shadcn@latest add https://visual-blocks.akiho.dev/r/agent-status-row.jsonnpx skills add akifo/landerkitBlocks work with zero setup thanks to baked defaults. Set --lk-accent(and optionally --lk-bg / --lk-radius /--lk-font / --lk-grid) on :rootor any wrapper to restyle.
Source
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 120" role="img" aria-label="Agent Pipeline Status Row — decorative, fake data" class="lk-block" data-lk="agent-status-row" data-lk-contract="1">
<title>Status pipeline graphic</title>
<desc>Decorative status/pipeline graphic. Illustrative shape only; any implied data is fictional.</desc>
<style>
/* lk-contract v1 — synced from blocks/_contract/header.css */
[data-lk="agent-status-row"] {
--_accent: var(--lk-accent, #4BE0C3);
--_bg: var(--lk-bg, #0A0F14);
--_radius: var(--lk-radius, 12px);
--_i: oklch(from var(--_bg) clamp(0.14, (0.68 - l) * 999, 0.93) min(c, 0.03) h);
--_i2: color-mix(in oklab, var(--_i) 62%, transparent);
--_i3: color-mix(in oklab, var(--_i) 42%, transparent);
--_hair: color-mix(in oklab, var(--_i) 8%, transparent);
--_g: var(--lk-grid, color-mix(in oklab, var(--_i) 9%, transparent));
--_surf: color-mix(in oklab, var(--_accent) 3%, var(--_bg));
--_soft: color-mix(in oklab, var(--_accent) 24%, transparent);
--_faint: color-mix(in oklab, var(--_accent) 12%, transparent);
--_glow: color-mix(in oklab, var(--_accent) 55%, var(--_bg));
color: var(--_accent);
font-family: var(--lk-font, 'Inter','Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif);
}
/* base ink: text flips with the bg via --_i; dim/semantic classes override (see CONVENTIONS.md) */
[data-lk="agent-status-row"] text,
[data-lk="agent-status-row"] tspan { fill: var(--_i); }
/* Layer 3: block-specific — every selector MUST start with [data-lk="agent-status-row"] */
[data-lk="agent-status-row"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }
[data-lk="agent-status-row"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }
[data-lk="agent-status-row"] .hair { stroke: var(--_hair); stroke-width: 1; }
[data-lk="agent-status-row"] .halo { fill: var(--_faint); }
[data-lk="agent-status-row"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }
[data-lk="agent-status-row"] .check { fill: none; stroke: var(--_accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
[data-lk="agent-status-row"] .arc { fill: none; stroke: var(--_accent); stroke-width: 1.5; stroke-linecap: round; }
[data-lk="agent-status-row"] .idle { fill: none; stroke: var(--_g); stroke-width: 1; stroke-dasharray: 3 2; }
[data-lk="agent-status-row"] .chip { fill: none; stroke: var(--_hair); stroke-width: 1; rx: calc(var(--_radius) * .5); }
/* Hover motion (opt-out): 2 stages. (1) the three connector segments draw left
to right in quick succession (pathLength=1 dash sweep), reading as one
continuous pipeline trace. (2) once the trace lands, the four nodes pop in
turn, left to right, as if the signal just arrived at each one. Off for
reduced-motion visitors; set the motion token to 0 to force off. */
[data-lk="agent-status-row"] .node { transform-box: view-box; }
[data-lk="agent-status-row"] .n1 { transform-origin: 130.5px 60px; }
[data-lk="agent-status-row"] .n2 { transform-origin: 267.5px 60px; }
[data-lk="agent-status-row"] .n3 { transform-origin: 404.5px 60px; }
[data-lk="agent-status-row"] .n4 { transform-origin: 541.5px 60px; }
@media (prefers-reduced-motion: no-preference) {
[data-lk="agent-status-row"]:hover .conn { animation: lk-agent-status-row-draw calc(var(--lk-motion, 1) * .4s) linear both; }
[data-lk="agent-status-row"]:hover .seg2 { animation-delay: calc(var(--lk-motion, 1) * .15s); }
[data-lk="agent-status-row"]:hover .seg3 { animation-delay: calc(var(--lk-motion, 1) * .3s); }
[data-lk="agent-status-row"]:hover .node { animation: lk-agent-status-row-pop calc(var(--lk-motion, 1) * .3s) ease-out both; }
[data-lk="agent-status-row"]:hover .n1 { animation-delay: calc(var(--lk-motion, 1) * .7s); }
[data-lk="agent-status-row"]:hover .n2 { animation-delay: calc(var(--lk-motion, 1) * .76s); }
[data-lk="agent-status-row"]:hover .n3 { animation-delay: calc(var(--lk-motion, 1) * .82s); }
[data-lk="agent-status-row"]:hover .n4 { animation-delay: calc(var(--lk-motion, 1) * .88s); }
}
@keyframes lk-agent-status-row-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes lk-agent-status-row-pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
</style>
<rect class="card" x=".5" y=".5" width="719" height="119" rx="12" fill="#0E141B" stroke="#1A2128"/>
<!-- graticule bed: réseau crosses in the two clear top corners + zone dividers, all on the grid/hairline tokens -->
<path class="grid" d="M11 14h6M14 11v6M703 14h6M706 11v6" fill="none" stroke="#1C262C" stroke-width="1"/>
<line class="hair" x1="62" y1="22" x2="62" y2="98" stroke="#1A2128" stroke-width="1"/>
<line class="hair" x1="610" y1="22" x2="610" y2="98" stroke="#1A2128" stroke-width="1"/>
<!-- left: agent status dot, punched core + faint halo, no blur -->
<circle class="halo" cx="36" cy="60" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="36" cy="60" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<!-- centre: 4-node pipeline, evenly spaced, joined by connector hairlines; pathLength=1
on each segment lets them dash-draw left to right on hover, in quick succession -->
<path class="hair conn seg1" pathLength="1" d="M135.5 60L262.5 60" fill="none" stroke="#1A2128" stroke-width="1"/>
<path class="hair conn seg2" pathLength="1" d="M272.5 60L399.5 60" fill="none" stroke="#1A2128" stroke-width="1"/>
<path class="hair conn seg3" pathLength="1" d="M409.5 60L536.5 60" fill="none" stroke="#1A2128" stroke-width="1"/>
<!-- node 1: complete (punched dot + accent check glyph), grouped so both pop together -->
<g class="node n1">
<circle class="dot" cx="130.5" cy="60" r="5" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<path class="check" d="M128 60.3L129.9 62.1L133.1 57.7" fill="none" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<!-- node 2: complete -->
<g class="node n2">
<circle class="dot" cx="267.5" cy="60" r="5" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<path class="check" d="M265 60.3L266.9 62.1L270.1 57.7" fill="none" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<!-- node 3: active (halo bloom + static partial arc, a paused spinner and the row's one glowing signal) -->
<g class="node n3">
<circle class="halo" cx="404.5" cy="60" r="8" fill="#4BE0C31F"/>
<circle class="grid" cx="404.5" cy="60" r="5" fill="none" stroke="#1C262C" stroke-width="1"/>
<path class="arc" d="M404.5 55A5 5 0 1 1 399.5 60" fill="none" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round"/>
</g>
<!-- node 4: idle (dashed grid-token outline, no icon yet) -->
<g class="node n4">
<circle class="idle" cx="541.5" cy="60" r="5" fill="none" stroke="#1C262C" stroke-width="1" stroke-dasharray="3 2"/>
</g>
<!-- right: rounded outline pill, empty -->
<rect class="chip" x="632" y="49.5" width="64" height="21" rx="10.5" fill="none" stroke="#1A2128" stroke-width="1"/>
</svg>
/* GENERATED FROM blocks/ (catalog.json + *.svg + _contract/) — DO NOT EDIT. Run `pnpm generate`. */
import type { HTMLAttributes } from 'react';
const svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 720 120\" role=\"img\" aria-label=\"Agent Pipeline Status Row — decorative, fake data\" class=\"lk-block\" data-lk=\"agent-status-row\" data-lk-contract=\"1\">\n <title>Status pipeline graphic</title>\n <desc>Decorative status/pipeline graphic. Illustrative shape only; any implied data is fictional.</desc>\n <style>\n /* lk-contract v1 — synced from blocks/_contract/header.css */\n [data-lk=\"agent-status-row\"] {\n --_accent: var(--lk-accent, #4BE0C3);\n --_bg: var(--lk-bg, #0A0F14);\n --_radius: var(--lk-radius, 12px);\n --_i: oklch(from var(--_bg) clamp(0.14, (0.68 - l) * 999, 0.93) min(c, 0.03) h);\n --_i2: color-mix(in oklab, var(--_i) 62%, transparent);\n --_i3: color-mix(in oklab, var(--_i) 42%, transparent);\n --_hair: color-mix(in oklab, var(--_i) 8%, transparent);\n --_g: var(--lk-grid, color-mix(in oklab, var(--_i) 9%, transparent));\n --_surf: color-mix(in oklab, var(--_accent) 3%, var(--_bg));\n --_soft: color-mix(in oklab, var(--_accent) 24%, transparent);\n --_faint: color-mix(in oklab, var(--_accent) 12%, transparent);\n --_glow: color-mix(in oklab, var(--_accent) 55%, var(--_bg));\n color: var(--_accent);\n font-family: var(--lk-font, 'Inter','Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif);\n }\n /* base ink: text flips with the bg via --_i; dim/semantic classes override (see CONVENTIONS.md) */\n [data-lk=\"agent-status-row\"] text,\n [data-lk=\"agent-status-row\"] tspan { fill: var(--_i); }\n\n\n /* Layer 3: block-specific — every selector MUST start with [data-lk=\"agent-status-row\"] */\n [data-lk=\"agent-status-row\"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }\n [data-lk=\"agent-status-row\"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }\n [data-lk=\"agent-status-row\"] .hair { stroke: var(--_hair); stroke-width: 1; }\n [data-lk=\"agent-status-row\"] .halo { fill: var(--_faint); }\n [data-lk=\"agent-status-row\"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }\n [data-lk=\"agent-status-row\"] .check { fill: none; stroke: var(--_accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }\n [data-lk=\"agent-status-row\"] .arc { fill: none; stroke: var(--_accent); stroke-width: 1.5; stroke-linecap: round; }\n [data-lk=\"agent-status-row\"] .idle { fill: none; stroke: var(--_g); stroke-width: 1; stroke-dasharray: 3 2; }\n [data-lk=\"agent-status-row\"] .chip { fill: none; stroke: var(--_hair); stroke-width: 1; rx: calc(var(--_radius) * .5); }\n\n /* Hover motion (opt-out): 2 stages. (1) the three connector segments draw left\n to right in quick succession (pathLength=1 dash sweep), reading as one\n continuous pipeline trace. (2) once the trace lands, the four nodes pop in\n turn, left to right, as if the signal just arrived at each one. Off for\n reduced-motion visitors; set the motion token to 0 to force off. */\n [data-lk=\"agent-status-row\"] .node { transform-box: view-box; }\n [data-lk=\"agent-status-row\"] .n1 { transform-origin: 130.5px 60px; }\n [data-lk=\"agent-status-row\"] .n2 { transform-origin: 267.5px 60px; }\n [data-lk=\"agent-status-row\"] .n3 { transform-origin: 404.5px 60px; }\n [data-lk=\"agent-status-row\"] .n4 { transform-origin: 541.5px 60px; }\n @media (prefers-reduced-motion: no-preference) {\n [data-lk=\"agent-status-row\"]:hover .conn { animation: lk-agent-status-row-draw calc(var(--lk-motion, 1) * .4s) linear both; }\n [data-lk=\"agent-status-row\"]:hover .seg2 { animation-delay: calc(var(--lk-motion, 1) * .15s); }\n [data-lk=\"agent-status-row\"]:hover .seg3 { animation-delay: calc(var(--lk-motion, 1) * .3s); }\n [data-lk=\"agent-status-row\"]:hover .node { animation: lk-agent-status-row-pop calc(var(--lk-motion, 1) * .3s) ease-out both; }\n [data-lk=\"agent-status-row\"]:hover .n1 { animation-delay: calc(var(--lk-motion, 1) * .7s); }\n [data-lk=\"agent-status-row\"]:hover .n2 { animation-delay: calc(var(--lk-motion, 1) * .76s); }\n [data-lk=\"agent-status-row\"]:hover .n3 { animation-delay: calc(var(--lk-motion, 1) * .82s); }\n [data-lk=\"agent-status-row\"]:hover .n4 { animation-delay: calc(var(--lk-motion, 1) * .88s); }\n }\n @keyframes lk-agent-status-row-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }\n @keyframes lk-agent-status-row-pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }\n </style>\n <rect class=\"card\" x=\".5\" y=\".5\" width=\"719\" height=\"119\" rx=\"12\" fill=\"#0E141B\" stroke=\"#1A2128\"/>\n\n <!-- graticule bed: réseau crosses in the two clear top corners + zone dividers, all on the grid/hairline tokens -->\n <path class=\"grid\" d=\"M11 14h6M14 11v6M703 14h6M706 11v6\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n <line class=\"hair\" x1=\"62\" y1=\"22\" x2=\"62\" y2=\"98\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n <line class=\"hair\" x1=\"610\" y1=\"22\" x2=\"610\" y2=\"98\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n\n <!-- left: agent status dot, punched core + faint halo, no blur -->\n <circle class=\"halo\" cx=\"36\" cy=\"60\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"36\" cy=\"60\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n\n <!-- centre: 4-node pipeline, evenly spaced, joined by connector hairlines; pathLength=1\n on each segment lets them dash-draw left to right on hover, in quick succession -->\n <path class=\"hair conn seg1\" pathLength=\"1\" d=\"M135.5 60L262.5 60\" fill=\"none\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n <path class=\"hair conn seg2\" pathLength=\"1\" d=\"M272.5 60L399.5 60\" fill=\"none\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n <path class=\"hair conn seg3\" pathLength=\"1\" d=\"M409.5 60L536.5 60\" fill=\"none\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n\n <!-- node 1: complete (punched dot + accent check glyph), grouped so both pop together -->\n <g class=\"node n1\">\n <circle class=\"dot\" cx=\"130.5\" cy=\"60\" r=\"5\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <path class=\"check\" d=\"M128 60.3L129.9 62.1L133.1 57.7\" fill=\"none\" stroke=\"#4BE0C3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n\n <!-- node 2: complete -->\n <g class=\"node n2\">\n <circle class=\"dot\" cx=\"267.5\" cy=\"60\" r=\"5\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <path class=\"check\" d=\"M265 60.3L266.9 62.1L270.1 57.7\" fill=\"none\" stroke=\"#4BE0C3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n\n <!-- node 3: active (halo bloom + static partial arc, a paused spinner and the row's one glowing signal) -->\n <g class=\"node n3\">\n <circle class=\"halo\" cx=\"404.5\" cy=\"60\" r=\"8\" fill=\"#4BE0C31F\"/>\n <circle class=\"grid\" cx=\"404.5\" cy=\"60\" r=\"5\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n <path class=\"arc\" d=\"M404.5 55A5 5 0 1 1 399.5 60\" fill=\"none\" stroke=\"#4BE0C3\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n\n <!-- node 4: idle (dashed grid-token outline, no icon yet) -->\n <g class=\"node n4\">\n <circle class=\"idle\" cx=\"541.5\" cy=\"60\" r=\"5\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\" stroke-dasharray=\"3 2\"/>\n </g>\n\n <!-- right: rounded outline pill, empty -->\n <rect class=\"chip\" x=\"632\" y=\"49.5\" width=\"64\" height=\"21\" rx=\"10.5\" fill=\"none\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n</svg>\n";
export function AgentPipelineStatusRow(props: HTMLAttributes<HTMLDivElement>) {
return <div {...props} dangerouslySetInnerHTML={{ __html: svg }} />;
}
export default AgentPipelineStatusRow;
<!-- GENERATED FROM blocks/ (catalog.json + *.svg + _contract/) — DO NOT EDIT. Run `pnpm generate`. -->
<template>
<div v-html="svg" />
</template>
<script setup lang="ts">
const svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 720 120\" role=\"img\" aria-label=\"Agent Pipeline Status Row — decorative, fake data\" class=\"lk-block\" data-lk=\"agent-status-row\" data-lk-contract=\"1\">\n <title>Status pipeline graphic</title>\n <desc>Decorative status/pipeline graphic. Illustrative shape only; any implied data is fictional.</desc>\n <style>\n /* lk-contract v1 — synced from blocks/_contract/header.css */\n [data-lk=\"agent-status-row\"] {\n --_accent: var(--lk-accent, #4BE0C3);\n --_bg: var(--lk-bg, #0A0F14);\n --_radius: var(--lk-radius, 12px);\n --_i: oklch(from var(--_bg) clamp(0.14, (0.68 - l) * 999, 0.93) min(c, 0.03) h);\n --_i2: color-mix(in oklab, var(--_i) 62%, transparent);\n --_i3: color-mix(in oklab, var(--_i) 42%, transparent);\n --_hair: color-mix(in oklab, var(--_i) 8%, transparent);\n --_g: var(--lk-grid, color-mix(in oklab, var(--_i) 9%, transparent));\n --_surf: color-mix(in oklab, var(--_accent) 3%, var(--_bg));\n --_soft: color-mix(in oklab, var(--_accent) 24%, transparent);\n --_faint: color-mix(in oklab, var(--_accent) 12%, transparent);\n --_glow: color-mix(in oklab, var(--_accent) 55%, var(--_bg));\n color: var(--_accent);\n font-family: var(--lk-font, 'Inter','Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif);\n }\n /* base ink: text flips with the bg via --_i; dim/semantic classes override (see CONVENTIONS.md) */\n [data-lk=\"agent-status-row\"] text,\n [data-lk=\"agent-status-row\"] tspan { fill: var(--_i); }\n\n\n /* Layer 3: block-specific — every selector MUST start with [data-lk=\"agent-status-row\"] */\n [data-lk=\"agent-status-row\"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }\n [data-lk=\"agent-status-row\"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }\n [data-lk=\"agent-status-row\"] .hair { stroke: var(--_hair); stroke-width: 1; }\n [data-lk=\"agent-status-row\"] .halo { fill: var(--_faint); }\n [data-lk=\"agent-status-row\"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }\n [data-lk=\"agent-status-row\"] .check { fill: none; stroke: var(--_accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }\n [data-lk=\"agent-status-row\"] .arc { fill: none; stroke: var(--_accent); stroke-width: 1.5; stroke-linecap: round; }\n [data-lk=\"agent-status-row\"] .idle { fill: none; stroke: var(--_g); stroke-width: 1; stroke-dasharray: 3 2; }\n [data-lk=\"agent-status-row\"] .chip { fill: none; stroke: var(--_hair); stroke-width: 1; rx: calc(var(--_radius) * .5); }\n\n /* Hover motion (opt-out): 2 stages. (1) the three connector segments draw left\n to right in quick succession (pathLength=1 dash sweep), reading as one\n continuous pipeline trace. (2) once the trace lands, the four nodes pop in\n turn, left to right, as if the signal just arrived at each one. Off for\n reduced-motion visitors; set the motion token to 0 to force off. */\n [data-lk=\"agent-status-row\"] .node { transform-box: view-box; }\n [data-lk=\"agent-status-row\"] .n1 { transform-origin: 130.5px 60px; }\n [data-lk=\"agent-status-row\"] .n2 { transform-origin: 267.5px 60px; }\n [data-lk=\"agent-status-row\"] .n3 { transform-origin: 404.5px 60px; }\n [data-lk=\"agent-status-row\"] .n4 { transform-origin: 541.5px 60px; }\n @media (prefers-reduced-motion: no-preference) {\n [data-lk=\"agent-status-row\"]:hover .conn { animation: lk-agent-status-row-draw calc(var(--lk-motion, 1) * .4s) linear both; }\n [data-lk=\"agent-status-row\"]:hover .seg2 { animation-delay: calc(var(--lk-motion, 1) * .15s); }\n [data-lk=\"agent-status-row\"]:hover .seg3 { animation-delay: calc(var(--lk-motion, 1) * .3s); }\n [data-lk=\"agent-status-row\"]:hover .node { animation: lk-agent-status-row-pop calc(var(--lk-motion, 1) * .3s) ease-out both; }\n [data-lk=\"agent-status-row\"]:hover .n1 { animation-delay: calc(var(--lk-motion, 1) * .7s); }\n [data-lk=\"agent-status-row\"]:hover .n2 { animation-delay: calc(var(--lk-motion, 1) * .76s); }\n [data-lk=\"agent-status-row\"]:hover .n3 { animation-delay: calc(var(--lk-motion, 1) * .82s); }\n [data-lk=\"agent-status-row\"]:hover .n4 { animation-delay: calc(var(--lk-motion, 1) * .88s); }\n }\n @keyframes lk-agent-status-row-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }\n @keyframes lk-agent-status-row-pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }\n </style>\n <rect class=\"card\" x=\".5\" y=\".5\" width=\"719\" height=\"119\" rx=\"12\" fill=\"#0E141B\" stroke=\"#1A2128\"/>\n\n <!-- graticule bed: réseau crosses in the two clear top corners + zone dividers, all on the grid/hairline tokens -->\n <path class=\"grid\" d=\"M11 14h6M14 11v6M703 14h6M706 11v6\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n <line class=\"hair\" x1=\"62\" y1=\"22\" x2=\"62\" y2=\"98\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n <line class=\"hair\" x1=\"610\" y1=\"22\" x2=\"610\" y2=\"98\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n\n <!-- left: agent status dot, punched core + faint halo, no blur -->\n <circle class=\"halo\" cx=\"36\" cy=\"60\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"36\" cy=\"60\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n\n <!-- centre: 4-node pipeline, evenly spaced, joined by connector hairlines; pathLength=1\n on each segment lets them dash-draw left to right on hover, in quick succession -->\n <path class=\"hair conn seg1\" pathLength=\"1\" d=\"M135.5 60L262.5 60\" fill=\"none\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n <path class=\"hair conn seg2\" pathLength=\"1\" d=\"M272.5 60L399.5 60\" fill=\"none\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n <path class=\"hair conn seg3\" pathLength=\"1\" d=\"M409.5 60L536.5 60\" fill=\"none\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n\n <!-- node 1: complete (punched dot + accent check glyph), grouped so both pop together -->\n <g class=\"node n1\">\n <circle class=\"dot\" cx=\"130.5\" cy=\"60\" r=\"5\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <path class=\"check\" d=\"M128 60.3L129.9 62.1L133.1 57.7\" fill=\"none\" stroke=\"#4BE0C3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n\n <!-- node 2: complete -->\n <g class=\"node n2\">\n <circle class=\"dot\" cx=\"267.5\" cy=\"60\" r=\"5\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <path class=\"check\" d=\"M265 60.3L266.9 62.1L270.1 57.7\" fill=\"none\" stroke=\"#4BE0C3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n\n <!-- node 3: active (halo bloom + static partial arc, a paused spinner and the row's one glowing signal) -->\n <g class=\"node n3\">\n <circle class=\"halo\" cx=\"404.5\" cy=\"60\" r=\"8\" fill=\"#4BE0C31F\"/>\n <circle class=\"grid\" cx=\"404.5\" cy=\"60\" r=\"5\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n <path class=\"arc\" d=\"M404.5 55A5 5 0 1 1 399.5 60\" fill=\"none\" stroke=\"#4BE0C3\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n\n <!-- node 4: idle (dashed grid-token outline, no icon yet) -->\n <g class=\"node n4\">\n <circle class=\"idle\" cx=\"541.5\" cy=\"60\" r=\"5\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\" stroke-dasharray=\"3 2\"/>\n </g>\n\n <!-- right: rounded outline pill, empty -->\n <rect class=\"chip\" x=\"632\" y=\"49.5\" width=\"64\" height=\"21\" rx=\"10.5\" fill=\"none\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n</svg>\n";
</script>
<div style="--lk-accent: #4BE0C3; --lk-bg: #0A0F14;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 120" role="img" aria-label="Agent Pipeline Status Row — decorative, fake data" class="lk-block" data-lk="agent-status-row" data-lk-contract="1">
<title>Status pipeline graphic</title>
<desc>Decorative status/pipeline graphic. Illustrative shape only; any implied data is fictional.</desc>
<style>
/* lk-contract v1 — synced from blocks/_contract/header.css */
[data-lk="agent-status-row"] {
--_accent: var(--lk-accent, #4BE0C3);
--_bg: var(--lk-bg, #0A0F14);
--_radius: var(--lk-radius, 12px);
--_i: oklch(from var(--_bg) clamp(0.14, (0.68 - l) * 999, 0.93) min(c, 0.03) h);
--_i2: color-mix(in oklab, var(--_i) 62%, transparent);
--_i3: color-mix(in oklab, var(--_i) 42%, transparent);
--_hair: color-mix(in oklab, var(--_i) 8%, transparent);
--_g: var(--lk-grid, color-mix(in oklab, var(--_i) 9%, transparent));
--_surf: color-mix(in oklab, var(--_accent) 3%, var(--_bg));
--_soft: color-mix(in oklab, var(--_accent) 24%, transparent);
--_faint: color-mix(in oklab, var(--_accent) 12%, transparent);
--_glow: color-mix(in oklab, var(--_accent) 55%, var(--_bg));
color: var(--_accent);
font-family: var(--lk-font, 'Inter','Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif);
}
/* base ink: text flips with the bg via --_i; dim/semantic classes override (see CONVENTIONS.md) */
[data-lk="agent-status-row"] text,
[data-lk="agent-status-row"] tspan { fill: var(--_i); }
/* Layer 3: block-specific — every selector MUST start with [data-lk="agent-status-row"] */
[data-lk="agent-status-row"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }
[data-lk="agent-status-row"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }
[data-lk="agent-status-row"] .hair { stroke: var(--_hair); stroke-width: 1; }
[data-lk="agent-status-row"] .halo { fill: var(--_faint); }
[data-lk="agent-status-row"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }
[data-lk="agent-status-row"] .check { fill: none; stroke: var(--_accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
[data-lk="agent-status-row"] .arc { fill: none; stroke: var(--_accent); stroke-width: 1.5; stroke-linecap: round; }
[data-lk="agent-status-row"] .idle { fill: none; stroke: var(--_g); stroke-width: 1; stroke-dasharray: 3 2; }
[data-lk="agent-status-row"] .chip { fill: none; stroke: var(--_hair); stroke-width: 1; rx: calc(var(--_radius) * .5); }
/* Hover motion (opt-out): 2 stages. (1) the three connector segments draw left
to right in quick succession (pathLength=1 dash sweep), reading as one
continuous pipeline trace. (2) once the trace lands, the four nodes pop in
turn, left to right, as if the signal just arrived at each one. Off for
reduced-motion visitors; set the motion token to 0 to force off. */
[data-lk="agent-status-row"] .node { transform-box: view-box; }
[data-lk="agent-status-row"] .n1 { transform-origin: 130.5px 60px; }
[data-lk="agent-status-row"] .n2 { transform-origin: 267.5px 60px; }
[data-lk="agent-status-row"] .n3 { transform-origin: 404.5px 60px; }
[data-lk="agent-status-row"] .n4 { transform-origin: 541.5px 60px; }
@media (prefers-reduced-motion: no-preference) {
[data-lk="agent-status-row"]:hover .conn { animation: lk-agent-status-row-draw calc(var(--lk-motion, 1) * .4s) linear both; }
[data-lk="agent-status-row"]:hover .seg2 { animation-delay: calc(var(--lk-motion, 1) * .15s); }
[data-lk="agent-status-row"]:hover .seg3 { animation-delay: calc(var(--lk-motion, 1) * .3s); }
[data-lk="agent-status-row"]:hover .node { animation: lk-agent-status-row-pop calc(var(--lk-motion, 1) * .3s) ease-out both; }
[data-lk="agent-status-row"]:hover .n1 { animation-delay: calc(var(--lk-motion, 1) * .7s); }
[data-lk="agent-status-row"]:hover .n2 { animation-delay: calc(var(--lk-motion, 1) * .76s); }
[data-lk="agent-status-row"]:hover .n3 { animation-delay: calc(var(--lk-motion, 1) * .82s); }
[data-lk="agent-status-row"]:hover .n4 { animation-delay: calc(var(--lk-motion, 1) * .88s); }
}
@keyframes lk-agent-status-row-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes lk-agent-status-row-pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
</style>
<rect class="card" x=".5" y=".5" width="719" height="119" rx="12" fill="#0E141B" stroke="#1A2128"/>
<!-- graticule bed: réseau crosses in the two clear top corners + zone dividers, all on the grid/hairline tokens -->
<path class="grid" d="M11 14h6M14 11v6M703 14h6M706 11v6" fill="none" stroke="#1C262C" stroke-width="1"/>
<line class="hair" x1="62" y1="22" x2="62" y2="98" stroke="#1A2128" stroke-width="1"/>
<line class="hair" x1="610" y1="22" x2="610" y2="98" stroke="#1A2128" stroke-width="1"/>
<!-- left: agent status dot, punched core + faint halo, no blur -->
<circle class="halo" cx="36" cy="60" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="36" cy="60" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<!-- centre: 4-node pipeline, evenly spaced, joined by connector hairlines; pathLength=1
on each segment lets them dash-draw left to right on hover, in quick succession -->
<path class="hair conn seg1" pathLength="1" d="M135.5 60L262.5 60" fill="none" stroke="#1A2128" stroke-width="1"/>
<path class="hair conn seg2" pathLength="1" d="M272.5 60L399.5 60" fill="none" stroke="#1A2128" stroke-width="1"/>
<path class="hair conn seg3" pathLength="1" d="M409.5 60L536.5 60" fill="none" stroke="#1A2128" stroke-width="1"/>
<!-- node 1: complete (punched dot + accent check glyph), grouped so both pop together -->
<g class="node n1">
<circle class="dot" cx="130.5" cy="60" r="5" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<path class="check" d="M128 60.3L129.9 62.1L133.1 57.7" fill="none" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<!-- node 2: complete -->
<g class="node n2">
<circle class="dot" cx="267.5" cy="60" r="5" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<path class="check" d="M265 60.3L266.9 62.1L270.1 57.7" fill="none" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<!-- node 3: active (halo bloom + static partial arc, a paused spinner and the row's one glowing signal) -->
<g class="node n3">
<circle class="halo" cx="404.5" cy="60" r="8" fill="#4BE0C31F"/>
<circle class="grid" cx="404.5" cy="60" r="5" fill="none" stroke="#1C262C" stroke-width="1"/>
<path class="arc" d="M404.5 55A5 5 0 1 1 399.5 60" fill="none" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round"/>
</g>
<!-- node 4: idle (dashed grid-token outline, no icon yet) -->
<g class="node n4">
<circle class="idle" cx="541.5" cy="60" r="5" fill="none" stroke="#1C262C" stroke-width="1" stroke-dasharray="3 2"/>
</g>
<!-- right: rounded outline pill, empty -->
<rect class="chip" x="632" y="49.5" width="64" height="21" rx="10.5" fill="none" stroke="#1A2128" stroke-width="1"/>
</svg>
</div>