Coderabbit improvements

Author: samejr

apps/webapp/app/components/metrics/ModelsFilter.tsx

@@ -152,7 +152,7 @@ function ModelsDropdown({
               {m.model}
             </SelectItem>
           ))}
-          {filtered.length === 0 && <SelectItem disabled className="text-text-bright">No models found</SelectItem>}
+          {filtered.length === 0 && <SelectItem disabled>No models found</SelectItem>}
         </SelectList>
       </SelectPopover>
     </SelectProvider>

apps/webapp/app/components/metrics/ScopeFilter.tsx

@@ -59,7 +59,7 @@ export function ScopeFilter({ shortcut, value, onValueChange }: ScopeFilterProps
         <Ariakit.TooltipAnchor
           render={
             <Ariakit.Select
-              ref={triggerRef as any}
+              ref={triggerRef}
               render={<div className="group cursor-pointer focus-custom" />}
             />
           }

apps/webapp/app/components/navigation/DashboardDialogs.tsx

@@ -3,8 +3,8 @@ import { Form, useNavigation } from "@remix-run/react";
 import { motion } from "framer-motion";
 import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
 import { PlusIcon } from "@heroicons/react/20/solid";
-import { useEffect, useRef, useState } from "react";
-import { type ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
+import { useEffect, useState } from "react";
+import { type ShortcutDefinition } from "~/hooks/useShortcutKeys";
 import { type MatchedOrganization, useDashboardLimits } from "~/hooks/useOrganizations";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
 import { Feedback } from "~/components/Feedback";

apps/webapp/app/components/primitives/SearchInput.tsx

@@ -100,10 +100,8 @@ export function SearchInput({
                   button={
                     <button
                       type="button"
-                      onPointerDown={(e) => {
-                        e.preventDefault();
-                        handleClear();
-                      }}
+                      onMouseDown={(e) => e.preventDefault()}
+                      onClick={() => handleClear()}
                       className="flex size-4.5 items-center justify-center rounded-[2px] border border-text-dimmed/40 text-text-dimmed transition hover:bg-charcoal-600 hover:text-text-bright"
                     >
                       <XMarkIcon className="size-3" />

apps/webapp/app/components/primitives/Select.tsx

@@ -357,7 +357,7 @@ export function SelectTrigger({
       </Ariakit.TooltipAnchor>
       {showTooltip && (
         <Ariakit.Tooltip
-          disabled={shortcut === undefined}
+          disabled={!tooltipTitle && !shortcut}
           className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright px-2 py-1.5 text-xs"
         >
           <div className="flex items-center gap-2">

apps/webapp/app/components/runs/v3/AIFilterInput.tsx

@@ -143,10 +143,8 @@ export function AIFilterInput() {
                       button={
                         <button
                           type="button"
-                          onPointerDown={(e) => {
-                            e.preventDefault();
-                            setText("");
-                          }}
+                          onMouseDown={(e) => e.preventDefault()}
+                          onClick={() => setText("")}
                           className="flex size-4.5 items-center justify-center rounded-[2px] border border-text-dimmed/40 text-text-dimmed transition hover:bg-charcoal-600 hover:text-text-bright"
                         >
                           <XMarkIcon className="size-3" />

apps/webapp/app/components/runs/v3/BatchFilters.tsx

@@ -180,9 +180,8 @@ function PermanentStatusFilter() {
             <Ariakit.TooltipProvider timeout={200}>
               <Ariakit.TooltipAnchor
                 render={
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
                   <Ariakit.Select
-                    ref={triggerRef as any}
+                    ref={triggerRef}
                     render={<div className="group cursor-pointer focus-custom" />}
                   />
                 }
@@ -229,7 +228,7 @@ function PermanentStatusFilter() {
 
 function validateBatchId(value: string): string | undefined {
   if (!value.startsWith("batch_")) return "Batch IDs start with 'batch_'";
-  if (value.length !== 27 && value.length !== 31) return "Batch IDs are 27/32 characters long";
+  if (value.length !== 27 && value.length !== 31) return "Batch IDs are 27 or 31 characters long";
 }
 
 function BatchIdDropdown(
@@ -271,9 +270,8 @@ function PermanentBatchIdFilter() {
             <Ariakit.TooltipProvider timeout={200}>
               <Ariakit.TooltipAnchor
                 render={
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
                   <Ariakit.Select
-                    ref={triggerRef as any}
+                    ref={triggerRef}
                     render={<div className="group cursor-pointer focus-custom" />}
                   />
                 }

apps/webapp/app/components/runs/v3/RunFilters.tsx

@@ -1517,6 +1517,8 @@ function RootOnlyToggle({ defaultValue }: { defaultValue: boolean }) {
           onCheckedChange={(checked) => {
             replace({
               rootOnly: checked ? "true" : "false",
+              cursor: undefined,
+              direction: undefined,
             });
           }}
         />
@@ -1533,7 +1535,7 @@ function RootOnlyToggle({ defaultValue }: { defaultValue: boolean }) {
 
 function validateRunId(value: string): string | undefined {
   if (!value.startsWith("run_")) return "Run IDs start with 'run_'";
-  if (value.length !== 25 && value.length !== 29) return "Run IDs are 25/30 characters long";
+  if (value.length !== 25 && value.length !== 29) return "Run IDs are 25 or 29 characters long";
 }
 
 function RunIdDropdown(
@@ -1638,7 +1640,7 @@ function AppliedBatchIdFilter() {
 }
 
 function validateScheduleId(value: string): string | undefined {
-  if (!value.startsWith("sched")) return "Schedule IDs start with 'sched_'";
+  if (!value.startsWith("sched_")) return "Schedule IDs start with 'sched_'";
   if (value.length !== 27) return "Schedule IDs are 27 characters long";
 }
 

apps/webapp/app/components/runs/v3/SharedFilters.tsx

@@ -1037,7 +1037,7 @@ export function IdFilterDropdown({
     if (open) setInputValue(currentValue);
   }
 
-  const apply = useCallback(() => {
+  const apply = () => {
     clearSearchValue();
     replace({
       cursor: undefined,
@@ -1046,7 +1046,7 @@ export function IdFilterDropdown({
     });
 
     setOpen(false);
-  }, [inputValue, replace, paramKey]);
+  };
 
   const error = inputValue ? validate?.(inputValue) : undefined;
 

apps/webapp/app/components/runs/v3/WaitpointTokenFilters.tsx

@@ -69,7 +69,10 @@ export function WaitpointTokenFilters(props: WaitpointTokenFiltersProps) {
     searchParams.has("statuses") ||
     searchParams.has("tags") ||
     searchParams.has("id") ||
-    searchParams.has("idempotencyKey");
+    searchParams.has("idempotencyKey") ||
+    searchParams.has("period") ||
+    searchParams.has("from") ||
+    searchParams.has("to");
 
   return (
     <div className="flex flex-row flex-wrap items-center gap-1.5">
@@ -300,7 +303,7 @@ function TagsDropdown({
           return true;
         }}
       >
-        {!(filtered.length === 0 && fetcher.state !== "loading") && (
+        {!(filtered.length === 0 && fetcher.state !== "loading" && searchValue === "") && (
           <ComboBox
             value={searchValue}
             render={(props) => (