From d54e21e066893266d496f7fcf07ca08cfa3c5499 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 8 Jul 2026 02:37:31 +0530
Subject: [PATCH] feat(runs-table): add alert component for API runs overview

- Introduced an Alert component to provide a concise description of API runs in the workspace.
- Replaced the previous header and description with the new alert for improved clarity and user experience.
---
 .../playground/components/runs-table.tsx         | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/surfsense_web/app/dashboard/[workspace_id]/playground/components/runs-table.tsx b/surfsense_web/app/dashboard/[workspace_id]/playground/components/runs-table.tsx
index 17508c0ff..6368a1f76 100644
--- a/surfsense_web/app/dashboard/[workspace_id]/playground/components/runs-table.tsx
+++ b/surfsense_web/app/dashboard/[workspace_id]/playground/components/runs-table.tsx
@@ -1,8 +1,9 @@
 "use client";
 
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { ChevronDown, ChevronRight, History } from "lucide-react";
+import { ChevronDown, ChevronRight, History, Info } from "lucide-react";
 import { Fragment, useState } from "react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import {
 	Select,
@@ -67,13 +68,12 @@ export function RunsTable({ workspaceId }: { workspaceId: number }) {
 
 	return (
 		<div className="space-y-4">
-			<div>
-				<h1 className="text-xl font-semibold text-foreground md:text-2xl">Runs</h1>
-				<p className="mt-1 text-sm text-muted-foreground">
-					Every platform-native API run in this workspace — from the playground, API keys, and
-					agents. Newest first.
-				</p>
-			</div>
+			<Alert>
+				<Info />
+				<AlertDescription>
+					View all API runs for this workspace, including runs from the playground, API keys, and agents.
+				</AlertDescription>
+			</Alert>
 
 			<div className="flex flex-wrap items-center gap-2">
 				<Select value={capability} onValueChange={setCapability}>