refactor(trace-details): use CopyButton in DataViewer and filter query popover

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/index.tsx

@@ -52,13 +52,8 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 	const { user } = useAppContext();
 	const { showErrorModal } = useErrorModal();
 	const { patchAsync } = useOptimisticPatch();
-	const {
-		isPickerOpen,
-		openPicker,
-		closePicker,
-		createPanel,
-		targetLayoutIndex,
-	} = useCreatePanel();
+	const { isPickerOpen, openPicker, closePicker, createPanel } =
+		useCreatePanel();
 
 	const isAuthor =
 		!!user?.email && !!dashboard.createdBy && dashboard.createdBy === user.email;
@@ -158,7 +153,6 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 				open={isPickerOpen}
 				onClose={closePicker}
 				onSelect={createPanel}
-				defaultLayoutIndex={targetLayoutIndex}
 			/>
 		</section>
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.module.scss

@@ -1,69 +1,22 @@
-.panelTypeSection {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-	align-items: center;
-}
-
 .grid {
-	align-self: stretch;
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
 	gap: 8px;
 }
 
-.panelTypeCard {
+.typeButton {
 	display: flex;
-	flex-direction: column;
 	align-items: center;
-	border: 1px solid var(--l2-border);
-	background: var(--l2-background);
+	gap: 8px;
 	padding: 12px;
-	gap: 12px;
-	cursor: pointer;
-	font: inherit;
+	background: var(--bg-ink-400, #0b0c0e);
+	border: 1px solid var(--l1-border);
 	border-radius: 4px;
 	color: var(--l1-foreground);
-	transition:
-		transform 180ms ease,
-		border-color 180ms ease;
+	cursor: pointer;
+	text-align: left;
 
 	&:hover {
-		background-color: var(--l2-background-hover);
-		border-color: var(--bg-robin-400);
-	}
-	&:active {
-		transform: translateY(2px);
+		border-color: var(--bg-robin-500);
 	}
 }
-
-.panelTypeCardSelected {
-	border-color: var(--bg-robin-400);
-	background-color: var(--l2-background-hover);
-	box-shadow: inset 0 0 0 1px var(--bg-robin-400);
-}
-
-.footerActions {
-	display: flex;
-	align-items: flex-end;
-	justify-content: flex-end;
-	gap: 8px;
-	width: 100%;
-}
-
-.footerPicker {
-	// Take all the width left over by the (natural-width) confirm button.
-	display: flex;
-	flex: 1;
-	flex-direction: column;
-	gap: 6px;
-	min-width: 0;
-}
-
-.pickerLabel {
-	color: var(--l3-foreground);
-	font-size: 11px;
-	font-weight: 500;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.tsx

@@ -1,135 +1,45 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Color } from '@signozhq/design-tokens';
+import { Modal } from 'antd';
 import { Button } from '@signozhq/ui/button';
-import { DialogWrapper } from '@signozhq/ui/dialog';
-import cx from 'classnames';
 
-import { useDashboardSections } from '../../../hooks/useDashboardSections';
 import type { PanelKind } from '../../../Panels/types/panelKind';
 import { PANEL_TYPES } from './constants';
-import SectionPicker from './SectionPicker';
-import { buildSectionOptions, resolveDefaultSectionValue } from './utils';
 import styles from './PanelTypeSelectionModal.module.scss';
-import { Plus } from '@signozhq/icons';
 
 interface PanelTypeSelectionModalProps {
 	open: boolean;
 	onClose: () => void;
-	onSelect: (panelKind: PanelKind, layoutIndex?: number) => void;
-	/** Section the picker opens on; omit → the untitled root / first section. */
-	defaultLayoutIndex?: number;
+	onSelect: (panelKind: PanelKind) => void;
 }
 
-/** Fake loader shown on the confirm button before navigating to the editor. */
-const CONFIRM_LOADER_MS = 500;
-
 function PanelTypeSelectionModal({
 	open,
 	onClose,
 	onSelect,
-	defaultLayoutIndex,
 }: PanelTypeSelectionModalProps): JSX.Element {
-	const sections = useDashboardSections();
-	const options = useMemo(() => buildSectionOptions(sections), [sections]);
-	const hasSectionPicker = options.length > 1;
-
-	const [selectedValue, setSelectedValue] = useState('');
-	const [selectedPanelKind, setSelectedPanelKind] = useState<PanelKind | null>(
-		null,
-	);
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-	const clearTimer = useCallback((): void => {
-		if (timerRef.current !== null) {
-			clearTimeout(timerRef.current);
-			timerRef.current = null;
-		}
-	}, []);
-
-	// Seed the target section on open; cancel a pending navigation on close.
-	useEffect(() => {
-		if (open) {
-			setSelectedValue(resolveDefaultSectionValue(options, defaultLayoutIndex));
-			setSelectedPanelKind(null);
-			setIsSubmitting(false);
-		} else {
-			clearTimer();
-		}
-	}, [open, options, defaultLayoutIndex, clearTimer]);
-
-	useEffect(() => clearTimer, [clearTimer]);
-
-	const handleConfirm = (): void => {
-		if (selectedPanelKind === null || isSubmitting) {
-			return;
-		}
-		setIsSubmitting(true);
-		const layoutIndex = selectedValue === '' ? undefined : Number(selectedValue);
-		timerRef.current = setTimeout(() => {
-			onSelect(selectedPanelKind, layoutIndex);
-		}, CONFIRM_LOADER_MS);
-	};
-
-	// Footer is always shown; the confirm button is disabled until a panel type is picked.
-	const footer = (
-		<div className={styles.footerActions}>
-			{hasSectionPicker && (
-				<div className={styles.footerPicker}>
-					<span className={styles.pickerLabel}>Add panel to</span>
-					<SectionPicker
-						options={options}
-						value={selectedValue}
-						onChange={setSelectedValue}
-					/>
-				</div>
-			)}
-			<Button
-				color="primary"
-				size="md"
-				disabled={selectedPanelKind === null}
-				loading={isSubmitting}
-				prefix={<Plus size={16} />}
-				onClick={handleConfirm}
-				testId="panel-type-confirm"
-			>
-				Add Panel
-			</Button>
-		</div>
-	);
-
 	return (
-		<DialogWrapper
+		<Modal
 			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					onClose();
-				}
-			}}
-			title="New Panel"
-			footer={footer}
+			title="Select a panel type"
+			onCancel={onClose}
+			footer={null}
+			destroyOnClose
 		>
-			<div className={styles.panelTypeSection}>
-				<span className={styles.pickerLabel}>Select panel type</span>
-				<div className={styles.grid}>
-					{PANEL_TYPES.map(({ panelKind, label, Icon }) => (
-						<button
-							key={panelKind}
-							type="button"
-							className={cx(styles.panelTypeCard, {
-								[styles.panelTypeCardSelected]: panelKind === selectedPanelKind,
-							})}
-							data-testid={`panel-type-${panelKind}`}
-							aria-pressed={panelKind === selectedPanelKind}
-							onClick={(): void => setSelectedPanelKind(panelKind)}
-						>
-							<Icon size={24} color={Color.BG_ROBIN_400} />
-							{label}
-						</button>
-					))}
-				</div>
+			<div className={styles.grid}>
+				{PANEL_TYPES.map(({ panelKind, label, Icon }) => (
+					<Button
+						key={panelKind}
+						type="button"
+						variant="ghost"
+						className={styles.typeButton}
+						data-testid={`panel-type-${panelKind}`}
+						onClick={(): void => onSelect(panelKind)}
+					>
+						<Icon size={14} />
+						{label}
+					</Button>
+				))}
 			</div>
-		</DialogWrapper>
+		</Modal>
 	);
 }
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/SectionPicker.module.scss

@@ -1,55 +0,0 @@
-.select {
-	width: 100%;
-}
-
-.dropdown {
-	min-width: 260px;
-}
-
-.rootIcon {
-	color: var(--bg-robin-400);
-	flex-shrink: 0;
-}
-
-.sectionIcon {
-	color: var(--l3-foreground);
-	flex-shrink: 0;
-}
-
-.triggerValue {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	overflow: hidden;
-}
-
-.triggerLabel {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.optionRow {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-	padding: 4px 0;
-}
-
-.optionText {
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-	overflow: hidden;
-}
-
-.optionLabel {
-	color: var(--l1-foreground);
-	line-height: 1.2;
-}
-
-.optionDescription {
-	color: var(--l3-foreground);
-	font-size: 12px;
-	line-height: 1.2;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/SectionPicker.tsx

@@ -1,65 +0,0 @@
-import { useMemo } from 'react';
-// eslint-disable-next-line signoz/no-antd-components
-import { Select } from 'antd';
-
-import type { SectionOption } from './types';
-import styles from './SectionPicker.module.scss';
-
-interface SectionPickerProps {
-	options: SectionOption[];
-	value: string;
-	onChange: (value: string) => void;
-}
-
-function SectionPicker({
-	options,
-	value,
-	onChange,
-}: SectionPickerProps): JSX.Element {
-	// `selectedLabel` (one line) shows in the trigger; `label` (two lines) in the list.
-	const selectOptions = useMemo(
-		() =>
-			options.map((option) => {
-				const iconClass = option.isRoot ? styles.rootIcon : styles.sectionIcon;
-				return {
-					value: option.value,
-					selectedLabel: (
-						<span className={styles.triggerValue}>
-							<option.Icon size={16} className={iconClass} />
-							<span className={styles.triggerLabel}>{option.label}</span>
-						</span>
-					),
-					label: (
-						<span
-							className={styles.optionRow}
-							data-testid={`panel-section-option-${option.layoutIndex}`}
-						>
-							<option.Icon size={16} className={iconClass} />
-							<span className={styles.optionText}>
-								<span className={styles.optionLabel}>{option.label}</span>
-								<span className={styles.optionDescription}>{option.description}</span>
-							</span>
-						</span>
-					),
-				};
-			}),
-		[options],
-	);
-
-	return (
-		<Select<string>
-			className={styles.select}
-			popupClassName={styles.dropdown}
-			value={value}
-			onChange={onChange}
-			data-testid="panel-section-select"
-			optionLabelProp="selectedLabel"
-			getPopupContainer={(trigger): HTMLElement =>
-				trigger.parentElement ?? document.body
-			}
-			options={selectOptions}
-		/>
-	);
-}
-
-export default SectionPicker;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/types.ts

@@ -14,16 +14,3 @@ export interface PanelType {
 	/** Icon component — the consumer renders it and controls size/color/etc. */
 	Icon: ComponentType<IconProps>;
 }
-
-export interface SectionOption {
-	/** The section's `layoutIndex`, stringified for the Select value. */
-	value: string;
-	layoutIndex: number;
-	/** Section title, or "Dashboard (root)" for the untitled top-level layout. */
-	label: string;
-	/** Caption under the label. */
-	description: string;
-	/** Untitled top-level layout (has no section header). */
-	isRoot: boolean;
-	Icon: ComponentType<IconProps>;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/utils.ts

@@ -1,41 +0,0 @@
-import { LayoutDashboard, Rows2 } from '@signozhq/icons';
-
-import type { DashboardSection } from '../../../utils';
-import type { SectionOption } from './types';
-
-const ROOT_LABEL = 'Dashboard (root)';
-const ROOT_DESCRIPTION = 'Top level — no section';
-const SECTION_DESCRIPTION = 'Section';
-
-/** Maps dashboard sections to section-picker options (untitled → "root"). */
-export function buildSectionOptions(
-	sections: DashboardSection[],
-): SectionOption[] {
-	return sections.map((section) => {
-		const isRoot = !section.title;
-		return {
-			value: String(section.layoutIndex),
-			layoutIndex: section.layoutIndex,
-			label: isRoot ? ROOT_LABEL : (section.title as string),
-			description: isRoot ? ROOT_DESCRIPTION : SECTION_DESCRIPTION,
-			isRoot,
-			Icon: isRoot ? LayoutDashboard : Rows2,
-		};
-	});
-}
-
-/**
- * Picks the option the picker should open on: the section the "Add panel" was
- * triggered from when present and still valid, otherwise the first option.
- */
-export function resolveDefaultSectionValue(
-	options: SectionOption[],
-	defaultLayoutIndex: number | undefined,
-): string {
-	const fallback = options[0]?.value ?? '';
-	if (defaultLayoutIndex === undefined) {
-		return fallback;
-	}
-	const target = String(defaultLayoutIndex);
-	return options.some((option) => option.value === target) ? target : fallback;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx

@@ -29,13 +29,8 @@ interface SectionProps {
 
 function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
-	const {
-		isPickerOpen,
-		openPicker,
-		closePicker,
-		createPanel,
-		targetLayoutIndex,
-	} = useCreatePanel();
+	const { isPickerOpen, openPicker, closePicker, createPanel } =
+		useCreatePanel();
 	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
 	const containerRef = useRef<HTMLDivElement>(null);
 	// Placeholder signal for lazy panel query-loading (consumed in a later PR):
@@ -146,7 +141,6 @@ function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 				open={isPickerOpen}
 				onClose={closePicker}
 				onSelect={createPanel}
-				defaultLayoutIndex={targetLayoutIndex}
 			/>
 			<ConfirmDeleteDialog
 				open={isDeleteOpen}

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/useCreatePanel.ts

@@ -12,10 +12,7 @@ interface UseCreatePanelResult {
 	/** Pass the target section's layout index; omit → last/new section. */
 	openPicker: (layoutIndex?: number) => void;
 	closePicker: () => void;
-	/** The section the picker was opened against — seeds its section dropdown. */
-	targetLayoutIndex: number | undefined;
-	/** `layoutIndex` overrides the opened-against target (the dropdown's choice). */
-	createPanel: (panelKind: PanelKind, layoutIndex?: number) => void;
+	createPanel: (panelKind: PanelKind) => void;
 }
 
 /**
@@ -41,23 +38,16 @@ export function useCreatePanel(): UseCreatePanelResult {
 	}, []);
 
 	const createPanel = useCallback(
-		(panelKind: PanelKind, targetIndex?: number): void => {
+		(panelKind: PanelKind): void => {
 			setIsPickerOpen(false);
 			const path = generatePath(ROUTES.DASHBOARD_PANEL_EDITOR, {
 				dashboardId,
 				panelId: NEW_PANEL_ID,
 			});
-			const target = targetIndex ?? layoutIndex;
-			safeNavigate(`${path}${newPanelSearch(panelKind, target)}`);
+			safeNavigate(`${path}${newPanelSearch(panelKind, layoutIndex)}`);
 		},
 		[safeNavigate, dashboardId, layoutIndex],
 	);
 
-	return {
-		isPickerOpen,
-		openPicker,
-		closePicker,
-		targetLayoutIndex: layoutIndex,
-		createPanel,
-	};
+	return { isPickerOpen, openPicker, closePicker, createPanel };
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/useDashboardSections.ts

@@ -1,21 +0,0 @@
-import { useMemo } from 'react';
-import { useGetDashboardV2 } from 'api/generated/services/dashboard';
-
-import { useDashboardStore } from '../store/useDashboardStore';
-import { type DashboardSection, layoutsToSections } from '../utils';
-
-/**
- * The current dashboard's sections, read from the already-loaded dashboard
- * query. The page fetches via useGetDashboardV2 keyed by id, so this reuses that
- * cache (no extra request) instead of prop-drilling the section list.
- */
-export function useDashboardSections(): DashboardSection[] {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const { data } = useGetDashboardV2({ id: dashboardId });
-	const spec = data?.data?.spec;
-
-	return useMemo(
-		() => layoutsToSections(spec?.layouts, spec?.panels),
-		[spec?.layouts, spec?.panels],
-	);
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.module.scss

@@ -60,6 +60,21 @@
 	}
 }
 
+// The Badge is already pill-rounded, so an 18x18 box renders a circle for a
+// single digit and a capsule for more.
+.eventsBadge {
+	// l3 background (!important beats the Badge's [data-color] rule).
+	--badge-background: var(--l3-background) !important;
+	--badge-padding: 0 5px;
+	// Static count, not interactive — cancel the Badge's hover background change.
+	--badge-hover-background: var(--badge-background) !important;
+
+	margin-left: 6px;
+	min-width: 18px;
+	height: 18px;
+	vertical-align: middle;
+}
+
 .tabsScroll {
 	flex: 1;
 	min-height: 0;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from 'react';
+import { Badge } from '@signozhq/ui/badge';
 import {
 	TabsContent,
 	TabsList,
@@ -281,6 +282,8 @@ function SpanDetailsContent({
 	// 		.map((key) => ({ key, value: allAttrs[key] }));
 	// }, [selectedSpan]);
 
+	const eventsCount = selectedSpan.events?.length || 0;
+
 	return (
 		<div className={styles.body}>
 			<div className={styles.detailsSection}>
@@ -397,7 +400,10 @@ function SpanDetailsContent({
 							<Bookmark size={14} /> Overview
 						</TabsTrigger>
 						<TabsTrigger value="events" variant="secondary">
-							<ScrollText size={14} /> Events ({selectedSpan.events?.length || 0})
+							<ScrollText size={14} /> Events
+							<Badge color="secondary" className={styles.eventsBadge}>
+								{eventsCount}
+							</Badge>
 						</TabsTrigger>
 						<TabsTrigger value="logs" variant="secondary">
 							<List size={14} /> Logs

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.module.scss

@@ -19,6 +19,7 @@
 
 .backBtn {
 	flex-shrink: 0;
+	border: 1px solid var(--l1-border);
 }
 
 .traceIdSection {
@@ -26,6 +27,11 @@
 	align-items: center;
 	gap: 8px;
 	flex-shrink: 0;
+
+	// Tabular figures so the trace ID's digits line up at a fixed width.
+	:global(.key-value-label__value) {
+		font-variant-numeric: tabular-nums;
+	}
 }
 
 .filterSection {

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -133,7 +133,7 @@ function TraceDetailsHeader({
 						<Button
 							variant="solid"
 							color="secondary"
-							size="md"
+							size="icon"
 							className={styles.backBtn}
 							onClick={handlePreviousBtnClick}
 							aria-label="Back"

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.tsx

@@ -1,10 +1,8 @@
 import { useCallback, useRef, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import { useCopyToClipboard } from 'react-use';
-import { ChevronsRight, Copy, Search, X } from '@signozhq/icons';
+import { ArrowRightFromLine, Search, X } from '@signozhq/icons';
 import { Switch } from '@signozhq/ui/switch';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { toast } from '@signozhq/ui/sonner';
 import { Button } from '@signozhq/ui/button';
 import {
 	TooltipRoot,
@@ -21,6 +19,7 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { uniqBy } from 'lodash-es';
 import NozButton from 'pages/TraceDetailsV3/TraceDetailsHeader/NozButton';
+import CopyButton from 'periscope/components/CopyButton/CopyButton';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import {
@@ -89,7 +88,6 @@ function Filters({
 	onExpand: () => void;
 	onCollapse: () => void;
 }): JSX.Element {
-	const [, setCopy] = useCopyToClipboard();
 	const [filters, setFilters] = useState<TagFilter>(
 		BASE_FILTER_QUERY.filters || { items: [], op: 'AND' },
 	);
@@ -301,20 +299,7 @@ function Filters({
 				<div className={styles.pillPopover}>
 					<div className={styles.pillPopoverHeader}>
 						<Typography.Text>Search query</Typography.Text>
-						<Button
-							variant="ghost"
-							size="icon"
-							color="secondary"
-							onClick={(): void => {
-								setCopy(expression);
-								toast.success('Copied to clipboard', {
-									richColors: false,
-									position: 'top-right',
-								});
-							}}
-						>
-							<Copy size={12} />
-						</Button>
+						<CopyButton value={expression} size={12} />
 					</div>
 					<div className={styles.pillPopoverExpression}>{expression}</div>
 				</div>
@@ -421,7 +406,7 @@ function Filters({
 										color="secondary"
 										onClick={onCollapse}
 									>
-										<ChevronsRight size={14} />
+										<ArrowRightFromLine size={14} />
 									</Button>
 								</TooltipTrigger>
 								<TooltipContent>Collapse filters</TooltipContent>

frontend/src/periscope/components/CopyButton/CopyButton.module.scss

@@ -0,0 +1,52 @@
+// Square copy button whose icon cross-fades between copy and check.
+.copyButton {
+	flex-shrink: 0;
+}
+
+// Both icons occupy the same box; only one is visible at a time.
+.iconStack {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.icon {
+	position: absolute;
+	inset: 0;
+	transition:
+		opacity 300ms ease,
+		filter 300ms ease,
+		transform 300ms ease;
+}
+
+// Idle state: copy visible, check blurred/rotated/faded out.
+.copyIcon {
+	opacity: 1;
+	filter: blur(0);
+	transform: rotate(0deg);
+}
+
+.checkIcon {
+	opacity: 0;
+	filter: blur(4px);
+	transform: rotate(-90deg);
+	// Green checkmark to signal a successful copy; eases in a touch slower.
+	color: var(--bg-forest-500);
+	transition-duration: 500ms;
+}
+
+// Copied state: copy fades/blurs/rotates out, check animates in.
+.iconStack[data-copied='true'] {
+	.copyIcon {
+		opacity: 0;
+		filter: blur(4px);
+		transform: rotate(90deg);
+	}
+
+	.checkIcon {
+		opacity: 1;
+		filter: blur(0);
+		transform: rotate(0deg);
+	}
+}

frontend/src/periscope/components/CopyButton/CopyButton.tsx

@@ -0,0 +1,71 @@
+import { CSSProperties, useCallback } from 'react';
+import { Check, Copy } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import cx from 'classnames';
+import { useCopyToClipboard } from 'hooks/useCopyToClipboard';
+
+import styles from './CopyButton.module.scss';
+
+export interface CopyButtonProps {
+	/** Text written to the clipboard on click. */
+	value: string;
+	/** Icon size in px. Default 14. */
+	size?: number;
+	/** Accessible label for the idle (not-yet-copied) state. Default "Copy". */
+	ariaLabel?: string;
+	/** Extra class merged onto the button. */
+	className?: string;
+	/** Fired after a successful copy (e.g. to show a toast). */
+	onCopy?: () => void;
+	testId?: string;
+}
+
+/**
+ * Square, icon-only copy button. Shows a copy icon that cross-fades to a
+ * checkmark (blur + rotate + fade) on copy, reverting after 2s. The checkmark
+ * uses the hover-state icon colour.
+ */
+function CopyButton({
+	value,
+	size = 14,
+	ariaLabel = 'Copy',
+	className,
+	onCopy,
+	testId,
+}: CopyButtonProps): JSX.Element {
+	const { copyToClipboard, isCopied } = useCopyToClipboard();
+
+	const handleClick = useCallback((): void => {
+		copyToClipboard(value);
+		onCopy?.();
+	}, [copyToClipboard, value, onCopy]);
+
+	const stackStyle: CSSProperties = { width: size, height: size };
+
+	return (
+		<Button
+			variant="ghost"
+			color="secondary"
+			size="icon"
+			className={cx(styles.copyButton, className)}
+			onClick={handleClick}
+			aria-label={isCopied ? 'Copied' : ariaLabel}
+			testId={testId}
+		>
+			<span className={styles.iconStack} style={stackStyle} data-copied={isCopied}>
+				<Copy size={size} className={cx(styles.icon, styles.copyIcon)} />
+				<Check size={size} className={cx(styles.icon, styles.checkIcon)} />
+			</span>
+		</Button>
+	);
+}
+
+CopyButton.defaultProps = {
+	size: 14,
+	ariaLabel: 'Copy',
+	className: undefined,
+	onCopy: undefined,
+	testId: undefined,
+};
+
+export default CopyButton;

frontend/src/periscope/components/DataViewer/DataViewer.styles.scss

@@ -22,23 +22,6 @@
 		--dropdown-menu-content-z-index: 1000;
 	}
 
-	&__copy-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 4px 8px;
-		border: 1px solid var(--l2-border);
-		border-radius: 4px;
-		background: transparent;
-		color: var(--l2-foreground);
-		cursor: pointer;
-
-		&:hover {
-			color: var(--l1-foreground);
-			background: var(--l3-background);
-		}
-	}
-
 	// Shared content container — no scroll, each view handles its own
 	&__content {
 		flex: 1;

frontend/src/periscope/components/DataViewer/DataViewer.tsx

@@ -1,13 +1,11 @@
 import { useMemo, useState } from 'react';
-import { useCopyToClipboard } from 'react-use';
-import { ChevronDown, Copy } from '@signozhq/icons';
+import { ChevronDown } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple as Dropdown } from '@signozhq/ui/dropdown-menu';
-import { toast } from '@signozhq/ui/sonner';
 import logEvent from 'api/common/logEvent';
+import CopyButton from 'periscope/components/CopyButton/CopyButton';
 import { JsonView } from 'periscope/components/JsonView';
-import { PrettyView } from 'periscope/components/PrettyView';
-import { PrettyViewProps } from 'periscope/components/PrettyView';
+import { PrettyView, PrettyViewProps } from 'periscope/components/PrettyView';
 
 import './DataViewer.styles.scss';
 
@@ -33,7 +31,6 @@ function DataViewer({
 	prettyViewProps,
 }: DataViewerProps): JSX.Element {
 	const [viewMode, setViewMode] = useState<ViewMode>('pretty');
-	const [, setCopy] = useCopyToClipboard();
 
 	const jsonString = useMemo(() => JSON.stringify(data, null, 2), [data]);
 
@@ -51,14 +48,6 @@ function DataViewer({
 		}
 	};
 
-	const handleCopy = (): void => {
-		const text = JSON.stringify(data, null, 2);
-		setCopy(text);
-		toast.success('Copied to clipboard', {
-			position: 'top-right',
-		});
-	};
-
 	const currentLabel =
 		VIEW_MODE_OPTIONS.find((opt) => opt.value === viewMode)?.label ?? 'Pretty';
 
@@ -94,14 +83,7 @@ function DataViewer({
 						{currentLabel}
 					</Button>
 				</Dropdown>
-				<button
-					type="button"
-					className="data-viewer__copy-btn"
-					onClick={handleCopy}
-					aria-label="Copy JSON"
-				>
-					<Copy size={14} />
-				</button>
+				<CopyButton value={jsonString} ariaLabel="Copy JSON" />
 			</div>
 
 			<div className="data-viewer__content">