@shipfox/client-triggers 17.0.0 → 21.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-triggers",
   "license": "MIT",
-  "version": "17.0.0",
+  "version": "21.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -28,11 +28,11 @@
     "@swc/helpers": "^0.5.17",
     "@shipfox/api-triggers-dto": "9.0.2",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-projects": "17.0.0",
-    "@shipfox/client-shell": "17.0.0",
-    "@shipfox/client-ui": "17.0.0",
-    "@shipfox/integration-icons": "0.3.3",
-    "@shipfox/react-ui": "1.2.0"
+    "@shipfox/client-projects": "21.0.0",
+    "@shipfox/client-shell": "21.0.0",
+    "@shipfox/client-ui": "21.0.0",
+    "@shipfox/integration-icons": "0.3.4",
+    "@shipfox/react-ui": "2.0.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/events-filter-bar.tsx

@@ -2,6 +2,7 @@ import {Button} from '@shipfox/react-ui/button';
 import {Collapsible, CollapsibleContent, CollapsibleTrigger} from '@shipfox/react-ui/collapsible';
 import {Combobox, type ComboboxOption} from '@shipfox/react-ui/combobox';
 import {type DateRange, DateRangePicker} from '@shipfox/react-ui/date-range-picker';
+import {PanelHeader} from '@shipfox/react-ui/panel';
 import {Text} from '@shipfox/react-ui/typography';
 import {cn} from '@shipfox/react-ui/utils';
 import {type ReactNode, useState} from 'react';
@@ -95,84 +96,86 @@ export function EventsFilterBar({
   }
 
   return (
-    <Collapsible open={open} onOpenChange={setOpen}>
-      <div className="flex items-center justify-between gap-inline border-b border-border-neutral-base px-row py-row">
-        <CollapsibleTrigger asChild>
-          <Button
-            type="button"
-            variant="secondary"
-            size="sm"
-            iconLeft="filter3Line"
-            iconRight={open ? 'arrowUpSLine' : 'arrowDownSLine'}
-          >
-            {activeCount > 0 ? `Filters (${activeCount})` : 'Filters'}
-          </Button>
-        </CollapsibleTrigger>
-        {hasActiveFilters ? (
-          <Button type="button" size="2xs" variant="transparentMuted" onClick={onClear}>
-            Clear filters
-          </Button>
-        ) : null}
-      </div>
-      <CollapsibleContent>
-        <div className="grid grid-cols-1 gap-x-cluster gap-y-inline border-b border-border-neutral-base px-row py-row min-[520px]:grid-cols-2">
-          <FilterField label="Date" className="col-span-full">
-            <DateRangePicker
-              size="small"
-              className="w-full"
-              {...(dateRange ? {dateRange} : {})}
-              onDateRangeSelect={handleDateRange}
-              onClear={() => onFiltersChange({from: undefined, to: undefined})}
-              placeholder="Any date"
-            />
-          </FilterField>
-          <FilterField label="Result">
-            <Combobox
-              multiple
-              size="small"
-              aria-label="Filter by result"
-              options={RESULT_OPTIONS}
-              value={resultValue}
-              onValueChange={handleResultValue}
-              placeholder="All results"
-              emptyState="No results"
-              className="w-full"
-              maxVisibleChips={2}
-            />
-          </FilterField>
-          <FilterField label="Source">
-            <Combobox
-              multiple
-              size="small"
-              options={toOptions(sources)}
-              value={filters.source ?? []}
-              onValueChange={(value) =>
-                onFiltersChange({source: value.length > 0 ? value : undefined})
-              }
-              placeholder="All sources"
-              emptyState="No sources yet"
-              className="w-full"
-              maxVisibleChips={2}
-            />
-          </FilterField>
-          <FilterField label="Event">
-            <Combobox
-              multiple
-              size="small"
-              options={toOptions(events)}
-              value={filters.event ?? []}
-              onValueChange={(value) =>
-                onFiltersChange({event: value.length > 0 ? value : undefined})
-              }
-              placeholder="All events"
-              emptyState="No events yet"
-              className="w-full"
-              maxVisibleChips={2}
-            />
-          </FilterField>
+    <PanelHeader className="min-h-48 flex-col items-stretch gap-0 p-0">
+      <Collapsible open={open} onOpenChange={setOpen}>
+        <div className="flex items-center justify-between gap-inline px-row py-row">
+          <CollapsibleTrigger asChild>
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              iconLeft="filter3Line"
+              iconRight={open ? 'arrowUpSLine' : 'arrowDownSLine'}
+            >
+              {activeCount > 0 ? `Filters (${activeCount})` : 'Filters'}
+            </Button>
+          </CollapsibleTrigger>
+          {hasActiveFilters ? (
+            <Button type="button" size="2xs" variant="transparentMuted" onClick={onClear}>
+              Clear filters
+            </Button>
+          ) : null}
         </div>
-      </CollapsibleContent>
-    </Collapsible>
+        <CollapsibleContent>
+          <div className="grid grid-cols-1 gap-x-cluster gap-y-inline px-row py-row min-[520px]:grid-cols-2">
+            <FilterField label="Date" className="col-span-full">
+              <DateRangePicker
+                size="small"
+                className="w-full"
+                {...(dateRange ? {dateRange} : {})}
+                onDateRangeSelect={handleDateRange}
+                onClear={() => onFiltersChange({from: undefined, to: undefined})}
+                placeholder="Any date"
+              />
+            </FilterField>
+            <FilterField label="Result">
+              <Combobox
+                multiple
+                size="small"
+                aria-label="Filter by result"
+                options={RESULT_OPTIONS}
+                value={resultValue}
+                onValueChange={handleResultValue}
+                placeholder="All results"
+                emptyState="No results"
+                className="w-full"
+                maxVisibleChips={2}
+              />
+            </FilterField>
+            <FilterField label="Source">
+              <Combobox
+                multiple
+                size="small"
+                options={toOptions(sources)}
+                value={filters.source ?? []}
+                onValueChange={(value) =>
+                  onFiltersChange({source: value.length > 0 ? value : undefined})
+                }
+                placeholder="All sources"
+                emptyState="No sources yet"
+                className="w-full"
+                maxVisibleChips={2}
+              />
+            </FilterField>
+            <FilterField label="Event">
+              <Combobox
+                multiple
+                size="small"
+                options={toOptions(events)}
+                value={filters.event ?? []}
+                onValueChange={(value) =>
+                  onFiltersChange({event: value.length > 0 ? value : undefined})
+                }
+                placeholder="All events"
+                emptyState="No events yet"
+                className="w-full"
+                maxVisibleChips={2}
+              />
+            </FilterField>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </PanelHeader>
   );
 }
 

package/src/components/events-list.test.tsx

@@ -72,6 +72,15 @@ async function selectResult(label: string) {
 }
 
 describe('EventsList', () => {
+  test('renders the event list as a panel with a header strip', () => {
+    renderList(makeProps());
+
+    const panel = document.querySelector('[data-slot="panel"]');
+
+    expect(panel).toBeInTheDocument();
+    expect(panel?.querySelector('[data-slot="panel-header"]')).toBeInTheDocument();
+  });
+
   test('renders a row per event with its match summary', () => {
     renderList(makeProps());
 

package/src/components/events-list.tsx

@@ -1,5 +1,6 @@
 import {QueryLoadError} from '@shipfox/client-ui';
 import {Button} from '@shipfox/react-ui/button';
+import {Panel} from '@shipfox/react-ui/panel';
 import {Table, TableBody, TableHead, TableHeader, TableRow} from '@shipfox/react-ui/table';
 import {hasTriggerEventFilters} from '#core/trigger-event.js';
 import {EventsFilterBar} from './events-filter-bar.js';
@@ -40,7 +41,7 @@ export function EventsList({
   }
 
   return (
-    <div className="flex min-h-0 flex-col overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base">
+    <Panel className="min-h-0 overflow-hidden p-0">
       <EventsFilterBar
         filters={filters}
         onFiltersChange={onFiltersChange}
@@ -92,6 +93,6 @@ export function EventsList({
           ) : null}
         </>
       ) : null}
-    </div>
+    </Panel>
   );
 }

package/src/components/trigger-event-detail.test.tsx

@@ -103,6 +103,9 @@ describe('TriggerEventDetailView', () => {
     renderDetailView(makeEvent());
 
     expect(await screen.findByText('Triggered 1 workflow')).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Matched workflows'})).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Payload'})).toBeInTheDocument();
+    expect(document.querySelectorAll('[data-slot="panel"]')).toHaveLength(2);
     expect(screen.getByText('Deploy production')).toBeInTheDocument();
     expect(screen.getByRole('link', {name: DEPLOY_RUN_LINK_NAME})).toHaveAttribute(
       'href',

package/src/components/trigger-event-detail.tsx

@@ -14,6 +14,7 @@ import {
 } from '@shipfox/react-ui/code-block';
 import {EmptyState} from '@shipfox/react-ui/empty-state';
 import {Icon} from '@shipfox/react-ui/icon';
+import {Panel, PanelBody, PanelHeader, PanelTitle} from '@shipfox/react-ui/panel';
 import {RelativeTime} from '@shipfox/react-ui/relative-time';
 import {Skeleton} from '@shipfox/react-ui/skeleton';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
@@ -29,8 +30,6 @@ import {useTriggerEventQuery} from '#hooks/api/trigger-events.js';
 import {triggerEventResult} from './trigger-event-result.js';
 import {TriggerSourceIcon} from './trigger-source-icon.js';
 
-const PANEL_CLASS =
-  'min-h-0 rounded-8 border border-border-neutral-base bg-background-neutral-base';
 const DETAIL_RAIL_CLASS =
   '@min-[820px]:sticky @min-[820px]:top-16 @min-[820px]:max-h-[calc(var(--app-content-h,100dvh_-_96px)_-_32px)] @min-[820px]:min-h-[min(320px,calc(var(--app-content-h,100dvh_-_96px)_-_32px))]';
 
@@ -87,9 +86,9 @@ export function TriggerEventDetailView({
   return (
     <aside
       aria-label="Event details"
-      className={cn(PANEL_CLASS, DETAIL_RAIL_CLASS, 'flex min-h-0 flex-col overflow-hidden')}
+      className={cn(DETAIL_RAIL_CLASS, 'flex min-h-0 flex-col gap-group')}
     >
-      <div className="flex shrink-0 flex-col gap-cluster border-b border-border-neutral-base p-panel-compact">
+      <div className="flex shrink-0 flex-col gap-cluster p-panel-compact">
         <Button
           type="button"
           variant="transparentMuted"
@@ -138,7 +137,7 @@ export function TriggerEventDetailView({
 
       <div
         key={event.id}
-        className="flex min-h-0 flex-1 flex-col gap-section overflow-y-auto p-panel-compact scrollbar"
+        className="flex min-h-0 flex-1 flex-col gap-group overflow-y-auto scrollbar"
       >
         <EventRuns workspaceId={workspaceId} workspaceSlug={workspaceSlug} event={event} />
         <EventPayload payload={formattedPayload} />
@@ -157,14 +156,10 @@ function triggerEventFullLabel(event: Pick<TriggerEventDetailModel, 'event' | 's
 
 function TriggerEventDetailPlaceholder() {
   return (
-    <aside
-      aria-label="Event details"
-      className={cn(
-        PANEL_CLASS,
-        'hidden min-h-[240px] items-center justify-center p-panel @min-[820px]:flex',
-      )}
-    >
-      <EmptyState icon="pulseLine" variant="compact" title="No event selected" />
+    <aside aria-label="Event details" className="hidden min-h-[240px] @min-[820px]:flex">
+      <Panel className="flex min-h-0 flex-1 items-center justify-center p-panel">
+        <EmptyState icon="pulseLine" variant="compact" title="No event selected" />
+      </Panel>
     </aside>
   );
 }
@@ -173,28 +168,26 @@ function TriggerEventDetailLoading({onBack}: {onBack: () => void}) {
   return (
     <aside
       aria-label="Event details"
-      className={cn(
-        PANEL_CLASS,
-        DETAIL_RAIL_CLASS,
-        'flex min-h-[320px] flex-col gap-group p-panel-compact',
-      )}
+      className={cn(DETAIL_RAIL_CLASS, 'flex min-h-[320px] flex-col')}
     >
-      <Button
-        type="button"
-        variant="transparentMuted"
-        size="sm"
-        iconLeft="arrowLeftLine"
-        className="self-start @min-[820px]:hidden"
-        onClick={onBack}
-      >
-        Back to events
-      </Button>
-      <div className="flex flex-col gap-inline">
-        <Skeleton className="h-16 w-160" />
-        <Skeleton className="h-12 w-120" />
-      </div>
-      <Skeleton className="h-96" />
-      <Skeleton className="h-160" />
+      <Panel className="flex min-h-[320px] flex-col gap-group p-panel-compact">
+        <Button
+          type="button"
+          variant="transparentMuted"
+          size="sm"
+          iconLeft="arrowLeftLine"
+          className="self-start @min-[820px]:hidden"
+          onClick={onBack}
+        >
+          Back to events
+        </Button>
+        <div className="flex flex-col gap-inline">
+          <Skeleton className="h-16 w-160" />
+          <Skeleton className="h-12 w-120" />
+        </div>
+        <Skeleton className="h-96" />
+        <Skeleton className="h-160" />
+      </Panel>
     </aside>
   );
 }
@@ -203,30 +196,28 @@ function TriggerEventDetailError({onBack, onRetry}: {onBack: () => void; onRetry
   return (
     <aside
       aria-label="Event details"
-      className={cn(
-        PANEL_CLASS,
-        DETAIL_RAIL_CLASS,
-        'flex min-h-[320px] flex-col gap-group p-panel-compact',
-      )}
+      className={cn(DETAIL_RAIL_CLASS, 'flex min-h-[320px] flex-col')}
     >
-      <Button
-        type="button"
-        variant="transparentMuted"
-        size="sm"
-        iconLeft="arrowLeftLine"
-        className="self-start @min-[820px]:hidden"
-        onClick={onBack}
-      >
-        Back to events
-      </Button>
-      <Callout role="alert" type="error">
-        <div className="flex items-center justify-between gap-cluster">
-          <Text size="sm">Event detail could not be loaded.</Text>
-          <Button type="button" variant="secondary" size="xs" onClick={onRetry}>
-            Retry
-          </Button>
-        </div>
-      </Callout>
+      <Panel className="flex min-h-[320px] flex-col gap-group p-panel-compact">
+        <Button
+          type="button"
+          variant="transparentMuted"
+          size="sm"
+          iconLeft="arrowLeftLine"
+          className="self-start @min-[820px]:hidden"
+          onClick={onBack}
+        >
+          Back to events
+        </Button>
+        <Callout role="alert" type="error">
+          <div className="flex items-center justify-between gap-cluster">
+            <Text size="sm">Event detail could not be loaded.</Text>
+            <Button type="button" variant="secondary" size="xs" onClick={onRetry}>
+              Retry
+            </Button>
+          </div>
+        </Callout>
+      </Panel>
     </aside>
   );
 }
@@ -243,9 +234,13 @@ function EventRuns({
   if (event.decisions.length === 0) {
     if (event.outcome === 'discarded') {
       return (
-        <Text size="sm" className="text-foreground-neutral-muted">
-          No workflows are subscribed to this event.
-        </Text>
+        <Panel>
+          <PanelBody className="p-panel-compact">
+            <Text size="sm" className="text-foreground-neutral-muted">
+              No workflows are subscribed to this event.
+            </Text>
+          </PanelBody>
+        </Panel>
       );
     }
     return null;
@@ -301,23 +296,25 @@ function EventRunsList({
   event: TriggerEventDetailModel;
 }) {
   return (
-    <section aria-labelledby="trigger-event-runs-heading" className="flex flex-col gap-inline">
-      <Text id="trigger-event-runs-heading" size="sm" bold>
-        Matched workflows
-      </Text>
-      <ul className="-mx-inline flex flex-col gap-tight">
-        {event.decisions.map((decision) => (
-          <DecisionRow
-            key={decision.id}
-            workspaceSlug={workspaceSlug}
-            projectId={decision.projectId ?? undefined}
-            projectSlug={decision.projectId ? projectSlugs.get(decision.projectId) : undefined}
-            projectDetailLookupEnabled={projectDetailLookupEnabled}
-            decision={decision}
-          />
-        ))}
-      </ul>
-    </section>
+    <Panel>
+      <PanelHeader>
+        <PanelTitle>Matched workflows</PanelTitle>
+      </PanelHeader>
+      <PanelBody>
+        <ul>
+          {event.decisions.map((decision) => (
+            <DecisionRow
+              key={decision.id}
+              workspaceSlug={workspaceSlug}
+              projectId={decision.projectId ?? undefined}
+              projectSlug={decision.projectId ? projectSlugs.get(decision.projectId) : undefined}
+              projectDetailLookupEnabled={projectDetailLookupEnabled}
+              decision={decision}
+            />
+          ))}
+        </ul>
+      </PanelBody>
+    </Panel>
   );
 }
 
@@ -343,25 +340,27 @@ function DecisionRow({
 
   if (decision.decision !== 'triggered' || !decision.runId || !decision.runName) {
     return (
-      <li className="flex min-w-0 items-start gap-inline rounded-6 p-tight">
-        <Icon
-          name="cornerDownRightLine"
-          className="size-14 shrink-0 text-foreground-neutral-disabled"
-          aria-hidden="true"
-        />
-        <div className="flex min-w-0 flex-col gap-tight">
-          <Text size="sm" className="min-w-0 truncate text-foreground-neutral-base">
-            {decision.subscriptionName}
-          </Text>
-          {decision.reason ? (
-            <Text size="xs" className="text-foreground-highlight-error">
-              {decision.reason}
-            </Text>
-          ) : (
-            <Text size="xs" className="text-foreground-neutral-disabled">
-              No run created
+      <li className="border-b border-border-neutral-base px-row py-row last:border-b-0">
+        <div className="flex min-w-0 items-start gap-inline">
+          <Icon
+            name="cornerDownRightLine"
+            className="size-14 shrink-0 text-foreground-neutral-disabled"
+            aria-hidden="true"
+          />
+          <div className="flex min-w-0 flex-col gap-tight">
+            <Text size="sm" className="min-w-0 truncate text-foreground-neutral-base">
+              {decision.subscriptionName}
             </Text>
-          )}
+            {decision.reason ? (
+              <Text size="xs" className="text-foreground-highlight-error">
+                {decision.reason}
+              </Text>
+            ) : (
+              <Text size="xs" className="text-foreground-neutral-disabled">
+                No run created
+              </Text>
+            )}
+          </div>
         </div>
       </li>
     );
@@ -385,10 +384,10 @@ function DecisionRow({
     </>
   );
   const rowClassName =
-    'flex min-w-0 items-start gap-inline rounded-6 p-tight hover:bg-background-components-hover focus-visible:outline-none focus-visible:shadow-button-neutral-focus';
+    'flex min-w-0 items-start gap-inline px-row py-row hover:bg-background-neutral-hover focus-visible:outline-none focus-visible:shadow-button-neutral-focus';
 
   return (
-    <li>
+    <li className="border-b border-border-neutral-base last:border-b-0">
       {workspaceSlug && resolvedProjectSlug ? (
         <Link
           to="/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId"
@@ -412,34 +411,38 @@ function EventPayload({payload}: {payload: string}) {
   const data = [{language: 'json', filename: 'payload.json', code: payload}];
 
   return (
-    <section aria-labelledby="trigger-event-payload-heading" className="flex flex-col gap-inline">
-      <Text id="trigger-event-payload-heading" size="sm" bold>
-        Payload
-      </Text>
-      <CodeBlock
-        data={data}
-        className="flex h-auto flex-col overflow-visible rounded-8 bg-background-contrast-base shadow-none"
-      >
-        <CodeBlockHeader className="sticky top-0 z-10 shrink-0 border-b border-border-contrast-base bg-background-contrast-base p-tight">
-          <CodeBlockFiles>
-            {(item) => <CodeBlockFilename value={item.filename}>{item.filename}</CodeBlockFilename>}
-          </CodeBlockFiles>
-          <CodeBlockCopyButton />
-        </CodeBlockHeader>
-        <CodeBlockBody className="min-h-0 scrollbar">
-          {(item) => (
-            <CodeBlockItem
-              value={item.filename}
-              lineNumbers={false}
-              className="px-0 pb-0 [&>div]:rounded-none [&>div]:border-0 [&>div]:bg-background-contrast-base [&>div]:dark:bg-background-contrast-base [&_code]:!text-foreground-neutral-on-color"
-            >
-              <CodeBlockContent language="json" syntaxHighlighting={false}>
-                {item.code}
-              </CodeBlockContent>
-            </CodeBlockItem>
-          )}
-        </CodeBlockBody>
-      </CodeBlock>
-    </section>
+    <Panel>
+      <PanelHeader>
+        <PanelTitle>Payload</PanelTitle>
+      </PanelHeader>
+      <PanelBody className="p-0">
+        <CodeBlock
+          data={data}
+          className="flex h-auto flex-col overflow-visible rounded-none bg-background-contrast-base shadow-none"
+        >
+          <CodeBlockHeader className="sticky top-0 z-10 shrink-0 border-b border-border-contrast-base bg-background-contrast-base p-tight">
+            <CodeBlockFiles>
+              {(item) => (
+                <CodeBlockFilename value={item.filename}>{item.filename}</CodeBlockFilename>
+              )}
+            </CodeBlockFiles>
+            <CodeBlockCopyButton />
+          </CodeBlockHeader>
+          <CodeBlockBody className="min-h-0 scrollbar">
+            {(item) => (
+              <CodeBlockItem
+                value={item.filename}
+                lineNumbers={false}
+                className="px-0 pb-0 [&>div]:rounded-none [&>div]:border-0 [&>div]:bg-background-contrast-base [&_code]:!text-foreground-neutral-on-color"
+              >
+                <CodeBlockContent language="json" syntaxHighlighting={false}>
+                  {item.code}
+                </CodeBlockContent>
+              </CodeBlockItem>
+            )}
+          </CodeBlockBody>
+        </CodeBlock>
+      </PanelBody>
+    </Panel>
   );
 }

package/src/pages/events-page.test.tsx

@@ -13,6 +13,7 @@ import {EventsPage} from './events-page.js';
 
 const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
 const EVENT_ID = '22222222-2222-4222-8222-222222222222';
+const EVENTS_HEADING = /^Events$/u;
 
 const useTriggerEventsInfiniteQueryMock = vi.mocked(useTriggerEventsInfiniteQuery);
 const useTriggerEventFacetsQueryMock = vi.mocked(useTriggerEventFacetsQuery);
@@ -89,6 +90,12 @@ describe('EventsPage', () => {
     );
     fireEvent.click(await screen.findByRole('button', {name: 'Open details for github · push'}));
     expect(screen.getByRole('button', {name: 'Back to events'})).toBeInTheDocument();
+    expect(screen.queryByRole('heading', {name: EVENTS_HEADING})).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(
+        'A workspace-wide audit log of trigger events received from integrations, schedules, and manual trigger calls.',
+      ),
+    ).not.toBeInTheDocument();
 
     useTriggerEventsInfiniteQueryMock.mockReturnValue(makeListQuery([]));
     rerender(<EventsPage workspaceId={WORKSPACE_ID} filters={{}} onFiltersChange={vi.fn()} />);

package/src/pages/events-page.tsx

@@ -1,5 +1,4 @@
 import {RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
-import {Header, Text} from '@shipfox/react-ui/typography';
 import {cn} from '@shipfox/react-ui/utils';
 import {useEffect, useMemo, useState} from 'react';
 import {EventsList} from '#components/events-list.js';
@@ -43,20 +42,7 @@ export function EventsPage({
 
   return (
     <RelativeTimeProvider>
-      <section
-        className="@container flex min-w-0 flex-col gap-group"
-        aria-labelledby="trigger-events-heading"
-      >
-        <div className="flex flex-col gap-tight">
-          <Header id="trigger-events-heading" variant="h3">
-            Events
-          </Header>
-          <Text size="sm" className="text-foreground-neutral-muted">
-            A workspace-wide audit log of trigger events received from integrations, schedules, and
-            manual trigger calls.
-          </Text>
-        </div>
-
+      <section className="@container flex min-w-0 flex-col gap-group" aria-label="Events">
         <div className="grid min-h-0 items-start gap-group @min-[820px]:grid-cols-[minmax(0,1fr)_minmax(360px,420px)]">
           <div className={cn('min-w-0', selectedEventId && '@max-[820px]:hidden')}>
             <EventsList

package/src/routes/events-settings.tsx

@@ -15,6 +15,7 @@ function validateSearch(search: Record<string, unknown>): TriggerEventsSearch {
 }
 
 export default defineRoute({
+  staticData: {frame: 'data'},
   validateSearch,
   component: () => {
     const workspace = useActiveWorkspace();