fix(time-picker): enable live tail for 3h-1d, rename switch, add disa…

.changeset/live-tail-time-picker-presets.md

@@ -0,0 +1,7 @@
+---
+'@hyperdx/app': patch
+---
+
+fix: expand live tail time picker presets to 6h and clarify switch label
+
+Enable 3h and 6h presets in live tail mode (previously capped at 1h in the picker, though longer ranges already worked via URL). Ranges above 6h remain disabled because the refresh tick (10s default) re-queries the full window, and 12–24h scans would be excessive. Rename the toggle switch from "Relative Time" to "Live tail ranges" to clarify that it controls which preset intervals are available, not whether live tail is active. Add a "Not available for Live Tail" tooltip to disabled presets (12h+).

packages/app/src/components/TimePicker/TimePicker.stories.tsx

@@ -22,3 +22,20 @@ export const Default = () => {
     />
   );
 };
+
+export const LiveTail = () => {
+  const [value, setValue] = React.useState('Live Tail');
+
+  return (
+    <TimePicker
+      inputValue={value}
+      setInputValue={setValue}
+      onSearch={() => {}}
+      onRelativeSearch={_rangeMs => {
+        // no-op: story only exercises the picker UI
+      }}
+      showLive
+      isLiveMode
+    />
+  );
+};

packages/app/src/components/TimePicker/TimePicker.tsx

@@ -330,7 +330,7 @@ const TimePickerComponent = ({
                   size="xs"
                   checked={isRelative}
                   onChange={e => setIsRelative(e.currentTarget.checked)}
-                  label="Relative Time"
+                  label="Live tail ranges"
                   labelPosition="right"
                   styles={{
                     label: {
@@ -367,18 +367,24 @@ const TimePickerComponent = ({
           <Card w={180} p={0}>
             <ScrollArea h={300} scrollbarSize={5}>
               <Stack gap={0} p="xs">
-                {relativeTimeOptions.map((item, index) =>
-                  item === 'divider' ? (
-                    <Divider key={index} my={4} />
-                  ) : (
+                {relativeTimeOptions.map((item, index) => {
+                  if (item === 'divider') {
+                    return <Divider key={index} my={4} />;
+                  }
+                  const isDisabledForLiveTail =
+                    isRelative && !item[2] && item[0] !== LIVE_TAIL_TIME_QUERY;
+                  const button = (
                     <Button
                       key={item[0]}
-                      disabled={
-                        isRelative &&
-                        !item[2] &&
-                        item[0] !== LIVE_TAIL_TIME_QUERY
-                      }
+                      // Use data-disabled instead of the `disabled` prop so
+                      // pointer-events stay active and the Tooltip can fire.
+                      // Mantine's [data-disabled] styles handle appearance.
+                      // aria-disabled exposes the state to screen readers,
+                      // keyboard users, and test assertions (toBeDisabled).
+                      data-disabled={isDisabledForLiveTail || undefined}
+                      aria-disabled={isDisabledForLiveTail || undefined}
                       onClick={() => {
+                        if (isDisabledForLiveTail) return;
                         if (isRelative || item[0] === LIVE_TAIL_TIME_QUERY) {
                           handleRelativeSearch?.(item[0], item[1]);
                         } else {
@@ -396,8 +402,23 @@ const TimePickerComponent = ({
                     >
                       {item[0]}
                     </Button>
-                  ),
-                )}
+                  );
+                  if (isDisabledForLiveTail) {
+                    return (
+                      <Tooltip
+                        key={item[0]}
+                        label="Not available for Live Tail"
+                        position="right"
+                        withArrow
+                        openDelay={0}
+                        zIndex={getDefaultZIndex('popover') + 3} // above the Popover (+2)
+                      >
+                        {button}
+                      </Tooltip>
+                    );
+                  }
+                  return button;
+                })}
               </Stack>
             </ScrollArea>
           </Card>

packages/app/src/components/TimePicker/utils.ts

@@ -99,8 +99,8 @@ export const RELATIVE_TIME_OPTIONS: (
   ['Last 45 minutes', ms('45m'), true],
   'divider',
   ['Last 1 hour', ms('1h'), true],
-  ['Last 3 hours', ms('3h')],
-  ['Last 6 hours', ms('6h')],
+  ['Last 3 hours', ms('3h'), true],
+  ['Last 6 hours', ms('6h'), true],
   ['Last 12 hours', ms('12h')],
   'divider',
   ['Last 1 days', ms('1d')],

packages/app/tests/e2e/features/search/relative-time.spec.ts

@@ -42,9 +42,9 @@ test.describe('Relative Time Picker', { tag: '@relative-time' }, () => {
     });
 
     test('should show Live Tail option in relative time mode', async () => {
-      const liveTailButton = searchPage.page
-        .locator('text=Live Tail')
-        .locator('..');
+      const liveTailButton = searchPage.timePicker.popover.getByRole('button', {
+        name: 'Live Tail',
+      });
       await expect(liveTailButton).toBeVisible();
     });
   });