From cba25050214dd3526c85ede72f64338102d1a731 Mon Sep 17 00:00:00 2001
From: ephraimduncan <ephraimduncan68@gmail.com>
Date: Thu, 30 Jul 2026 16:30:00 +0000
Subject: [PATCH] fix(elements): keep chain-of-thought timeline connector
 continuous between steps

---
 packages/elements/src/chain-of-thought.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/elements/src/chain-of-thought.tsx b/packages/elements/src/chain-of-thought.tsx
index f1b26601..b9b87842 100644
--- a/packages/elements/src/chain-of-thought.tsx
+++ b/packages/elements/src/chain-of-thought.tsx
@@ -1,5 +1,8 @@
 "use client";
 
+import type { LucideIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { Badge } from "@repo/shadcn-ui/components/ui/badge";
 import {
@@ -8,9 +11,7 @@ import {
   CollapsibleTrigger,
 } from "@repo/shadcn-ui/components/ui/collapsible";
 import { cn } from "@repo/shadcn-ui/lib/utils";
-import type { LucideIcon } from "lucide-react";
 import { BrainIcon, ChevronDownIcon, DotIcon } from "lucide-react";
-import type { ComponentProps, ReactNode } from "react";
 import { createContext, memo, useContext, useMemo } from "react";
 
 interface ChainOfThoughtContextValue {
@@ -126,7 +127,7 @@ export const ChainOfThoughtStep = memo(
   }: ChainOfThoughtStepProps) => (
     <div
       className={cn(
-        "flex gap-2 text-sm",
+        "group/step flex gap-2 text-sm",
         stepStatusStyles[status],
         "fade-in-0 slide-in-from-top-2 animate-in",
         className
@@ -135,7 +136,7 @@ export const ChainOfThoughtStep = memo(
     >
       <div className="relative mt-0.5">
         <Icon className="size-4" />
-        <div className="absolute top-7 bottom-0 left-1/2 -mx-px w-px bg-border" />
+        <div className="-bottom-3 -mx-px absolute top-6 left-1/2 w-px bg-border group-last/step:hidden" />
       </div>
       <div className="flex-1 space-y-2 overflow-hidden">
         <div>{label}</div>