feat(app): edit alerts from the list, filter by alert source, label source icons

The alerts page row menu now opens the alert editor, so changing a threshold
no longer means navigating into the alert first. The modal needs a range for
its threshold preview; a list row has none, so it derives one from the alert's
interval when the modal opens.

Each row's source icon gains a tooltip and accessible label naming what the
alert watches, a new filter narrows the list by that source, and free-text
search matches it too. All three read one getAlertSourceLabel helper so their
wording cannot drift. Named 'alert source' rather than 'type' (taken by
detection type) or bare 'source' (reads as a data source).

The creator moves out of the shared properties line into its own dimmed
sub-line: it is provenance, not configuration, and at equal weight it pushed
the line into a second row that broke mid-phrase. Remaining segments no longer
wrap mid-phrase. Team settings tabs gain icons.

Author: jordan-simonovski

.changeset/alerts-summary-ux.md

@@ -0,0 +1,12 @@
+---
+'@hyperdx/app': minor
+---
+
+feat(alerts): edit from the alerts list, filter by alert source, and label the source icons
+
+The alerts page row menu now opens the alert editor directly, so changing a
+threshold no longer means navigating to the alert first. The source icon on
+each row gets a tooltip and accessible label naming what it watches ("Saved
+search" / "Dashboard tile"), and a new filter narrows the list by that source
+— free-text search matches it too, so typing "tile" works without touching the
+dropdown. Team settings tabs gain icons.

packages/app/src/AlertsPage.tsx

@@ -22,6 +22,7 @@ import { PageHeader } from '@/components/PageHeader';
 import {
   getAlertCreatorLabel,
   getAlertDisplayName,
+  getAlertSourceLabel,
   getAlertTags,
 } from '@/utils/alerts';
 
@@ -38,6 +39,7 @@ export default function AlertsPage() {
   const [search, setSearch] = useQueryState('search');
   const [tagFilter, setTagFilter] = useQueryState('tag');
   const [creatorFilter, setCreatorFilter] = useQueryState('creator');
+  const [sourceFilter, setSourceFilter] = useQueryState('alertSource');
 
   const allTags = React.useMemo(() => {
     const tags = new Set<string>();
@@ -54,8 +56,19 @@ export default function AlertsPage() {
     return Array.from(creators).sort();
   }, [alerts]);
 
+  // Only the source types actually present, so the filter never offers an
+  // option that yields an empty list.
+  const allSources = React.useMemo(() => {
+    const sources = new Set<string>();
+    alerts.forEach(a => sources.add(getAlertSourceLabel(a)));
+    return Array.from(sources).sort();
+  }, [alerts]);
+
   const filteredAlerts = React.useMemo(() => {
     let result = alerts;
+    if (sourceFilter) {
+      result = result.filter(a => getAlertSourceLabel(a) === sourceFilter);
+    }
     if (tagFilter) {
       result = result.filter(a => getAlertTags(a).includes(tagFilter));
     }
@@ -67,13 +80,24 @@ export default function AlertsPage() {
       result = result.filter(
         a =>
           getAlertDisplayName(a).toLowerCase().includes(q) ||
+          // So "tile" / "saved search" narrow the list the same way the type
+          // filter does, without having to reach for the dropdown.
+          getAlertSourceLabel(a)
+            .toLowerCase()
+            .split(' ')
+            .some(word => word.startsWith(q)) ||
           getAlertTags(a).some(t => t.toLowerCase().includes(q)),
       );
     }
     return result;
-  }, [alerts, search, tagFilter, creatorFilter]);
+  }, [alerts, search, tagFilter, creatorFilter, sourceFilter]);
 
-  const hasFilters = !!(search?.trim() || tagFilter || creatorFilter);
+  const hasFilters = !!(
+    search?.trim() ||
+    tagFilter ||
+    creatorFilter ||
+    sourceFilter
+  );
 
   return (
     <div
@@ -121,6 +145,23 @@ export default function AlertsPage() {
                 miw={100}
                 data-testid="alerts-search-input"
               />
+              {(allSources.length > 1 || sourceFilter) && (
+                <Select
+                  placeholder="Filter by alert source"
+                  // A filter carried in from the URL may name a source no
+                  // current alert has; keep it selectable so it can be cleared.
+                  data={
+                    sourceFilter && !allSources.includes(sourceFilter)
+                      ? [...allSources, sourceFilter]
+                      : allSources
+                  }
+                  value={sourceFilter}
+                  onChange={v => setSourceFilter(v)}
+                  clearable
+                  style={{ maxWidth: 220 }}
+                  data-testid="alerts-source-filter"
+                />
+              )}
               {allTags.length > 0 && (
                 <Select
                   placeholder="Filter by tag"

packages/app/src/TeamPage.tsx

@@ -14,7 +14,15 @@ import {
   TextInput,
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
-import { IconPencil } from '@tabler/icons-react';
+import {
+  IconAdjustmentsHorizontal,
+  IconApi,
+  IconDatabase,
+  IconPencil,
+  IconPlug,
+  IconShieldLock,
+  IconUsers,
+} from '@tabler/icons-react';
 
 import { PageHeader } from './components/PageHeader';
 import ApiKeysSection from './components/TeamSettings/ApiKeysSection';
@@ -34,6 +42,7 @@ import { APP_CONTENT_SCROLL_CONTAINER_ID, withAppNav } from './layout';
 type TeamTab = {
   value: string;
   label: string;
+  icon: ReactNode;
   sections: {
     id: string;
     // Always a function of whether this tab is the visible one. Mantine `Tabs`
@@ -106,6 +115,7 @@ export default function TeamPage() {
     {
       value: 'data',
       label: 'Data',
+      icon: <IconDatabase size={16} />,
       sections: [
         {
           id: 'team-data-sources',
@@ -120,6 +130,7 @@ export default function TeamPage() {
     {
       value: 'team',
       label: 'Members',
+      icon: <IconUsers size={16} />,
       sections: [
         {
           id: 'team-members',
@@ -132,6 +143,7 @@ export default function TeamPage() {
           {
             value: 'access',
             label: 'Access',
+            icon: <IconShieldLock size={16} />,
             sections: [
               {
                 id: 'team-access-security-policies',
@@ -148,6 +160,7 @@ export default function TeamPage() {
     {
       value: 'api-agents',
       label: 'API & Agents',
+      icon: <IconApi size={16} />,
       sections: [
         {
           id: 'team-api-agents-api-keys',
@@ -172,6 +185,7 @@ export default function TeamPage() {
     {
       value: 'integrations',
       label: 'Integrations',
+      icon: <IconPlug size={16} />,
       sections: [
         {
           id: 'team-integrations-webhooks',
@@ -182,6 +196,7 @@ export default function TeamPage() {
     {
       value: 'advanced',
       label: 'Query Settings',
+      icon: <IconAdjustmentsHorizontal size={16} />,
       sections: [
         {
           id: 'team-advanced-query-settings',
@@ -333,7 +348,11 @@ export default function TeamPage() {
             <Tabs value={activeTab} onChange={handleTabChange}>
               <Tabs.List>
                 {tabs.map(tab => (
-                  <Tabs.Tab key={tab.value} value={tab.value}>
+                  <Tabs.Tab
+                    key={tab.value}
+                    value={tab.value}
+                    leftSection={tab.icon}
+                  >
                     {tab.label}
                   </Tabs.Tab>
                 ))}

packages/app/src/components/alerts/AlertDetails.tsx

@@ -8,6 +8,8 @@ import {
   Flex,
   Group,
   Stack,
+  Text,
+  Tooltip,
   UnstyledButton,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
@@ -28,6 +30,7 @@ import { IS_ALERT_DETAILS_ENABLED } from '@/config';
 import type { AlertsPageItem } from '@/types';
 import {
   getAlertDisplayName,
+  getAlertSourceLabel,
   getAlertSourceUrl,
   getAlertTags,
 } from '@/utils/alerts';
@@ -122,27 +125,48 @@ export const AlertDetails = React.memo(function AlertDetails({
 
   const alertUrl = React.useMemo(() => getAlertSourceUrl(alert), [alert]);
 
-  const alertIcon = (() => {
+  const sourceLabel = getAlertSourceLabel(alert);
+
+  // The glyph alone doesn't say what it watches; the tooltip (and its
+  // accessible label) names it. `span` wrapper: Tooltip needs an element that
+  // forwards a ref, which the icon components don't.
+  const sourceGlyph = (() => {
     switch (alert.source) {
       case AlertSource.TILE:
-        return <IconChartLine size={14} />;
+        return <IconChartLine size={14} aria-hidden="true" />;
       case AlertSource.SAVED_SEARCH:
-        return <IconTableRow size={14} />;
+        return <IconTableRow size={14} aria-hidden="true" />;
       default:
-        return <IconHelpCircle size={14} />;
+        return <IconHelpCircle size={14} aria-hidden="true" />;
     }
   })();
 
-  const linkTitle = React.useMemo(() => {
-    switch (alert.source) {
-      case AlertSource.TILE:
-        return 'Dashboard tile';
-      case AlertSource.SAVED_SEARCH:
-        return 'Saved search';
-      default:
-        return '';
-    }
-  }, [alert]);
+  // Only labelled when the source actually resolves — same guard as
+  // `linkTitle`, so an alert whose source is gone doesn't get a confident
+  // "Unknown source" tooltip where the rest of the row stays silent.
+  const alertIcon = alert.source ? (
+    <Tooltip label={sourceLabel} withArrow position="top">
+      <span
+        role="img"
+        aria-label={sourceLabel}
+        style={{ display: 'inline-flex' }}
+        data-testid={`alert-source-icon-${alert._id}`}
+      >
+        {sourceGlyph}
+      </span>
+    </Tooltip>
+  ) : (
+    <span
+      style={{ display: 'inline-flex' }}
+      data-testid={`alert-source-icon-${alert._id}`}
+    >
+      {sourceGlyph}
+    </span>
+  );
+
+  // Empty for an unresolvable source: AlertRowMenu lowercases this into
+  // "Open <source>" and falls back to its own wording when blank.
+  const linkTitle = alert.source ? sourceLabel : '';
 
   return (
     <div data-testid={`alert-card-${alert._id}`} className={styles.alertRow}>
@@ -184,6 +208,11 @@ export const AlertDetails = React.memo(function AlertDetails({
             </Link>
           </div>
           <AlertPropertiesSummary alert={alert} />
+          {alert.createdBy && (
+            <Text size="xs" c="dimmed" data-testid="alert-created-by">
+              Created by {alert.createdBy.name || alert.createdBy.email}
+            </Text>
+          )}
           {getAlertTags(alert).length > 0 && (
             <Group gap={4}>
               {getAlertTags(alert).map(tag => (

packages/app/src/components/alerts/AlertPropertiesSummary.tsx

@@ -160,8 +160,11 @@ function NotificationTargets({
 
 /**
  * One-line alert metadata summary: threshold condition, optional evaluation
- * schedule, notification targets, and creator. Shared between the alerts
- * page rows and the alert detail page header.
+ * schedule, and notification targets — configuration only.
+ *
+ * The creator is deliberately absent: it is provenance, not configuration, and
+ * at equal weight it crowded the line into a second row that broke mid-phrase.
+ * Each surface renders it as its own dimmed sub-line instead.
  */
 export function AlertPropertiesSummary({
   alert,
@@ -173,8 +176,13 @@ export function AlertPropertiesSummary({
     alert.thresholdType;
 
   return (
-    <div className="fs-8 d-flex gap-2 align-items-center">
-      <span>
+    // Segments wrap as whole phrases: each is nowrap, so a narrow container
+    // breaks between them rather than splitting "Notify via" down the middle.
+    <div
+      className="fs-8 d-flex gap-2 align-items-center"
+      style={{ flexWrap: 'wrap', rowGap: 4 }}
+    >
+      <span style={{ whiteSpace: 'nowrap' }}>
         If value {thresholdLabel}{' '}
         <span className="fw-bold">{alert.threshold}</span>
         {isRangeThresholdType(alert.thresholdType) && (
@@ -187,12 +195,14 @@ export function AlertPropertiesSummary({
       {isDetail && (
         <>
           <span>&middot;</span>
-          <span>Evaluates every {alert.interval}</span>
+          <span style={{ whiteSpace: 'nowrap' }}>
+            Evaluates every {alert.interval}
+          </span>
           {alert.numConsecutiveWindows != null &&
             alert.numConsecutiveWindows > 1 && (
               <>
                 <span>&middot;</span>
-                <span>
+                <span style={{ whiteSpace: 'nowrap' }}>
                   Fires after {alert.numConsecutiveWindows} consecutive windows
                 </span>
               </>
@@ -201,14 +211,6 @@ export function AlertPropertiesSummary({
       )}
       <span>&middot;</span>
       <NotificationTargets alert={alert} showNames={isDetail} />
-      {alert.createdBy && (
-        <>
-          <span>&middot;</span>
-          <span>
-            Created by {alert.createdBy.name || alert.createdBy.email}
-          </span>
-        </>
-      )}
     </div>
   );
 }