<section id="task-rows" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 240ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">06</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Task Rows</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Live agent task status — running, failed, completed.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height: 296px;"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="flex w-full max-w-110 flex-col min-h-[196px] gap-2"><div class="self-stretch overflow-hidden transition-[border-radius] duration-300 bg-surface shadow-card" style="border-radius:22px;animation:fade-up 450ms cubic-bezier(0.23,1,0.32,1) 0ms both"><button type="button" aria-expanded="false" class="flex h-11 w-full items-center gap-2.5 px-2.5 text-left transition-colors duration-100 hover:bg-inset"><span class="flex size-6 shrink-0 items-center justify-center"><span class="flex size-5.5 shrink-0 items-center justify-center rounded-full text-white
        bg-green" style="animation:pop-in 300ms cubic-bezier(0.23,1,0.32,1) both"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg></span></span><span class="min-w-0 flex-1 truncate text-[13px] font-medium text-ink">Verified vendor records</span><span class="text-[12.5px] text-ink-2 tabular-nums">12 suppliers</span><span class="inline-flex h-5.5 items-center rounded-full bg-green-tint px-2 text-[11.5px] font-medium text-green">Completed</span><span aria-hidden="true" class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full text-ink-3"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300" style="transform:rotate(0)"><path d="M6 9l6 6 6-6"></path></svg></span></button><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:0fr;opacity:0;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"><div class="overflow-hidden"><div class="mb-2.5 grid grid-cols-[24px_1fr] gap-2.5 px-2.5"><span aria-hidden="true" class="mx-auto h-full w-px bg-line"></span><div class="flex flex-col gap-1.5"><div class="flex items-center justify-between"><span class="text-[12px] text-ink-2">Matched tax and contact IDs</span><span class="font-mono text-[11.5px] text-ink-3 tabular-nums">12/12</span></div><div class="flex items-center justify-between"><span class="text-[12px] text-ink-2">Flagged stale records</span><span class="font-mono text-[11.5px] text-ink-3 tabular-nums">0</span></div></div></div></div></div></div><div class="self-stretch overflow-hidden transition-[border-radius] duration-300 bg-surface shadow-card" style="border-radius: 22px; animation: 450ms cubic-bezier(0.23, 1, 0.32, 1) 80ms 1 normal both running fade-up;"><button type="button" aria-expanded="false" class="flex h-11 w-full items-center gap-2.5 px-2.5 text-left transition-colors duration-100 hover:bg-inset"><span class="flex size-6 shrink-0 items-center justify-center"><span class="relative inline-flex shrink-0 items-center justify-center" style="width:24px;height:24px"><svg width="24" height="24" class="absolute inset-0" style="animation:spin 1.1s linear infinite"><circle cx="12" cy="12" r="11" fill="none" stroke="var(--line)" stroke-width="2"></circle><circle cx="12" cy="12" r="11" fill="none" stroke="var(--ink-3)" stroke-width="2" stroke-linecap="round" stroke-dasharray="19.352210746113126 49.76282763286232"></circle></svg><span class="relative text-[10.5px] font-semibold tabular-nums text-ink">2</span></span></span><span class="min-w-0 flex-1 truncate text-[13px] font-medium text-ink">Build reorder task list</span><span class="text-[12.5px] text-ink-2 tabular-nums">7 SKUs</span><span aria-hidden="true" class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full text-ink-3"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300" style="transform: rotate(0deg);"><path d="M6 9l6 6 6-6"></path></svg></span></button><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows: 0fr; opacity: 0; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);"><div class="overflow-hidden"><div class="mb-2.5 grid grid-cols-[24px_1fr] gap-2.5 px-2.5"><span aria-hidden="true" class="mx-auto h-full w-px bg-line"></span><div class="flex flex-col gap-1.5"><div class="flex items-center justify-between" style=""><span class="text-[12px] text-ink-2">Reading POS export</span><span class="font-mono text-[11.5px] text-ink-3 tabular-nums">3 files</span></div><div class="flex items-center justify-between" style=""><span class="text-[12px] text-ink-2">Scoring stockout risk</span><span class="font-mono text-[11.5px] text-ink-3 tabular-nums">68%</span></div></div></div></div></div></div><div class="self-stretch overflow-hidden transition-[border-radius] duration-300 bg-surface shadow-card" style="border-radius:22px;animation:fade-up 450ms cubic-bezier(0.23,1,0.32,1) 160ms both"><button type="button" aria-expanded="false" class="flex h-11 w-full items-center gap-2.5 px-2.5 text-left transition-colors duration-100 hover:bg-inset"><span class="flex size-6 shrink-0 items-center justify-center"><span class="flex size-5.5 shrink-0 items-center justify-center rounded-full text-white
        bg-green" style="animation: 300ms cubic-bezier(0.23, 1, 0.32, 1) 0s 1 normal both running pop-in;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg></span></span><span class="min-w-0 flex-1 truncate text-[13px] font-medium text-ink">Draft supplier emails</span><span class="text-[12.5px] text-ink-2 tabular-nums">2 messages</span><span class="inline-flex h-5.5 items-center gap-1.5 rounded-full bg-green-tint px-2 text-[11.5px] font-medium text-green" style="animation: 200ms ease-out 0s 1 normal both running fade-in;">Completed</span><span aria-hidden="true" class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full text-ink-3"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300" style="transform:rotate(0)"><path d="M6 9l6 6 6-6"></path></svg></span></button><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:0fr;opacity:0;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"><div class="overflow-hidden"><div class="mb-2.5 grid grid-cols-[24px_1fr] gap-2.5 px-2.5"><span aria-hidden="true" class="mx-auto h-full w-px bg-line"></span><div class="flex flex-col gap-1.5"><div class="flex items-center justify-between"><span class="text-[12px] text-ink-2">Cone supplier follow-up</span><span class="font-mono text-[11.5px] text-ink-3 tabular-nums">draft</span></div><div class="flex items-center justify-between"><span class="text-[12px] text-ink-2">Pistachio reorder note</span><span class="font-mono text-[11.5px] text-ink-3 tabular-nums">draft</span></div></div></div></div></div></div></div></div><div class="absolute bottom-2.5 left-1/2 flex -translate-x-1/2 rounded-full bg-field p-0.5"><button class="rounded-full px-2 py-0.5 text-[11.5px] font-medium transition-[background-color,color,box-shadow] duration-150
                  bg-surface text-ink shadow-btn">Capsules</button><button class="rounded-full px-2 py-0.5 text-[11.5px] font-medium transition-[background-color,color,box-shadow] duration-150
                  text-ink-3 hover:text-ink-2">List</button></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section>