test(stories): add K8s drawer depth and pods log details stories

frontend/src/components/QuickFilters/stories/QuickFilters.stories.mocks.tsx

@@ -98,6 +98,15 @@ export const noSavedFiltersHandler = rest.get(
 		),
 );
 
+export const noSavedTracesFiltersHandler = rest.get(
+	'http://localhost/api/v2/quick_filters/traces',
+	(_req, res, ctx) =>
+		res(
+			ctx.status(200),
+			ctx.json(quickFiltersResponse(QuickfiltertypesSourceDTO.traces, [])),
+		),
+);
+
 export const loadingFiltersHandlers = [
 	rest.get('http://localhost/api/v2/quick_filters/logs', (_req, res, ctx) =>
 		res(ctx.delay('infinite')),

frontend/src/components/QuickFilters/stories/QuickFilters.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import type { ComponentProps, ComponentType } from 'react';
 import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 import { withCanvas } from '@/storybook/decorators/withCanvas';
 import type { GlobalMockArgs } from '@/storybook/globals';
@@ -16,8 +17,9 @@ import {
 	queryBuilder,
 	selectedServiceQueryBuilder,
 	noSavedFiltersHandler,
+	noSavedTracesFiltersHandler,
 } from './QuickFilters.stories.mocks';
-import { QuickFiltersSource } from '../types';
+import { FiltersType, QuickFiltersSource } from '../types';
 
 const meta = {
 	title: 'Components/Quick Filters',
@@ -110,6 +112,29 @@ export const SelectedExpandedCheckbox: Story = {
 	},
 };
 
+/** The duration min/max row, which a checkbox-only config never reaches. */
+export const DurationFilter: Story = {
+	args: {
+		quickFilterSource: QuickFiltersSource.TRACES_EXPLORER,
+		config: [
+			...checkboxConfig,
+			{
+				attributeKey: {
+					dataType: DataTypes.Float64,
+					key: 'duration_nano',
+					type: '',
+				},
+				defaultOpen: true,
+				title: 'Duration',
+				type: FiltersType.DURATION,
+			},
+		],
+	},
+	parameters: {
+		msw: { handlers: [noSavedTracesFiltersHandler, ...handlers] },
+	},
+};
+
 /**
  * Every tooltip the panel renders, held open: the reveal on each truncated
  * filter value. Nothing bounds those values, so the panel is answered with

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetails.stories.tsx

@@ -16,13 +16,42 @@ import {
 } from './K8sBaseDetails.stories.mocks';
 import type { K8sBaseDetailsProps } from './types';
 import {
+	DrawerHistoryEntry,
 	getDrawerHistoryDepth,
-	pushDrawerHistory,
-	resetDrawerHistory,
+	useDrawerHistoryStore,
 } from './useDrawerHistoryStore';
 
 type DrawerArgs = PageStoryArgs<typeof drawerMocks> &
-	K8sBaseDetailsProps<unknown>;
+	K8sBaseDetailsProps<unknown> & { earlierSteps?: number };
+
+const TRAIL: DrawerHistoryEntry[] = [
+	{
+		category: InfraMonitoringEntity.CLUSTERS,
+		label: 'mgmt',
+		queryKeyPrefix: 'cluster',
+	},
+	{
+		category: InfraMonitoringEntity.NAMESPACES,
+		label: 'generator',
+		queryKeyPrefix: 'namespace',
+	},
+	{
+		category: InfraMonitoringEntity.DEPLOYMENTS,
+		label: 'app-demo-loadgenerator',
+		queryKeyPrefix: 'deployment',
+	},
+	{
+		category: InfraMonitoringEntity.NODES,
+		label: NODE_NAME,
+		queryKeyPrefix: 'node',
+	},
+].map(({ category, label, queryKeyPrefix }) => ({
+	params: { selectedItem: label, category },
+	category,
+	label,
+	entity: { name: label },
+	queryKeyPrefix,
+}));
 
 const route = `/infrastructure-monitoring/kubernetes?${INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY}=pods&${INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM}=${POD_UID}`;
 
@@ -33,19 +62,13 @@ const meta = {
 	decorators: [
 		(Story, context): JSX.Element => {
 			// The back control appears only for a resource opened from another
-			const depth = getDrawerHistoryDepth();
-			if (context.args.openedFromANode && depth === 0) {
-				pushDrawerHistory({
-					params: { selectedItem: NODE_NAME, category: InfraMonitoringEntity.NODES },
-					category: InfraMonitoringEntity.NODES,
-					label: NODE_NAME,
-					entity: { nodeName: NODE_NAME },
-					queryKeyPrefix: 'node',
+			const steps =
+				context.args.earlierSteps ?? (context.args.openedFromANode ? 1 : 0);
+			if (getDrawerHistoryDepth() !== steps) {
+				useDrawerHistoryStore.setState({
+					entries: TRAIL.slice(TRAIL.length - steps),
 				});
 			}
-			if (!context.args.openedFromANode && depth > 0) {
-				resetDrawerHistory();
-			}
 
 			return <Story />;
 		},
@@ -60,3 +83,19 @@ type Story = StoryObj<DrawerArgs>;
 export const Default: Story = {
 	args: { ...podEntityConfig.details } as Partial<DrawerArgs> as DrawerArgs,
 };
+
+/** A pod drilled through a cluster, namespace, deployment and node, so the back control names the node. */
+export const DeepTrail: Story = {
+	args: {
+		...podEntityConfig.details,
+		earlierSteps: 4,
+	} as Partial<DrawerArgs> as DrawerArgs,
+};
+
+/** A pod opened from the list, so the header shows the close control in place of back. */
+export const OpenedFromTheList: Story = {
+	args: {
+		...podEntityConfig.details,
+		openedFromANode: false,
+	} as Partial<DrawerArgs> as DrawerArgs,
+};

frontend/src/pages/AIAssistantPage/stories/AIAssistantPage.stories.tsx

@@ -139,6 +139,35 @@ export const AwaitingClarification: Story = {
 	args: { agent: 'awaiting-clarification', contents: BRIEF },
 };
 
+/** The severity select open, including the free-text option the form's Select renders. */
+export const ClarificationSelectOpen: Story = {
+	args: { agent: 'awaiting-clarification', contents: BRIEF },
+	play: async ({ canvasElement }): Promise<void> => {
+		const canvas = within(canvasElement);
+
+		// Open from the keyboard, and retry: the message list remounts its items
+		// while it measures the thread, which can close the popup again. The
+		// "Other" checkbox in the Notify field carries the same text, so assert
+		// on the popup's option role.
+		await waitFor(async () => {
+			const severityLabel = canvas.getByText('Severity');
+			const field = severityLabel.closest('div');
+
+			if (!field) {
+				throw new Error('Severity field is not in the clarification form');
+			}
+
+			within(field).getByRole('combobox').focus();
+			await userEvent.keyboard('{Enter}');
+			await screen.findByRole(
+				'option',
+				{ name: 'Other (type your own)' },
+				{ timeout: 1_000 },
+			);
+		}, untilLoaded);
+	},
+};
+
 /** Reopening the page on a thread that has not come back yet. */
 export const LoadingThread: Story = {
 	args: { dataState: 'loading' },
@@ -231,6 +260,23 @@ export const NegativeFeedback: Story = {
 	},
 };
 
+/** Renaming a thread: the title input the row swaps in. */
+export const ConversationRename: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		await clickUntil(async () => {
+			const [actions] = await within(canvasElement).findAllByLabelText(
+				/conversation actions/i,
+				undefined,
+				untilLoaded,
+			);
+
+			return actions;
+		}, /^Rename$/);
+		await userEvent.click(screen.getByText('Rename'));
+		await within(canvasElement).findByDisplayValue(/checkout p99 regression/i);
+	},
+};
+
 /** What a conversation row offers: rename, a link to it, and archiving. */
 export const ConversationActions: Story = {
 	play: async ({ canvasElement }): Promise<void> => {

frontend/src/pages/DashboardPage/PanelEditorPage/stories/PanelEditorPage.stories.tsx

@@ -63,6 +63,20 @@ const expandConfigSections: Story['play'] = async ({ canvasElement }) => {
  */
 export const Default: Story = {};
 
+/** The ClickHouse query tab, including its info callout. */
+export const ClickHouseQuery: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			await within(canvasElement).findByText('ClickHouse Query', undefined, {
+				timeout: 15000,
+			}),
+		);
+		await screen.findByText(/ClickHouse query agent skill/i, undefined, {
+			timeout: 15000,
+		});
+	},
+};
+
 /** The create route, seeding an unsaved panel of the chosen kind. */
 export const NewPanel: Story = {
 	args: { panel: 'new' },
@@ -83,6 +97,21 @@ export const PieChartPanel: Story = {
 	args: { panel: 'traffic-share' },
 };
 
+/** A new area chart: the time series options with the area filled. */
+export const AreaChartPanel: Story = {
+	args: { panel: 'new', newPanelKind: 'area-chart' },
+};
+
+/** A new histogram, where the display options are its buckets. */
+export const HistogramPanel: Story = {
+	args: { panel: 'new', newPanelKind: 'histogram' },
+};
+
+/** A new text panel: a markdown body in place of the query builder. */
+export const TextPanel: Story = {
+	args: { panel: 'new', newPanelKind: 'text' },
+};
+
 /** A list panel, where the config pane is the column editor. */
 export const ListPanel: Story = {
 	args: { panel: 'recent-logs' },

frontend/src/pages/DashboardPage/PanelEditorPage/stories/sections/ChartOptions.stories.tsx

@@ -105,6 +105,19 @@ export const ChartAppearance: Story = {
 	},
 };
 
+/** Disconnect-values in threshold mode, with an invalid duration showing the inline error. */
+export const ChartAppearanceDisconnectThreshold: Story = {
+	play: async (context) => {
+		await ChartAppearance.play?.(context);
+		await pickSegment('panel-editor-v2-span-gaps', 'threshold');
+		const input = await screen.findByTestId('panel-editor-v2-span-gaps-value');
+
+		await userEvent.clear(input);
+		await userEvent.type(input, '5x');
+		await screen.findByText(/enter a valid duration/i);
+	},
+};
+
 /** Dashed lines under a gradient fill, with the points drawn. */
 export const ChartAppearanceDashedGradient: Story = {
 	play: async (context) => {

frontend/src/pages/DashboardPage/stories/DashboardPage.stories.tsx

@@ -191,6 +191,22 @@ export const TooltipsInViewPanelModal: Story = {
 	},
 };
 
+/** A list or table panel's search field, expanded and filled. */
+export const PanelSearchExpanded: Story = {
+	play: async ({ canvasElement }) => {
+		// Both the table and the log list render a search trigger; expand the first.
+		const [trigger] = await within(canvasElement).findAllByTestId(
+			'panel-header-search-trigger',
+			{},
+			{ timeout: 15000 },
+		);
+		await userEvent.click(trigger);
+		const input = await screen.findByTestId('panel-header-search-input');
+
+		await userEvent.type(input, 'error');
+	},
+};
+
 /**
  * The dashboard's own Actions menu, open: rename, clone, lock, full screen and
  * delete, the menu the toolbar's Actions button carries.
@@ -243,6 +259,34 @@ export const SectionActionsMenu: Story = {
 	},
 };
 
+/** Delete dashboard, the confirm dialog the Actions menu opens. */
+export const DeleteDashboardDialog: Story = {
+	play: async (context) => {
+		await ActionsMenu.play?.(context);
+		// The row stays inert until its authz checks resolve, so one click can
+		// land too early; keep clicking until the confirm dialog is up.
+		await waitFor(
+			async () => {
+				const item = screen.queryByTestId('dashboard-action-delete');
+				if (item) {
+					await userEvent.click(item);
+				}
+				screen.getByText('This action cannot be undone.');
+			},
+			{ timeout: 10000 },
+		);
+	},
+};
+
+/** Rename section, the title dialog a section menu opens. */
+export const RenameSectionDialog: Story = {
+	play: async (context) => {
+		await SectionActionsMenu.play?.(context);
+		await userEvent.click(await screen.findByText('Rename section'));
+		await screen.findByRole('dialog', { name: /rename section/i });
+	},
+};
+
 const openNewPanelPicker = async (
 	canvasElement: HTMLElement,
 ): Promise<void> => {

frontend/src/pages/HomePage/stories/HomePage.stories.tsx

@@ -97,3 +97,20 @@ export const NavSettingsMenu: Story = {
 		await screen.findByRole('menu');
 	},
 };
+
+/** Impersonation mode: the warning banner above the page content. */
+export const NoAuthBanner: Story = {
+	args: { banner: 'no-auth' },
+	play: async (): Promise<void> => {
+		await screen.findByTestId('no-auth-banner', undefined, { timeout: 10000 });
+	},
+};
+
+/** The command palette, opened with the same shortcut the shell listens for. */
+export const CommandPalette: Story = {
+	play: async (): Promise<void> => {
+		await userEvent.keyboard('{Meta>}k{/Meta}');
+		await screen.findByPlaceholderText('Search…', undefined, { timeout: 10000 });
+		await screen.findByText('Go to Home');
+	},
+};

frontend/src/pages/InfrastructureMonitoring/stories/Pods.stories.tsx

@@ -69,6 +69,28 @@ export const DetailsDrawerLogsTab: StoryObj<PodsArgs> = {
 	},
 };
 
+/** A log opened from the pod's logs tab, over the details drawer. */
+export const DetailsDrawerLogDetails: StoryObj<PodsArgs> = {
+	args: { drawer: true },
+	play: async () => {
+		const drawer = within(
+			await screen.findByRole('dialog', {}, { timeout: 10000 }),
+		);
+
+		await userEvent.click(
+			await drawer.findByText('Logs', {}, { timeout: 10000 }),
+		);
+		const [line] = await drawer.findAllByText(
+			/handled request in/,
+			{},
+			{ timeout: 10000 },
+		);
+
+		await userEvent.click(line);
+		await screen.findByTestId('log-detail-drawer', {}, { timeout: 10000 });
+	},
+};
+
 /** The copy button beside the pod name in the drawer, which toasts the copy. */
 export const PodNameCopiedToast: StoryObj<PodsArgs> = {
 	args: { drawer: true },

frontend/src/pages/IntegrationsDetailsPage/CloudIntegration/stories/CloudIntegration.stories.tsx

@@ -117,6 +117,43 @@ export const ConnectAccount: Story = {
 	},
 };
 
+/** Azure's connect dialog, which the AWS regions form does not open. */
+export const AzureConnectAccount: Story = {
+	args: { provider: 'azure', accounts: 0 },
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			await within(canvasElement).findByText(
+				/integrate now/i,
+				undefined,
+				untilLoaded,
+			),
+		);
+		await screen.findByRole('dialog', undefined, untilLoaded);
+	},
+};
+
+/** The GCP region combobox, opened from the connect drawer. */
+export const GcpRegionDropdown: Story = {
+	args: { provider: 'gcp', accounts: 0 },
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			await within(canvasElement).findByText(
+				/integrate now/i,
+				undefined,
+				untilLoaded,
+			),
+		);
+		await userEvent.click(
+			await screen.findByTestId(
+				'gcp-deployment-region-select',
+				undefined,
+				untilLoaded,
+			),
+		);
+		await screen.findByRole('listbox');
+	},
+};
+
 /** The regions an already-connected account collects from. */
 export const EditAccount: Story = {
 	play: async ({ canvasElement }): Promise<void> => {

frontend/src/pages/LLMObservability/AttributeMapping/stories/AttributeMapping.stories.mocks.tsx

@@ -14,6 +14,7 @@ import {
 	type GroupSave,
 	MAPPING_GROUP_MAX,
 	spanMapperGroupsResponse,
+	spanMappersResponse,
 	wideConditionGroupsResponse,
 } from './__story_mockdata__/attributeMapping';
 
@@ -28,6 +29,15 @@ export const wideConditionGroup = rest.get(
 		res(ctx.status(200), ctx.json(wideConditionGroupsResponse())),
 );
 
+export const groupMappers = rest.get(
+	'http://localhost/api/v1/span_mapper_groups/:groupId/span_mappers',
+	(req, res, ctx) =>
+		res(
+			ctx.status(200),
+			ctx.json(spanMappersResponse(String(req.params.groupId))),
+		),
+);
+
 export const attributeMappingMocks = defineStoryMocks({
 	controls: {
 		groups: countControl('Mapping groups', {

frontend/src/pages/LLMObservability/AttributeMapping/stories/AttributeMapping.stories.tsx

@@ -7,6 +7,7 @@ import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
 import LLMObservabilityPage from '../../index';
 import {
 	attributeMappingMocks,
+	groupMappers,
 	wideConditionGroup,
 } from './AttributeMapping.stories.mocks';
 
@@ -79,6 +80,29 @@ export const GroupFormDrawer: Story = {
 	},
 };
 
+/** The drawer that adds a mapping to the first group. */
+export const AddMappingDrawer: Story = {
+	parameters: { msw: { handlers: [groupMappers] } },
+	play: async ({ canvasElement }): Promise<void> => {
+		const canvas = within(canvasElement);
+		const [firstGroup] = await canvas.findAllByTestId(
+			/^group-expand-/,
+			{},
+			{ timeout: 15000 },
+		);
+
+		await userEvent.click(firstGroup);
+		await userEvent.click(
+			await canvas.findByRole(
+				'button',
+				{ name: /add mapping/i },
+				{ timeout: 15000 },
+			),
+		);
+		await screen.findByText('New custom mapping');
+	},
+};
+
 /**
  * A group toggled off and saved: the toast announcing the saved changes, raised
  * once the PATCH and the list refetch answer. Set Save changes to `error`,

frontend/src/pages/LLMObservability/AttributeMapping/stories/__story_mockdata__/attributeMapping.ts

@@ -5,10 +5,15 @@
 
 import type {
 	ListSpanMapperGroups200,
+	ListSpanMappers200,
 	SpantypesSpanMapperGroupConditionKeyDTO,
 	SpantypesSpanMapperGroupDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { SpantypesSpanMapperOriginDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	SpantypesFieldContextDTO,
+	SpantypesSpanMapperOperationDTO,
+	SpantypesSpanMapperOriginDTO,
+} from 'api/generated/services/sigNoz.schemas';
 
 const ORG_ID = 'org-signoz';
 
@@ -72,6 +77,38 @@ export const spanMapperGroupsResponse = (
 	data: { items: GROUPS.slice(0, count).map(group) },
 });
 
+/** The mappings an expanded group lists, which the groups response does not carry. */
+export const spanMappersResponse = (groupId: string): ListSpanMappers200 => ({
+	status: 'success',
+	data: {
+		items: [
+			{
+				id: `${groupId}-mapper-1`,
+				groupId,
+				name: 'gen_ai.request.model',
+				enabled: true,
+				origin: SpantypesSpanMapperOriginDTO.user,
+				fieldContext: SpantypesFieldContextDTO.attribute,
+				config: {
+					sources: [
+						{
+							key: 'langchain.model',
+							context: SpantypesFieldContextDTO.attribute,
+							operation: SpantypesSpanMapperOperationDTO.copy,
+							priority: 0,
+							enabled: true,
+						},
+					],
+				},
+				createdAt: '2026-07-18T11:20:00Z',
+				createdBy: 'anna@signoz.io',
+				updatedAt: '2026-08-05T08:40:00Z',
+				updatedBy: 'anna@signoz.io',
+			},
+		],
+	},
+});
+
 const MANY_ATTRIBUTES = [
 	'langchain.model',
 	'langchain.prompt_tokens',

frontend/src/pages/LLMObservability/ModelPricing/stories/ModelPricing.stories.tsx

@@ -39,6 +39,34 @@ export const NothingPriced: Story = {
 	args: { rules: 0 },
 };
 
+/** Models seen in spans that no rule prices yet. */
+export const UnpricedModels: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			await within(canvasElement).findByRole(
+				'tab',
+				{ name: /unpriced models/i },
+				{ timeout: 15000 },
+			),
+		);
+		await screen.findByRole('tab', { name: /unpriced models/i, selected: true });
+	},
+};
+
+/** Creating a rule: the blank drawer, with the provider select enabled. */
+export const ModelCostDrawerCreate: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			await within(canvasElement).findByRole(
+				'button',
+				{ name: /add model cost/i },
+				{ timeout: 15000 },
+			),
+		);
+		await screen.findByTestId('drawer-provider-select');
+	},
+};
+
 /**
  * The first pricing rule's menu, open over the table: edit the rule or drop it.
  */

frontend/src/pages/LogsModulePage/Pipelines/stories/Pipelines.stories.tsx

@@ -116,6 +116,16 @@ export const AddProcessor: Story = {
 	},
 };
 
+/** Severity Parser is the type whose mapping fields are CSV inputs. */
+export const AddSeverityParserProcessor: Story = {
+	play: async (context): Promise<void> => {
+		await AddProcessor.play?.(context);
+		await userEvent.click(await screen.findByText('Grok'));
+		await userEvent.click(await screen.findByTitle('Severity Parser'));
+		await screen.findByText('Parse Severity Value From');
+	},
+};
+
 /**
  * The logs a pipeline matches, over the interval the preview asks for, with the
  * simulation of its processors one click away.

frontend/src/pages/LogsModulePage/stories/LogsModulePage.stories.tsx

@@ -106,6 +106,21 @@ export const RawFormat: Story = {
 	args: { format: 'raw' },
 };
 
+/** The format popover: the format list, the max-lines stepper, and the font-size control. */
+export const FormatMenuOpen: Story = {
+	args: { format: 'raw' },
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			await within(canvasElement).findByTestId(
+				'periscope-btn-format-options',
+				undefined,
+				untilLoaded,
+			),
+		);
+		await screen.findByTestId('max-lines-per-row', undefined, untilLoaded);
+	},
+};
+
 /** An explorer with no configured quick filters. */
 export const NoQuickFilters: Story = {
 	args: { quickFilters: 0 },

frontend/src/pages/MessagingQueues/MQDetailPage/stories/MQDetailPage.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { MessagingQueuesViewTypeOptions } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { expect, userEvent, waitFor, within } from 'storybook/test';
+import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
@@ -98,6 +98,21 @@ export const DropRate: Story = {
 	args: { view: MessagingQueuesViewTypeOptions.DropRate },
 };
 
+/** The custom-interval input inside the evaluation-time dropdown. */
+export const DropRateIntervalOpen: Story = {
+	args: { view: MessagingQueuesViewTypeOptions.DropRate },
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			await within(canvasElement).findByText('10ms', undefined, untilLoaded),
+		);
+		await screen.findByPlaceholderText(
+			'Enter custom time (ms)',
+			undefined,
+			untilLoaded,
+		);
+	},
+};
+
 /** The broker, producer, consumer and JVM metrics kafka itself reports. */
 export const MetricView: Story = {
 	args: { view: MessagingQueuesViewTypeOptions.MetricPage },

frontend/src/pages/MetricsApplication/stories/MetricsApplication.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import ROUTES from 'constants/routes';
 import { renderAtRoute } from '@/storybook/renderAtRoute';
-import { screen, userEvent, within } from 'storybook/test';
+import { screen, userEvent, waitFor, within } from 'storybook/test';
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
@@ -76,3 +76,26 @@ export const DownloadMenu: Story = {
 		await screen.findByRole('menu');
 	},
 };
+
+/** The apdex threshold popover, opened from the overview's settings control. */
+export const ApDexSettingsOpen: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		const trigger = await waitFor(
+			() => {
+				const found = canvasElement.querySelector<HTMLElement>(
+					'.ap-dex-settings-popover-content button',
+				);
+
+				if (!found) {
+					throw new Error('Apdex settings control is not rendered');
+				}
+
+				return found;
+			},
+			{ timeout: 15000 },
+		);
+
+		await userEvent.click(trigger);
+		await screen.findByText(/apdex threshold/i);
+	},
+};

frontend/src/pages/ResetPassword/stories/ResetPassword.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { screen, userEvent } from 'storybook/test';
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
@@ -35,3 +36,20 @@ export const ExpiredLink: Story = {
 	// The deliberate 410 is the state under test.
 	parameters: { allowConsoleErrors: true },
 };
+
+/** The mismatch callout, after the two password fields disagree and blur. */
+export const PasswordMismatch: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		const password = await screen.findByTestId('password', undefined, {
+			timeout: 15000,
+		});
+		const confirm = await screen.findByPlaceholderText(
+			/confirm your new password/i,
+		);
+
+		await userEvent.type(password, 'password123');
+		await userEvent.type(confirm, 'password456');
+		await userEvent.click(canvasElement);
+		await screen.findByText(/passwords don't match/i);
+	},
+};

frontend/src/pages/TraceDetailsV3/stories/TraceDetailsV3.stories.mocks.tsx

@@ -32,6 +32,7 @@ import {
 	timeSeriesPoints,
 } from '@/storybook/msw/__story_mockdata__/queryRange';
 
+import { traceFunnelsResponse } from '../../TracesModulePage/stories/__story_mockdata__/traces';
 import { SpanDetailVariant } from '../SpanDetailsPanel/constants';
 import {
 	focusSpanIndex,
@@ -221,6 +222,11 @@ export const traceDetailsMocks = defineStoryMocks({
 				}),
 			),
 
+			rest.get(
+				'http://localhost/api/v1/trace-funnels/list',
+				response.json(() => traceFunnelsResponse(3)),
+			),
+
 			rest.post(
 				'http://localhost/api/v1/span_percentile',
 				response.json(spanPercentilesResponse),

frontend/src/pages/TraceDetailsV3/stories/TraceDetailsV3.stories.tsx

@@ -248,6 +248,72 @@ export const SpanPercentileOpen: Story = {
 	},
 };
 
+/** Spans the backend never received, shown as the missing-spans callout. */
+export const MissingSpans: Story = {
+	args: { missingSpans: true },
+	play: async (): Promise<void> => {
+		await screen.findByText(
+			/this trace has missing spans/i,
+			undefined,
+			untilLoaded,
+		);
+	},
+};
+
+/** The analytics panel the header toggle opens. */
+export const AnalyticsOpen: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			await within(canvasElement).findByRole(
+				'button',
+				{ name: 'Analytics' },
+				untilLoaded,
+			),
+		);
+		await screen.findByTestId('trace-analytics-panel', undefined, untilLoaded);
+	},
+};
+
+/** The download progress panel, held open by an export that never answers. */
+export const TraceDownload: Story = {
+	args: { exportState: 'loading' },
+	play: async ({ canvasElement }): Promise<void> => {
+		await startDownload(canvasElement);
+		await screen.findByTestId('trace-download-panel', undefined, untilLoaded);
+	},
+};
+
+const openAddSpanToFunnel = async (
+	canvasElement: HTMLElement,
+): Promise<void> => {
+	const [button] = await within(canvasElement).findAllByTestId(
+		'span-add-to-funnel-btn',
+		undefined,
+		untilLoaded,
+	);
+
+	await fireEvent.click(button);
+	await screen.findByText('Add span to funnel', undefined, untilLoaded);
+};
+
+/** The funnel picker a span row's add-to-funnel action opens. */
+export const AddSpanToFunnel: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		await openAddSpanToFunnel(canvasElement);
+	},
+};
+
+/** The name field behind "Create new funnel" in that picker. */
+export const AddSpanToFunnelCreateStep: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		await openAddSpanToFunnel(canvasElement);
+		await userEvent.click(
+			await screen.findByRole('button', { name: /create new funnel/i }),
+		);
+		await screen.findByTestId('create-funnel-name-input');
+	},
+};
+
 /** The span has no logs of its own but its trace does, so the Logs tab points to the trace's. */
 export const SpanPanelTraceOnlyLogs: Story = {
 	args: { traceOnlyLogs: true },

frontend/src/pages/TracesModulePage/stories/TracesModulePage.stories.tsx

@@ -123,6 +123,43 @@ export const Funnels: Story = {
 	args: { tab: 'funnels' },
 };
 
+/** The name field for a funnel that does not exist yet. */
+export const CreateFunnel: Story = {
+	args: { tab: 'funnels' },
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			await within(canvasElement).findByRole(
+				'button',
+				{ name: /new funnel/i },
+				untilLoaded,
+			),
+		);
+		await screen.findByRole('dialog', { name: /create new funnel/i });
+	},
+};
+
+/** The rename field for a funnel already on the list. */
+export const RenameFunnel: Story = {
+	args: { tab: 'funnels' },
+	play: async ({ canvasElement }): Promise<void> => {
+		const action = await waitFor(() => {
+			const found = canvasElement.querySelector<HTMLElement>(
+				'.funnel-item__action-icon',
+			);
+
+			if (!found) {
+				throw new Error('Funnel row actions are not rendered');
+			}
+
+			return found;
+		}, untilLoaded);
+
+		await userEvent.click(action);
+		await userEvent.click(await screen.findByRole('button', { name: 'Rename' }));
+		await screen.findByRole('dialog', { name: /rename funnel/i });
+	},
+};
+
 /**
  * A fresh workspace: nothing ingested in the window and no quick filters
  * configured yet, so the table and the filter panel both show their empty

frontend/src/storybook/foundations/Feedback.stories.tsx

@@ -64,6 +64,70 @@ export const LongMultilineToast: Story = {
 	},
 };
 
+/** A request still in flight: the loading toast stays until the promise settles. */
+export const PromiseLoadingToast: Story = {
+	args: { state: 'promise-loading-toast' },
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			within(canvasElement).getByTestId('show-feedback-toast'),
+		);
+		await expect(
+			await screen.findByText('Enabling the alert rule'),
+		).toBeVisible();
+	},
+};
+
+/** A failed request: the rejected toast keeps a Dismiss action, stacked top-center. */
+export const PromiseErrorToast: Story = {
+	args: { state: 'promise-error-toast' },
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			within(canvasElement).getByTestId('show-feedback-toast'),
+		);
+		await expect(
+			await screen.findByText('Could not clone the panel'),
+		).toBeVisible();
+		await screen.findByRole('button', { name: 'Dismiss' });
+	},
+};
+
+/** A warning that stays up, matching invites that only partly succeed. */
+export const WarningToast: Story = {
+	args: { state: 'warning-toast' },
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			within(canvasElement).getByTestId('show-feedback-toast'),
+		);
+		await expect(await screen.findByText('Some invites failed')).toBeVisible();
+	},
+};
+
+/** An info toast pinned to the bottom-right stack, as export cancellation does. */
+export const InfoToast: Story = {
+	args: { state: 'info-toast' },
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			within(canvasElement).getByTestId('show-feedback-toast'),
+		);
+		await expect(await screen.findByText('Export cancelled')).toBeVisible();
+	},
+};
+
+/** An error toast with a description and a Dismiss action, bottom-right. */
+export const DangerWithDescription: Story = {
+	args: { state: 'danger-description-toast' },
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			within(canvasElement).getByTestId('show-feedback-toast'),
+		);
+		await expect(
+			await screen.findByText('Failed to update account settings'),
+		).toBeVisible();
+		await screen.findByText(/does not have permission/i);
+		await screen.findByRole('button', { name: 'Dismiss' });
+	},
+};
+
 /** Mutation: the inline application alert preserves its action affordance. */
 export const InlineAlert: Story = {
 	args: { state: 'inline-alert' },

frontend/src/storybook/foundations/FeedbackFixture.tsx

@@ -10,6 +10,11 @@ export type FeedbackState =
 	| 'success-toast'
 	| 'actionable-error-toast'
 	| 'long-toast'
+	| 'promise-loading-toast'
+	| 'promise-error-toast'
+	| 'warning-toast'
+	| 'info-toast'
+	| 'danger-description-toast'
 	| 'inline-alert'
 	| 'confirmation'
 	| 'toast-over-confirmation';
@@ -21,6 +26,10 @@ interface FeedbackFixtureProps {
 const longMessage =
 	'We could not apply the retention policy because the selected storage tier is unavailable. Review the workspace settings, then try again.';
 
+const pendingSave = new Promise<void>(() => undefined);
+
+const dismissAction = { label: 'Dismiss', onClick: (): void => undefined };
+
 function FeedbackFixture({ state }: FeedbackFixtureProps): JSX.Element {
 	const [isConfirmationOpen, setIsConfirmationOpen] = useState(false);
 
@@ -37,13 +46,62 @@ function FeedbackFixture({ state }: FeedbackFixtureProps): JSX.Element {
 			return;
 		}
 
+		if (state === 'promise-loading-toast') {
+			toast.promise(pendingSave, {
+				loading: 'Enabling the alert rule',
+				success: 'Alert rule enabled',
+				error: 'Could not enable the alert rule',
+			});
+			return;
+		}
+
+		if (state === 'promise-error-toast') {
+			toast.promise(Promise.reject(new Error('failed')), {
+				loading: 'Cloning the panel',
+				success: 'Panel cloned',
+				error: { message: 'Could not clone the panel', action: dismissAction },
+				position: 'top-center',
+				duration: Infinity,
+			});
+			return;
+		}
+
+		if (state === 'warning-toast') {
+			toast.warning('Some invites failed', { duration: Infinity });
+			return;
+		}
+
+		if (state === 'info-toast') {
+			toast.info('Export cancelled', {
+				position: 'bottom-right',
+				duration: Infinity,
+			});
+			return;
+		}
+
+		if (state === 'danger-description-toast') {
+			toast.error('Failed to update account settings', {
+				description:
+					'The service account does not have permission to change this connection.',
+				action: dismissAction,
+				position: 'bottom-right',
+				duration: Infinity,
+			});
+			return;
+		}
+
 		toast.error(longMessage, { duration: Infinity });
 	};
 
 	const isToastStory =
 		state === 'success-toast' ||
 		state === 'actionable-error-toast' ||
-		state === 'long-toast';
+		state === 'long-toast' ||
+		state === 'promise-loading-toast' ||
+		state === 'promise-error-toast' ||
+		state === 'warning-toast' ||
+		state === 'info-toast' ||
+		state === 'danger-description-toast';
 	const confirmationTitle = 'Delete environment';
 
 	return (