fix(site): replace expandable agentic loop section with cool design (#24171)

the current page has an "Agentic loop completed" block that doesn't
really contain any valuable info that isn't available elsewhere. replace
this with a status indicator
 
<img width="507" height="300" alt="Screenshot 2026-04-08 at 2 47 40 PM"
src="https://github.com/user-attachments/assets/09cf3772-a52d-485d-a15e-b2257b2d9003"
/>

site/src/pages/AIBridgePage/SessionThreadsPage/SessionTimeline/SessionTimeline.tsx

@@ -20,7 +20,6 @@ import {
 import { cn } from "#/utils/cn";
 import { docs } from "#/utils/docs";
 import { JsonPrettyPrinter } from "../../JsonPrettyPrinter";
-import { TokenBadges } from "../../TokenBadges";
 import { AgenticLoopTable } from "./AgenticLoopTable";
 import { PromptTable } from "./PromptTable";
 import { ToolCallTable } from "./ToolCallTable";
@@ -234,44 +233,6 @@ const ToolCallBlock: FC<ToolCallBlockProps> = ({
 	);
 };
 
-interface AgenticLoopCompletedBlockProps {
-	inputTokens: number;
-	outputTokens: number;
-	expandedByDefault?: boolean;
-}
-
-const AgenticLoopCompletedBlock: FC<AgenticLoopCompletedBlockProps> = ({
-	inputTokens,
-	outputTokens,
-	expandedByDefault = false,
-}) => {
-	const [isOpen, setIsOpen] = useState(expandedByDefault);
-
-	return (
-		<BracketConnector
-			contentClassName="mt-3 border border-solid rounded-md mb-4 mr-4"
-			hideBottomLine
-		>
-			<div className="flex items-center">
-				<CollapseButton isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
-					<span className="text-sm font-normal">Agentic loop completed</span>
-				</CollapseButton>
-			</div>
-			{isOpen && (
-				<div className="mb-4 ml-3 mr-4 flex flex-col gap-2 lg:w-1/2 text-sm text-content-secondary">
-					<div className="flex items-center justify-between">
-						<span className="font-normal">In / out tokens</span>
-						<TokenBadges
-							inputTokens={inputTokens}
-							outputTokens={outputTokens}
-						/>
-					</div>
-				</div>
-			)}
-		</BracketConnector>
-	);
-};
-
 interface AgenticActionItemProps {
 	action: AIBridgeAgenticAction;
 }
@@ -423,11 +384,15 @@ const ThreadItem: FC<ThreadItemProps> = ({ thread, initiator }) => {
 								<AgenticActionItem key={`${thread.id}-${i}`} action={action} />
 							))}
 
-							{/* Agentic loop completed block */}
-							<AgenticLoopCompletedBlock
-								inputTokens={thread.token_usage.input_tokens}
-								outputTokens={thread.token_usage.output_tokens}
-							/>
+							{/* Agentic loop completed */}
+							<BracketConnector contentClassName="py-4 -my-px" hideBottomLine>
+								<div className="flex flex-row items-center ml-2">
+									<StatusIndicatorDot variant="success" />
+									<span className="text-content-success font-normal ml-2 text-sm py-1">
+										Agentic loop completed
+									</span>
+								</div>
+							</BracketConnector>
 						</>
 					)}
 				</BracketConnector>
@@ -597,7 +562,7 @@ export const SessionTimeline: FC<SessionTimelineProps> = ({
 					{/* vertical line */}
 				</div>
 
-				{/* row 8: session start */}
+				{/* row 8: session completed */}
 				<div className="row-start-8 col-start-2 relative">
 					<StatusIndicatorDot
 						variant="success"