@shortlink-org/portolan 0.2.3 → 0.3.0

package/src/flow/StepDetail.tsx

@@ -1,18 +1,20 @@
+import { RelationEvidencePanel } from "../components/RelationEvidence";
+import { stepRelationEvidence } from "./evidence";
+import { HTTPDestinationEvidence } from "../components/HTTPDestinationEvidence";
 import { useMemo } from "react";
 import { Link } from "react-router";
-import { AlertTriangle } from "lucide-react";
+import { AlertTriangle, FileCode2 } from "lucide-react";
 import { allRepos, stepFrames } from "../catalog";
 import type { Flow, Step, StepFrame } from "../catalog";
 import { catalog, index } from "../data";
 import { Ident } from "../components/Ident";
-import { EditorLink } from "../components/EditorLink";
-import { SourcePreviewButton } from "../components/SourcePreview";
+import { SourcePreviewLink } from "../components/SourcePreview";
 import { flowRepoService } from "../lib/derive";
 import { sourceLocation } from "../lib/source-link";
 import { AdrNumber, StatusChip } from "../components/primitives";
 import { ShapeRows } from "../components/ShapeRows";
 import { shapeFor } from "../components/MethodRows";
-import { stepAnswer } from "./answers";
+import { stepAnswer, stepRpcContract } from "./answers";
 import {
   aggregatePath,
   paths,
@@ -154,12 +156,28 @@ function EventDetail({ step, flow }: { step: Step; flow: Flow }) {
 }
 
 function RpcDetail({ step, flow }: { step: Step; flow: Flow }) {
-  const method = step.ref ?? step.label ?? "(unknown method)";
+  const contract = stepRpcContract(index, step);
+  const method = contract?.id ?? step.ref ?? step.label ?? "(unknown method)";
   const call = step.ref ? index.rpcById.get(step.ref) : undefined;
-  const provider = step.ref
-    ? index.rpcProviderByMethod.get(step.ref)
+  const provider = contract?.provider;
+  const internalProvider = provider
+    ? index.serviceById.get(provider.id)
     : undefined;
-  const providerPath = provider ? servicePath(provider.id) : null;
+  const providerPath = internalProvider ? servicePath(internalProvider.id) : null;
+  const requestFields = contract
+    ? shapeFor(
+        contract.provided,
+        contract.method.request,
+        contract.method.requestRef,
+      )
+    : null;
+  const responseFields = contract
+    ? shapeFor(
+        contract.provided,
+        contract.method.response,
+        contract.method.responseRef,
+      )
+    : null;
   // The flow records the hop; what comes back is the contract's to say.
   const answer = stepAnswer(index, step);
 
@@ -175,6 +193,8 @@ function RpcDetail({ step, flow }: { step: Step; flow: Flow }) {
         </div>
       </header>
 
+      {step.destination ? <HTTPDestinationEvidence destination={step.destination} /> : null}
+
       <DetailSection title="Contract">
         <dl className="grid grid-cols-[minmax(7rem,auto)_minmax(0,1fr)] gap-x-4 gap-y-2">
           {answer ? (
@@ -185,10 +205,12 @@ function RpcDetail({ step, flow }: { step: Step; flow: Flow }) {
           ) : null}
           <dt className="mono text-muted">Provider</dt>
           <dd>
-            {provider && providerPath ? (
+            {internalProvider && providerPath ? (
               <Link to={providerPath} className="mono text-accent">
-                {provider.id} →
+                {internalProvider.id} →
               </Link>
+            ) : provider ? (
+              <span className="mono text-ink">{provider.id}</span>
             ) : (
               <span className="mono inline-flex items-center gap-1.5 rounded-control border px-1.5 py-0.5 status-unresolved">
                 <AlertTriangle size={11} aria-hidden />
@@ -205,6 +227,34 @@ function RpcDetail({ step, flow }: { step: Step; flow: Flow }) {
         </dl>
       </DetailSection>
 
+      {contract?.method.request ? (
+        <DetailSection title="Request" meta={contract.method.request}>
+          {requestFields ? (
+            <ShapeRows
+              fields={requestFields}
+              enums={contract.provided.enums}
+              showHeader
+            />
+          ) : (
+            <div className="mono text-muted">shape not recorded</div>
+          )}
+        </DetailSection>
+      ) : null}
+
+      {contract?.method.response ? (
+        <DetailSection title="Response" meta={contract.method.response}>
+          {responseFields ? (
+            <ShapeRows
+              fields={responseFields}
+              enums={contract.provided.enums}
+              showHeader
+            />
+          ) : (
+            <div className="mono text-muted">shape not recorded</div>
+          )}
+        </DetailSection>
+      ) : null}
+
       <DetailSection title="Source">
         {call ? (
           <SourceWhere where={call.source} flow={flow} structured />
@@ -525,48 +575,25 @@ function SourceWhere({
     allRepos(catalog),
   );
 
-  const actions = (
-    <>
-      <SourcePreviewButton
-        location={location}
-        className="border px-2 py-1 border-line bg-canvas hover:bg-raised hover:no-underline"
-      />
-      {location?.href ? (
-        <a
-          href={location.href}
-          target="_blank"
-          rel="noreferrer"
-          className="mono inline-flex items-center rounded-control border px-2 py-1 border-line bg-canvas text-accent hover:bg-raised"
-          title="Open on the forge, at the built commit"
-        >
-          forge ↗
-        </a>
-      ) : null}
-      <EditorLink
-        location={location}
-        variant="text"
-        className="inline-flex items-center border px-2 py-1 border-line bg-canvas hover:bg-raised hover:no-underline"
-      />
-    </>
+  const source = (
+    <SourcePreviewLink
+      location={location}
+      className={
+        structured
+          ? "w-full min-w-0 border px-2.5 py-2 border-line bg-canvas text-ink hover:border-line-strong hover:bg-raised hover:no-underline"
+          : "max-w-full min-w-0 text-muted hover:text-accent"
+      }
+    >
+      <FileCode2 size={14} aria-hidden className="shrink-0" />
+      <span className="min-w-0 break-all text-left">{where}</span>
+    </SourcePreviewLink>
   );
 
   if (structured) {
-    return (
-      <div className="flex min-w-0 flex-col gap-2">
-        <div className="mono min-w-0 break-all text-muted">
-          <Ident block value={where} className="text-muted" />
-        </div>
-        <div className="flex flex-wrap items-center gap-1.5">{actions}</div>
-      </div>
-    );
+    return <div className="min-w-0">{source}</div>;
   }
 
-  return (
-    <div className="mono flex flex-wrap items-center gap-2 break-all text-muted">
-      <Ident block value={where} className="text-muted" />
-      {actions}
-    </div>
-  );
+  return <div className="min-w-0">{source}</div>;
 }
 
 function Where({ step, flow }: { step: Step; flow: Flow }) {
@@ -574,6 +601,34 @@ function Where({ step, flow }: { step: Step; flow: Flow }) {
   return <SourceWhere where={step.line} flow={flow} />;
 }
 
+function CallDetail({ step, flow }: { step: Step; flow: Flow }) {
+  return (
+    <section
+      aria-label="Call detail"
+      className="overflow-hidden rounded-card border shadow-xs border-line"
+    >
+      <header className="border-b px-3 py-2.5 border-line bg-surface">
+        <h2 className="label">Call</h2>
+        <div className="mt-2">
+          <Ident
+            block
+            value={step.label ?? "internal call"}
+            className="text-ink"
+          />
+        </div>
+      </header>
+
+      <DetailSection title="Source">
+        {step.line ? (
+          <SourceWhere where={step.line} flow={flow} structured />
+        ) : (
+          <div className="mono text-muted">not recorded</div>
+        )}
+      </DetailSection>
+    </section>
+  );
+}
+
 function StoreCallDetail({ step, flow }: { step: Step; flow: Flow }) {
   const access = step.storeAccess!;
   const store = index.storeById.get(access.store);
@@ -668,6 +723,7 @@ export function StepDetailBody({ step, flow }: { step: Step; flow: Flow }) {
   return (
     <>
       <ExecutionContext step={step} flow={flow} />
+      <RelationEvidencePanel items={stepRelationEvidence(index, step)} renderSource={(where) => <SourceWhere where={where} flow={flow} structured />} />
 
       {/* A decision that names this step's event is the reason the step
           looks the way it does. It belongs next to the step, not three
@@ -699,13 +755,7 @@ export function StepDetailBody({ step, flow }: { step: Step; flow: Flow }) {
       ) : step.storeAccess ? (
         <StoreCallDetail step={step} flow={flow} />
       ) : (
-        <>
-          <div className="mono text-[13px]">
-            {step.label ?? "internal call"}
-          </div>
-          <Label>Source</Label>
-          <Where step={step} flow={flow} />
-        </>
+        <CallDetail step={step} flow={flow} />
       )}
 
       {step.note ? (

package/src/flow/answers.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest";
 import { catalog, index } from "../data";
 import { walkSteps } from "../catalog";
-import { flowAnswers, stepAnswer } from "./answers";
+import { flowAnswers, stepAnswer, stepRpcContract } from "./answers";
 
 const flow = (slug: string) => {
   const found = catalog.flows.find((f) => f.slug === slug);
@@ -16,6 +16,23 @@ const step = (slug: string, id: string) => {
 };
 
 describe("stepAnswer", () => {
+  it("resolves an incoming endpoint to its full request and response contract", () => {
+    const contract = stepRpcContract(
+      index,
+      step("pricing-archive-price-list", "s1"),
+    );
+
+    expect(contract?.id).toBe("shop.v1.PriceLists/ArchivePriceList");
+    expect(contract?.provider.id).toBe("shop.pricing");
+    expect(contract?.method.request).toBe("ArchivePriceListRequest");
+    expect(contract?.method.response).toBe("ArchivePriceListResponse");
+    expect(
+      contract?.provided.messages?.find(
+        (message) => message.name === contract.method.request,
+      )?.fields.map((field) => field.name),
+    ).toEqual(["price_list_id"]);
+  });
+
   it("reads the answer of an endpoint off the document that declares it", () => {
     // billing's ViewSet is exposed by billing.v1.Invoices, and the document
     // says a void answers 204 and an issue answers with the invoice's id.

package/src/flow/answers.ts

@@ -9,14 +9,33 @@
 // queryset - which no interface in the catalog describes; an event is a
 // publication, and drawing a reply to it would be a lie about the bus.
 
-import type { CatalogIndex, Flow, RpcMethod, Step } from "../catalog";
+import type {
+  CatalogIndex,
+  External,
+  Flow,
+  RpcMethod,
+  RpcService,
+  Service,
+  Step,
+} from "../catalog";
 import { walkSteps } from "../catalog";
 
-/** The method a step reaches, when the catalog has it. */
-function methodOf(index: CatalogIndex, step: Step): RpcMethod | undefined {
+export interface StepRpcContract {
+  id: string;
+  provider: Service | External;
+  provided: RpcService;
+  method: RpcMethod;
+}
+
+/** The interface and method an RPC step reaches, when the catalog has them. */
+export function stepRpcContract(
+  index: CatalogIndex,
+  step: Step,
+): StepRpcContract | undefined {
   if (step.kind !== "rpc") return undefined;
 
-  // Outgoing: the step names the call, and the call id is `<interface>/<method>`.
+  // A recorded ref is the full `<interface>/<method>` id, whether the flow
+  // enters this service or calls another one.
   if (step.ref) {
     const cut = step.ref.lastIndexOf("/");
     if (cut < 0) return undefined;
@@ -26,22 +45,32 @@ function methodOf(index: CatalogIndex, step: Step): RpcMethod | undefined {
     const provider =
       index.rpcProviderByMethod.get(step.ref) ?? index.externalProviderByMethod.get(step.ref);
     const provided = provider?.provides.find((p) => p.id === interfaceId);
-    return provided?.methods.find((m) => m.name === name);
+    const method = provided?.methods.find((m) => m.name === name);
+    if (!provider || !provided || !method) return undefined;
+    return { id: step.ref, provider, provided, method };
   }
 
-  // Incoming: somebody called this service, and the label is the operation.
+  // Older incoming flows recorded only the operation label. Keep resolving
+  // those catalogs while new extractors write the full ref above.
   const service = index.serviceById.get(step.to);
   if (!service || !step.label) return undefined;
   for (const provided of service.provides) {
     const found = provided.methods.find((m) => m.name === step.label);
-    if (found) return found;
+    if (found) {
+      return {
+        id: `${provided.id}/${found.name}`,
+        provider: service,
+        provided,
+        method: found,
+      };
+    }
   }
   return undefined;
 }
 
 /** What the callee hands back, as the contract names it. */
 export function stepAnswer(index: CatalogIndex, step: Step): string | undefined {
-  return methodOf(index, step)?.response || undefined;
+  return stepRpcContract(index, step)?.method.response || undefined;
 }
 
 /** Every request without an explicit response step that has an answer. */

package/src/flow/evidence.test.ts

@@ -0,0 +1,16 @@
+import { expect, it } from "vitest";
+import { buildIndex, type Catalog, type Step } from "../catalog";
+import { stepRelationEvidence } from "./evidence";
+
+const index = buildIndex({ generatedAt: "", commit: "", contexts: [], defs: {}, flows: [], adrs: [] } as Catalog);
+it("gives legacy call, event, RPC and response steps an honest source explanation", () => {
+  for (const kind of ["call", "event", "rpc", "response"] as const) {
+    const step: Step = { type: "step", id: "s1", from: "a", to: "b", kind, status: "declared", line: "handler.go:8" };
+    expect(stepRelationEvidence(index, step)).toEqual([{ kind: "call-site", rule: "source-expression", source: "handler.go:8", symbol: undefined }]);
+  }
+});
+it("keeps unresolved status and deduplicates recorded evidence", () => {
+  const evidence = { kind: "call-site" as const, rule: "source-expression", source: "handler.go:8" };
+  const step: Step = { type: "step", id: "s1", from: "a", to: "b", kind: "call", status: "unresolved", line: evidence.source, evidence: [evidence, evidence] };
+  expect(stepRelationEvidence(index, step).map((item) => item.kind)).toEqual(["call-site", "unresolved"]);
+});

package/src/flow/evidence.ts

@@ -0,0 +1,34 @@
+import type { CatalogIndex, RelationEvidence, Step } from "../catalog";
+import { stepRpcContract } from "./answers";
+
+/** Adapt older fragments to the same explanation without inventing a path. */
+export function stepRelationEvidence(index: CatalogIndex, step: Step): RelationEvidence[] {
+  const items = [...(step.evidence ?? [])];
+  if (step.line && !items.some((item) => item.kind === "call-site" && item.source === step.line)) {
+    items.push({ kind: "call-site", rule: "source-expression", source: step.line, symbol: step.label });
+  }
+  const contract = stepRpcContract(index, step);
+  if (contract) items.push({ kind: "contract", rule: "catalog-contract", source: contract.provided.source, symbol: contract.id });
+  if (step.kind === "event" && step.ref) {
+    const event = index.eventById.get(step.ref);
+    const version = event?.versions.at(-1);
+    if (version) items.push({ kind: "contract", rule: "event-declaration", source: version.source, symbol: step.ref });
+  }
+  if (step.storeAccess?.source) items.push({ kind: "binding", rule: "repository-sql-call", source: step.storeAccess.source, symbol: step.storeAccess.method });
+  if (step.destination?.resolution) {
+    const resolution = step.destination.resolution;
+    items.push({ kind: "resolution", rule: resolution.basis, symbol: `${resolution.provider} ${resolution.route}` });
+  }
+  if (step.continuesAt) items.push({ kind: "resolution", rule: "continuation-entrypoint", symbol: step.continuesAt });
+  if (step.kind === "response" && step.replyTo) items.push({ kind: "resolution", rule: "response-to-request", symbol: step.replyTo });
+  if (step.status === "unresolved" && !items.some((item) => item.kind === "unresolved")) {
+    items.push({ kind: "unresolved", rule: "unresolved-target", symbol: step.ref ?? step.label });
+  }
+  const seen = new Set<string>();
+  return items.filter((item) => {
+    const key = JSON.stringify(item);
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}

package/src/index.css

@@ -681,6 +681,50 @@
     outline: 2px solid color-mix(in srgb, var(--accent) 55%, white);
     outline-offset: 3px;
   }
+  .product-danger {
+    color: white;
+    border-color: #a33a4b;
+    background:
+      radial-gradient(
+        circle at 18% 0%,
+        rgb(255 255 255 / 0.16),
+        transparent 42%
+      ),
+      linear-gradient(
+        to bottom,
+        #8e2b3d,
+        #651827
+      );
+    box-shadow:
+      inset 0 1px 0 rgb(255 255 255 / 0.2),
+      inset 0 -1px 0 rgb(0 0 0 / 0.28),
+      0 1px 2px rgb(0 0 0 / 0.24),
+      0 12px 28px -18px color-mix(in srgb, var(--status-unresolved) 84%, transparent);
+    text-shadow: 0 1px 0 rgb(0 0 0 / 0.32);
+  }
+  .product-danger:hover {
+    color: white;
+    border-color: #c45a6b;
+    background:
+      radial-gradient(
+        circle at 18% 0%,
+        rgb(255 255 255 / 0.2),
+        transparent 42%
+      ),
+      linear-gradient(
+        to bottom,
+        #a13246,
+        #741b2c
+      );
+    box-shadow:
+      inset 0 1px 0 rgb(255 255 255 / 0.26),
+      inset 0 -1px 0 rgb(0 0 0 / 0.3),
+      0 2px 4px rgb(0 0 0 / 0.25),
+      0 16px 34px -17px color-mix(in srgb, var(--status-unresolved) 96%, transparent);
+  }
+  .product-danger:focus-visible {
+    outline-color: color-mix(in srgb, var(--status-unresolved) 62%, white);
+  }
   .product-primary:disabled,
   .tbtn:disabled {
     cursor: not-allowed;

package/src/landing/DraggableReveal.tsx

@@ -105,7 +105,9 @@ export function DraggableReveal({
         className={`pointer-events-none absolute inset-0 z-0 flex ${catPlacement[revealEdge]}`}
       >
         <m.img
-          layout="position"
+          // Deliberately not a layout animation: the preview's children can
+          // reflow independently, and their tab changes must not send this
+          // hidden illustration across the background.
           src={cat}
           alt=""
           width={800}
@@ -118,7 +120,6 @@ export function DraggableReveal({
             y: dragging ? -3 : 0,
           }}
           transition={{
-            layout: { type: "spring", stiffness: 260, damping: 28 },
             opacity: { duration: 0.22 },
             scale: { duration: 0.28 },
             y: { duration: 0.28 },

package/src/landing/EvidencePipeline.tsx

@@ -0,0 +1,105 @@
+import { ArrowRight, Braces, CircleDotDashed, Code2, Network } from "lucide-react";
+import { useRef } from "react";
+import { useInView } from "motion/react";
+import { m, useReducedMotion } from "../lib/motion";
+
+const steps = [
+  {
+    icon: Code2,
+    label: "01 / read",
+    title: "Code and specifications",
+    copy: "Existing source, schemas, contracts, ADRs and traces.",
+  },
+  {
+    icon: Braces,
+    label: "02 / extract",
+    title: "Local fragments",
+    copy: "Each service publishes the architectural facts it owns.",
+  },
+  {
+    icon: CircleDotDashed,
+    label: "03 / validate",
+    title: "One estate model",
+    copy: "Portolan merges the union and checks every relationship.",
+  },
+  {
+    icon: Network,
+    label: "04 / publish",
+    title: "A static catalog",
+    copy: "Browse the site or export Markdown, Mermaid and Backstage entities.",
+  },
+] as const;
+
+// One shared cycle keeps the arrows in sync, including the quiet pause.
+const cycle = 6.8;
+const pulse = (index: number) => {
+  const start = 0.4 + index * 0.85;
+  return {
+    duration: cycle,
+    repeat: Infinity,
+    ease: "easeInOut" as const,
+    times: [0, start, start + 0.2, start + 0.65, start + 1.15, cycle].map(
+      (time) => time / cycle,
+    ),
+  };
+};
+
+export function EvidencePipeline() {
+  const ref = useRef<HTMLOListElement>(null);
+  const inView = useInView(ref, { amount: 0.2 });
+  const reduced = useReducedMotion();
+  const playing = inView && !reduced;
+
+  return (
+    <ol
+      ref={ref}
+      aria-label="How Portolan turns evidence into architecture documentation"
+      className="mt-12 grid gap-4 md:grid-cols-2 xl:grid-cols-4"
+    >
+      {steps.map((item, index) => {
+        const Icon = item.icon;
+        const continues = index < steps.length - 1;
+        const connectsWithinRow = index === 0 || index === 2;
+
+        return (
+          <li
+            key={item.title}
+            className="relative rounded-card border border-line bg-canvas p-5 shadow-xs"
+          >
+            <div className="flex items-center justify-between">
+              <span className="flow-tile text-accent">
+                <Icon size={14} aria-hidden />
+              </span>
+              <span className="mono text-faint">{item.label}</span>
+            </div>
+
+            <h3 className="mt-8 text-md font-semibold">{item.title}</h3>
+            <p className="mt-2 text-sm text-muted">{item.copy}</p>
+
+            {continues ? (
+              <span
+                aria-hidden
+                className={`absolute top-[22px] -right-[17px] z-10 h-[18px] w-4 items-center justify-center bg-canvas text-faint ${
+                  connectsWithinRow ? "hidden md:flex" : "hidden xl:flex"
+                }`}
+              >
+                <ArrowRight size={11} />
+                <m.span
+                  className="absolute inset-0 flex items-center justify-center text-accent drop-shadow-[0_0_4px_var(--color-accent)]"
+                  initial={{ opacity: 0, x: -4 }}
+                  animate={playing ? {
+                    opacity: [0, 0, 1, 1, 0, 0],
+                    x: [-4, -4, -2, 2, 4, 4],
+                  } : { opacity: 0, x: -4 }}
+                  transition={playing ? pulse(index + 0.65) : { duration: 0.2 }}
+                >
+                  <ArrowRight size={11} />
+                </m.span>
+              </span>
+            ) : null}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/src/landing/LandingPage.tsx

@@ -1,17 +1,13 @@
 import {
   ArrowRight,
   Bot,
-  Braces,
   Check,
-  CircleDotDashed,
-  Code2,
   Copy,
   FileSearch,
   Files,
   FileText,
   GitBranch,
   Moon,
-  Network,
   ShieldCheck,
   Sun,
   Terminal,
@@ -27,6 +23,7 @@ import { m } from "../lib/motion";
 import { paths } from "../routes";
 import { catalogTo } from "./catalog";
 import { DraggableReveal } from "./DraggableReveal";
+import { EvidencePipeline } from "./EvidencePipeline";
 import { heroColumn, heroLine, Reveal } from "./motion";
 import { ProductFrame } from "./ProductFrame";
 import { ProductTour } from "./ProductTour";
@@ -249,33 +246,6 @@ function CopyCommand({
   );
 }
 
-const pipeline = [
-  {
-    icon: Code2,
-    label: "01 / read",
-    title: "Code and specifications",
-    copy: "Existing source, schemas, contracts, ADRs and traces.",
-  },
-  {
-    icon: Braces,
-    label: "02 / extract",
-    title: "Local fragments",
-    copy: "Each service publishes the architectural facts it owns.",
-  },
-  {
-    icon: CircleDotDashed,
-    label: "03 / validate",
-    title: "One estate model",
-    copy: "Portolan merges the union and checks every relationship.",
-  },
-  {
-    icon: Network,
-    label: "04 / publish",
-    title: "A static catalog",
-    copy: "Browse the site or export Markdown, Mermaid and Backstage entities.",
-  },
-];
-
 export function LandingPage() {
   useDocumentTitle("Architecture from code");
 
@@ -422,34 +392,7 @@ export function LandingPage() {
                 Architecture documentation that begins with evidence.
               </h2>
             </Reveal>
-            <div className="mt-12 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-              {pipeline.map((item, index) => {
-                const Icon = item.icon;
-                return (
-                  <Reveal
-                    key={item.title}
-                    delay={index * 0.07}
-                    className="relative rounded-card border border-line bg-canvas p-5 shadow-xs"
-                  >
-                    <div className="flex items-center justify-between">
-                      <span className="flow-tile text-accent">
-                        <Icon size={14} />
-                      </span>
-                      <span className="mono text-faint">{item.label}</span>
-                    </div>
-                    <h3 className="mt-8 text-md font-semibold">{item.title}</h3>
-                    <p className="mt-2 text-sm text-muted">{item.copy}</p>
-                    {index < pipeline.length - 1 ? (
-                      <ArrowRight
-                        size={16}
-                        className="absolute top-1/2 -right-[11px] z-10 hidden -translate-y-1/2 rounded-full bg-canvas text-faint xl:block"
-                        aria-hidden
-                      />
-                    ) : null}
-                  </Reveal>
-                );
-              })}
-            </div>
+            <EvidencePipeline />
           </div>
         </section>